TypeScript Notes

October 31, 2022 610 words 3 minutes

Contents

Basics
ES6
OOP
Debugging
References

Basics

tsc -init generates tsconfig.json and now tsc will compile all the files in the directory and subdirectories.

Arrays.

1
2


const pets: string[] = ['cats', 'dogs'] // can only hold strings now.
const weirdArray: any[] = ['cats', 42] // can hold any type.

Tuples are just arrays with a specific number of elements of specific types. There are no enforcements in JS, but it’s all enforced in TS.
1

const author: [string, number] = ['Bob', 42];

Enums are TS only.

1
2
3
4
5
6
7


enum Food {
    Pizza, // 0
    Burger = 500,
    Rice // 501
}
const myFavorite = Food.Burger
console.log(myFavorite) // 500

Functions.

1
2
3
4


function add(x: number, y: number): string {
    return '' + x + y
}
let f: (x: number, y: number) => string = add

Objects.

1
2
3
4
5


const car: {type: string, model: string, year: number} = {
    type: 'Toyota',
    model: 'Corolla',
    year: 2009
}

null and undefined are subtypes of all other types. So we can do let foo: number = null. We can turn on strictNullChecks in tsconfig.json,and then the compiler will complain if we assign null or undefined to any variable except if it is declared as type any. If we do let foo = null, we can only assign null to it due to the inferred null type.
void is typically used only when the function returns no value.

Type alias.

1
2
3
4
5
6


type Person = {
    firstName: string, lastName: string, age: number
}
const person1: Person = {
    firstName: 'Mike', lastName: 'White', age: 42
}

Union types.

1
2
3


let foo: number | string;
foo = 42
foo = '42'

Use third-party libraries with the @types type declaration file.

1
2


npm install foo
npm install --save-dev @types/foo

ES6

We get ES6 features out-of-the-box when using TypeScript.

Arrow functions and default parameters.

1

const addNums = (a: number, b: number = 10): number => a + b

Spread, rest, and optional arguments.

1
2
3


const addNums = (a?: number, b?: number): number => a + b // optional arguments
const nums: number[] = [5, 6]
addNums(...nums) // spread

1
2
3


const addNums = (...a: number[]) : number => a.reduce((acc, val) => acc + val) // rest
const nums: number[] = [5, 6]
addNums(...nums)

Destructuring (objects and arrays).

1
2
3
4
5
6
7


const person = {
    firstName: 'Mike', lastName: 'White', age: 42
}
const {firstName, lastName, age} = person
const a = ['abc', 11, 'wow']
const [x, y, z] = a
[foo, bar] = [bar, foo] // swaps the values

OOP

We can declare properties outside of constructors. And TS adds visibilities (private, protected).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class Planet {
    private name: string = 'none'
    mass: number;
    static meStatic: boolean = true
    constructor(inName: string, inMass: number) {
        // We can still set the properties in constructors
        this.name = inName
        this.mass = inMass
    }
}

Getters and setters.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class Planet {
    private _name: string = 'no name set'
    get name() {
        return `Name is ${self._name}`
    }
    set name(inName: string) {
        this._name = inName
    }
    readonly foo: string = 'read only' // or provide a getter only to make it read-only
}

Generics.

1

function echoMe<T>(inArg: T): T { return inArg; }

Debugging

tsc --sourceMap foo.ts generates a foot.js.map file, which allows us to debug the TS code in the browser by appending //# sourceMappingURL=foo.js.map to the TS file.

Contents

TypeScript Notes

Basics

ES6

OOP

Debugging

References