TypeScript

[DanKim0213]

TypeScript

• TypeScript Exercies와 Handbook을 통해 TypeScript로 무엇을 할 수 있는지 감을 익힌자.
• React TypeScript Cheatsheet를 참고해 React에 적용하면서 실질적으로 프론트엔드에서 타입스크립트가 어떻게 쓰이는지 익히자.
• 마지막으로, Effective TypeScript 책을 통해 경험적으로 극복하지 못한 한계를 전문가의 눈으로 다시 한번 재정비하자.

[DanKim0213]

Why TypeScript is structurally typed type system.

As I wrote in the cheatsheet of typescript, the below example works just as if we had used an anonymous object type.

interface Point {
    x: number;
    y: number;
}

function printCoord(pt: Point) {
    console.log("The coordinate's x value is " + pt.x);
    console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

Another example is that when we narrow types:

type Fish = { swim: () => void };
type Bird = { fly: () => void };
declare function getSmallPet(): Fish | Bird;

function isFish(pet: Fish | Bird): pet is Fish {
  return 'swim' in pet;
}
// ---cut---
// Both calls to 'swim' and 'fly' are now okay.
let pet = getSmallPet()

// **Fish or Bird**
if (isFish(pet)) {
  pet.swim(); // Fish
} else {
  pet.fly(); // Bird
}

We can figure out which type of pet is by in operator.

Keep in mind that these three JavaScript operators:

• typeof is used for primitive values
• instanceof is used for instances of classes constructed with new keyword
• in is used for objects with specific properties

[DanKim0213]

Typescript Exercises

1. Objects

2. Union types

3. Narrowing

4. Utility types

5. Function overloads

6. Generics

Questions

Q. Why is Type Guard needed instead of intanceof?

Q. Is type Indexing possible with interfaces?

Q. which one between Type and Interface should I use since they are interchangeable?

You should consider consistency and augmentation. - Effective Typescript, item 13

If you are working in a codebase that consistently uses interface, stick with interface. The same goes for Type.

Else:

• Publishing type declarations for an API? interface.
• Using internally in your project? Type since declaration merging, which is only available in interface, is likely to be a mistake.

Q. (s: string | null) => void vs (s?: string) => void

A. Same