[데브코스/TIL] DAY38 - TypeScript(3)

🥨 타입 별칭 (type alias)

1. 기본적인 타입 별칭

type ID = string | number;

2. 객체 타입 별칭

type User = {
  name: string;
  age: number;
};

3. 함수 타입 별칭

type SumFunc = (n1: number, n2: number) => number;
const sum: SumFunc = function sum(n1, n2) {
  return n1 + n2;
};

4. 제네릭 타입 별칭

• 제네릭은 여러 개 사용 가능
• 관용적으로 대문자 사용

type Car<T> = {
  name: string;
  color: string;
  option: T;
};

const car1: Car<string> = {
  name: "benz",
  color: "black",
  option: "key",
};

const car3: Car<{ giftcard: boolean }> = {
  name: "benz",
  color: "black",
  option: {
    giftcard: true,
  },
};

type Car2<T, U> = {
  name: string;
  color: string;
  option: T;
  other: U;
};

5. 튜플 타입 별칭

type Point = [number, number];
const point: Point = [10, 20];

6. 인터섹션 타입 별칭

type Nameable = {
  name?: string;
};

type Aageable = {
  age?: number;
};

type Person = Nameable &
	Aageable & {
      gender?: string;
	};
const person: Person = {};

7. 리터럴 타입 별칭

• 리터럴 타입에 설정되어 있는 값만 사용 가능하므로 자동 완성 기능 지원

type Direction = "LEFT" | "RIGHT" | "UP" | "DOWN";
const direction: Direction = "LEFT";

8. 조건부 타입 별칭

• T extends U ? X : Y

type IsString<T> = T extends string ? "Yes" : "No";

const test1: IsString<string> = "Yes";
const test2: IsString<number> = "No";

9. 키 선택 타입 별칭

type Person = {
  name: string;
  age: number;
  address: string;
};

type PersonKeys = keyof Person; // "name" | "age" | "address"

10. 인덱스 시그니처 타입 별칭

• 인덱스 시그니처 + 다른 속성 타입 지정할 수 있음

type UserMap = {
  age: number;
  [key: string]: string; // 인덱스 시그니처
};

let user: UserMap = {
  name: "John",
  gender: "male",
  age: 20
};

🍡 인터페이스 (interface)

• 타입은 툴팁으로 상세 정보 확인 가능한데, 인터페이스는 안된다ㅠ

1. 객체 타입 인터페이스

interface User {
  name: string;
  age: number;
}

2. 옵셔널

interface User {
  name: string;
  age?: number;
}

3. 읽기 전용

• 튜플이나 배열은 상수로
• 객체는 속성 상수로

interface User {
  readonly name: string;
  age: number;
}

4. 인덱스 시그니처

• 자동 완성 지원 X

interface User {
  [key: string]: string;
}

5. 함수 타입 인터페이스

• 거의 안 쓰지만 가능은 하다는 거 잊지 말기

interface SumFunc {
  (n1: number, n2: number): number;
}

const sum: SumFunc = function (n1, n2) {
  return n1 + n2;
};

6. 병합

• 똑같은 인터페이스를 여러번 선언하면 자동 병합
• 타입 별칭은 불가능
• 같은 속성, 다른 타입은? => 에러

7. 상속

• 인터페이스 확장 => interface Developer extends Person {}
• 다중 상속도 가능
• 타입 별칭도 인터섹션으로 비슷하게는 가능

8. 그외

단축 메서드 표현

interface Animal {
  name: string;
  sound(): void;
  bark: () => void;
  play?(): void; // 그래서 타입 가드 한 번 써줘야 함
}

제네릭 & 상속

interface Container<T> {
  value: T;
}

interface Box<T> extends Container<T> {
  label: string;
}

const box: Box<number> = {
  label: "grid box",
  value: 10,
};

📌 출처

수코딩(https://www.sucoding.kr)