[TypeScript] 타입별칭 활용

1. 기본적인 타입 별칭

type ID = string | number;

let id: ID = "a"; // ✅ OK
id = 10;          // ✅ OK

ID는 문자열 또는 숫자 타입을 나타냄. 이를 통해 id 변수는 두 가지 타입을 모두 사용 가능

2. 객체 타입 별칭

객체 구조를 타입별칭으로 정의하여 재사용 가능

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

const user: User = {
  name: "Alice",
  age: 30,
};

3. 함수 타입 별칭

함수의 매개변수와 반환 타입 지정 시 유용

type SumFunc = (n1: number, n2: number) => number;

// 함수 표현식
const sum: SumFunc = function (n1, n2) {
  return n1 + n2;
};

// 화살표 함수
const sum2: SumFunc = (n1, n2) => n1 + n2;

4. readonly와 불변성

readonly 키워드로 객체 속성을 읽기 전용으로 만들거나 배열을 상수로 변경 가능. 이를 통해 불변성 유지

객체 읽기 전용

type ReadonlyUser = {
  readonly id: number;
  name?: string; // ✅ ?옵셔널 연산자를 붙이면 string | undefined와 동일
  age: number;
};

const user: ReadonlyUser = { id: 1, name: "Alice", age: 30 };
// user.id = 2; // ❌ 오류: 'id' 속성은 읽기 전용이라 다른 값 할당 불가

배열 읽기 전용

type ReadonlyArray = readonly number[];
const arr: ReadonlyArray = [1, 2, 3];
// arr[0] = 10; // ❌ 오류: 상수로 변경되어 다른 값 할당 불가능

5. 제네릭 타입 별칭

제네릭 사용으로 코드 재사용성 향상

제네릭 타입 별칭 사용 시 관용적 지정 방법으로 대문자 활용:

• T: Type (일반적 타입)
• K: Key (키 타입)
• V: Value (값 타입)
• E: Element (요소 타입)

예시:

type Container<T> = { value: T };
type Dictionary<K extends string, V> = { [key in K]: V };
type List<E> = E[];

// option이 다양할 때
// 가독성이 좋지 않은 방식
type Car = {
  name: string;
  color: string;
  option: null | string | { giftcard: boolean };
};

// 👍 개선된 방식
type Car<T> = {
  name: string;
  color: string;
  option: T;
};

const car: Car<null> = {
  name: "Benz",
  color: "black",
  option: null,
};

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

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

6. 인덱스 시그니처

키와 값이 동일한 타입일 때 객체의 키와 값을 동적으로 정의 가능

type UserMap = {
  [key: string]: string;
};

let users: UserMap = {
  name: "John",
  address: "Seoul",
};

// 다른 타입 추가 시 유니온 사용
type UserMap = {
  [key: string]: string | number
};

💡 인덱스 시그니처는 자동완성 미지원. 자동완성 필요 시 고정 속성 추가

type UserMap = {
  name: string; // 고정 속성
  [key: string]: string;
};

7. 튜플 타입

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

8. 인터섹션 타입

인터섹션 타입은 '&' 기호로 여러 타입을 결합해 새로운 타입 생성

type Nameable = { name: string };
type Ageable = { age: number };

type Person = Nameable & Ageable;

const person: Person = { name: "Alice", age: 30 };

9. 리터럴 타입

특정 값들만 허용하도록 제한

type Direction = "LEFT" | "RIGHT" | "UP" | "DOWN";

const direction: Direction = "LEFT"; // ✅ OK
// const direction: Direction = "FORWARD"; // ❌ 오류

활용

type ButtonSize = "small" | "medium" | "large";

interface Button {
  size: ButtonSize;
  label: string;
}

const myButton: Button = {
  size: "medium", // ✅ OK
  label<: "Click Me",
};

// myButton.size = "extra-large"; // ❌ 오류

10. 조건부 타입

조건부 타입은 타입 시스템 내에서 조건문 사용 가능. 기본 문법:

type ConditionalType<T> = T extends U ? X : Y;

• T: 검사할 타입
• U: T가 확장하는지 확인할 타입
• X: 조건이 참일 때의 결과 타입
• Y: 조건이 거짓일 때의 결과 타입

type IsString<T> = T extends string ? "yes" : "no";

const result1: IsString<string> = "yes";
const result2: IsString<number> = "no";

11. 키 선택 타입

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

type UserKeys = keyof User; // "name" | "age" | "address"
const key: UserKeys = "address";

출처: 수코딩