TypeScript?

• 자바스크립트의 기능들을 제공하면서 그 위에 자체적인 레이어를 추가함
• 자바스크리트는 string, number, object등의 원시 타입을 가지지만, 일관되게 타입을 할당해주지는 않음
• 타입스크립트는 자바스크립트 코드 위에서 타입을 일관되게 할당해주는 역할을 함

타입 추론

let helloWorld = "Hello World"; //string

• 타입스크립트는 대부분의 경우 타입을 적지 않아도 추론을 해줌

타입 정의하기

• 타입스크립트가 타입을 추론하기 힘든 경우, 타입을 직접 지정하는 경우도 있음
• 타입스크립트에서는 자바스크립트에서 사용 가능한 타입 이외에 unknown, never, void 타입을 지원함

interface User {
  name: string;
  id: number;
}
  
const user: User = {
  name: "Hayes",
  id: 0,
};

class UserAccount {
  name: string;
  id: number;
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
const user: User = new UserAccount("Murphy", 1);

타입 구성

• 여러 타입중 하나를 가질 수 있는 경우 유니언(union)을 사용

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

• 타입 검사가 필요한 경우 typeof 또는 Array.isArray() 사용

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
  } else {
    return obj;
  }
}

제네릭

• 타입에 변수를 제공하는 방법
• 배열의 내용물의 타입을 지정하거나, 고유 타입을 선언할 때 사용

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

interface Backpack<T> {
  add: (obj: T) => void;
  get: () => T;
}

declare const backpack: Backpack<string>;
const object = backpack.get(); //object -> string
backpack.add(23); //type warning

구조적 타입 시스템

• 타입스크립트에서 타입 검사를 할 때 값이 있는 형태에 집중하는데, 이를 구조적 타이핑이라고 부름
• 구조적 타입 시스템에서 같은 형태를 가지면 같은 것으로 간주됨

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

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// 타입을 지정하지 않아도 Point 타입과 형식이 일치하기 때문에 타입 검사 통과
const point = { x: 12, y: 26 };
printPoint(point);

//하위집합인 x, y만 지정되어 있으면 ok
const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints "12, 26"

const rect = { x: 33, y: 3, width: 30, height: 80 };
printPoint(rect); // prints "33, 3"

//error
const color = { hex: "#187ABF" };
printPoint(color);

// 객체와 클래스 간에 형태를 따르는 방법에는 차이가 없음
class VirtualPoint {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

const newVPoint = new VirtualPoint(13, 56);
printPoint(newVPoint); // prints "13, 56"

출처:
https://www.typescriptlang.org/ko/docs/handbook/typescript-in-5-minutes.html