1
2
3
4
5
6
7
8
9
{
  ...
  "compilerOptions": {
    "strict": true,
    ...
  },
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Book {
  pages: number;
  constructor(totalPages: number) {
    this.pages = totalPages;
  }


  isLastPageFunction() {
    return function (currentPage: number) {
      // ❌ 'this' here implicitly has type 'any' because it does not have a type annotation.
      return this.pages === currentPage;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
const logNumber = (x: number) => {
  console.log(`number ${x} logged!`)
}


// ✅ works fine
logNumber.call(undefined, 10);


// ❌ error: Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
logNumber.call(undefined, "10");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface Person {
  name: string | undefined;
  age: number;
}


const x: Person = { name: 'Max', age: 3 };


// ❌ Works with strictNullChecks off, which is lax
console.log(x.name.toLowerCase());




// ✅ Fails with strictNullChecks on as x.name could be undefined
console.log(x.name.toLowerCase());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface Book {
  author?: string;
  numPages: number;
  price: number;
}


// ✅ Article is a Book without a Page
type Article = Omit<Book, 'numPages'>;


// ✅ We might need a readonly verison of the Book Type
type ReadonlyBook = Readonly<Book>;


// ✅ A Book that must have an author
type NonAnonymousBook = Omit<Book, 'author'> & Required<Pick<Book, 'author'>>;

1
2
3
4
5
6
type animals = 'bird' | 'cat' | 'crocodile';


type mamals = Exclude<animals, 'crocodile'>;
// 'bird' | 'cat'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const addNumber = (a: number, b: number) => a + b;


// ❌ you are hardcoding the type `number` instead of relying on what the function returns
const processResult = (result: number) => console.log(result);
processResult(addNumber(1, 1));




// ✅ result will be whatever the return type of addNumber function
// no need for us to redefine it
const processResult = (result: ReturnType<typeof addNumber>) => console.log(result);
processResult(addNumber(1, 1));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ❌ Sometimes for one of objects it is not necessary to define
// interfaces for it
interface Book {
  name: string,
  author: string
}


const book: Book = {
  name: 'For whom the bell tolls',
  author: 'Hemingway'
}


const printBook = (bookInstance: Book) => console.log(bookInstance)

1
2
3
4
5
6
7
8
9
// ✅ For simple scenarios we can rely on type inference
const book = {
  name: 'For whom the bell tolls',
  author: 'Hemingway'
}


const printBook = (bookInstance: typeof book) => console.log(bookInstance)

1
2
3
4
5
6
const array: number[] = [1,2,3,4];


// ✅ type X will be number
type X = typeof array extends (infer U)[] ? U : never;

1
2
3
4
5
6
7
8
9
10
11
12
13
// ❌ instead of this
interface Example {
  foo(one: number): number;
  foo(one: number, two: number): number;
  foo(one: number, two: number, three: number): number;
}


// ❎ do this
interface Example {
  foo(one?: number, two?: number, three?: number): number;
}

1
2
3
4
5
6
7
8
9
10
11
12
// ❌ instead of this
interface Example {
  foo(one: number): number;
  foo(one: number | string): number;
}


// ❎ do this
interface Example {
  foo(one: number | string): number;
}

1
2
3
4
5
6
7
// ❌ Avoid, parameters types and length are unknown. Return type is any
const onSubmit = (callback: Function) => callback(1, 2, 3);


// ✅ Preferred, the arguments and return type of callback is now clear
const onSubmit = (callback: () => Promise<unknown>) => callback();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ✅ declare properties as readonly
interface Person {
  readonly name: string;
  readonly age: number;
}


// ✅ implicitely declaring a readonly arrays
const x = [1,2,3,4,5] as const;


// ✅ explicitely declaring a readonly array
const y: ReadonlyArray<{ x: number, y: number}> = [ {x: 1, y: 1}]


interface Address {
  street: string;
  city: string;
}


// ✅ converting all the type properties to readonly
type ReadonlyAddress = Readonly<Address>;

1
2
3
4
5
const array: number[] = [1,2,3,4];


type X = typeof array extends (infer U)[] ? U : never;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
interface HttpResponse<T, V> {
  data: T;
  included?: V;
}


type StringHttpResponse = HttpResponse<string, never>;


// ❌ included prop is not assignable
const fails: StringHttpResponse = {
  data: 'test',
  included: {}
  // ^^^^^
  // Type '{}' is not assignable to type 'never'
}


// ✅ included is not assigned
const works: StringHttpResponse = {
  data: 'test',
}

1
2
type StringHttpResponse = Omit<HttpResponse<string, unkown>, 'included'>;