매번 TypeScript를 사용하면서 정작 TypeScript 공식 문서에 있는 handbook을 봐 본적이 없었다. 기존에 알고 있던 TypeScript 기초 외에 헷갈렸거나 새롭게 안 지식에 대해 블로그에 하나씩 정리해 나가보려 한다!
https://www.typescriptlang.org/docs/handbook/intro.html

배열

[1, 2, 3]과 같은 배열의 타입을 지정할 때 number[] 구문을 사용할 수 있다. 이 구문은 string[]처럼 모든 타입에서 사용할 수 있다.
Array<number> 형태로도 적을 수 있으며, 동일한 의미를 갖는다.

유니언 타입

TypeScript에서 유니언을 다룰 때는 해당 유니언 타입의 모든 멤버에 대해 유효한 작업일 때에만 허용된다. 예를 들어 string | number라는 유니언 타입의 경우 string 타입에만 유효한 메서드는 사용할 수 없다.
이를 해결하려면 코드상에서 유니언을 좁혀야 한다.

해결방법 1

function printId(id: number | string) {
  if (typeof id === "string") {
    // 여기서 id는 'string' 타입을 가진다.
  } else {
    // 여기서 id는 'number' 타입을 가진다.
  }
}

해결방법 2

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // 여기서 'x'는 'string[]' 타입을 가진다.
  } else {
    // 여기서 'x'는 'string' 타입을 가진다.
  }
}

인터페이스와 타입 별칭

인터페이스와 타입 별칭은 매우 유사하며, 대부분의 경우 둘 중 하나를 자유롭게 선택하여 사용할 수 있다. interface가 가지는 대부분의 기능은 type에서도 동일하게 사용 가능하다. 이 둘의 가장 핵심적인 차이는 타입은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점이다.

인터페이스

인터페이스 확장하기

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear = getBear()
bear.name
bear.honey

기존의 인터페이스에 새 필드 추가하기

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

타입

교집합을 활용한 타입 확장하기

type Animal = {
  name: string;
}

type Bear = Animal & {
  honey: Boolean;
}

const bear = getBear();
bear.name;
bear.honey;

기존 타입에 새 필드 추가하기 - 타입은 생성 후 달라질 수 없다.

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

// Error: Duplicate identifier

null 아님 단언 연산자

TypeScript에서는 명시적인 검사를 하지 않고도 타입에서 null과 undefined를 제거할 수 있는 특별한 구문을 제공한다.
표현식 뒤에 !를 작성하면 해당 값이 null 또는 undefined가 아니라고 타입을 단언하는 것이다.

function liveDangerously(x?: number | undefined) {
  console.log(x!.toFixed());
}

다른 타입 단언과 마찬가지로 이 구문은 코드의 런타임 동작을 변화시키지 않으므로, ! 연산자는 반드시 해당 값이 null 또는 undefined가 아닌 경우에만 사용해야 한다.