TIL - Code Quality

February 18, 2020

What follows is notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂

Slides

Typescript Slides

Typescript

  • Instead of tsc --watch VS Code can run a build task: cmd + shift + P then type “tasks” and select ‘Tasks: Configure Default Build Step’, ‘tsc:watch - tsconfig.json’ which this will produce a .vscode folder with tasks.json
  • Terminal –> Run Build Task

Tuples

Tuples are like arrays where you specify the type of some of the items, though it can have items which don’t have types. Only the defined indexes will be type-checked.

TypeScript Types

See docs

  • number
  • string
  • boolean
  • symbol
  • null
  • undefined
  • Function
  • object
  • Array<genericType>
  • tuple
  • enum
  • void
  • never
  • unknown
  • any (avoid this as it defeats the whole purpose of TS!)

Union Types

let str: string |  number;
str = 'hello'; // ok
str = 2; // ok
str = true; // ERROR

Object Types - Interfaces

Interfaces allow us to define group definitions.

interface Person {
  name: string,
  age: number,
  job?: string
}

let person:Person = {
  name: 'James'
}; // Error: Property 'age' is missing in type

Optional properties are identified with a question mark (?) –> you’ll only get an error on the required ones if they’re not there:

interface Animal {
  legs: number,
  name: string,
  superpower?: string
}

let myAnimal:Animal = {
  legs: 11,
  name: 'Jack',
}; // no errors

let myAnimal:Animal = {
  legs: 11,
  name: 'Jack',
  superpower: 'flying',
  // no errors
};

let myAnimal:Animal = {
  legs: 11,
  name: 'Jack',
  superpower: 'flying',
  eyes: 5
  // 'eyes' does not exist in type 'Animal'
};

Functions

// Define an interface for your object
interface GreetingSettings {
  duration: number;
  color?: string;
}

const defaults = {
  duration: 500,
  color: '#000'
};

// Then use it
 
function greet(greeting: string, options: GreetingSettings = defaults, extra?: boolean): void {
  // ...
}

greet('Hello Joe!!');
greet('Hello Wayne!!', { duration: 1000, color: '#f00'});

Function Type Declarations

// this won't be run, it's a type declaration for the function
// use the type keyword:
type numericFn = (num:number) => number;

// how do we check that this function matches the pattern and returns a number?
// with the type definition `numericFn` that we just created!
let squareFn: numericFn = (n) => n*n;

console.log(squareFn(2));

function square() {
  return this.value * this.value
}

function printSquare() {
  return (this.value * this.value).toFixed(2); //string
}


interface Stat {
  value: number,
  square(num: number): number;
}

let myStat = {
  value: 3,
  square: printSquare
};

console.log(myStat.value);
console.log(myStat.square());

Example:

type numericFn = (num: number) => number;
// note that this type definition will not appear in the compiled javascript

const squareFn: numericFn = (num) => num * num; // Ok
const squareFn: numericFn = (num) => num.toString(); // Error

External Code Types

If you want to use TypeScript with 3rd party code you can import types into your project. For example search them on Type Search…here’s an example for lodash (npm i @types/lodash). Definitely Typed is another resource for commonly used type definitions.

TypeScript in Bigger Projects

Run this to see an example of TS and the file structure in a bigger code project:

npx create-react-app app-with-typescript --template typescript

VS Code Shell And Path

Not related to the above but exciting nonetheless! This turned out to tbe the fix to make the bash shell work correctly in VS Code. For whatever reason it was not putting the correct node version into my path with nvm, but this made it work properly.

We also got eslint working properly by deleting a duplicate installation of node. We compared which versions were being picked up by running which node in the different shell windows, finding an old version 8 installation of node in usr/local/bin and then deleting it. Hoping this won’t cause issues with yarn working, since crew installed this Node version when installing yarn.

Tags icon Stacked price tag looking things Tags: