개발/TypeScript

[TypeScript] TypeScript의 고급 타입

xuwon 2024. 12. 10. 18:06

TypeScript는 기본 타입 외에도 복잡한 타입 관계와 구조를 표현할 수 있는 다양한 고급 타입 기능을 제공한다.

 

교차 타입 (Intersection Type)

여러 타입을 결합하여 단일 타입으로 만드는 방법
(저번 블로그에도 작성했지만 한 번 더 씀)

- 이는 두 개 이상의 타입을 모두 만족해야 하는 타입을 의미.
-  &  연산자를 사용하여 정의.

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

type Employee = {
  employeeId: number;
};

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = { // name, age, employeeId 모두 포함
  name: "John",
  age: 30,
  employeeId: 1234,
};

 

조건부 타입 (Conditional Type)

조건에 따라 다른 타입을 반환하는 타입.
삼항 연산자와 비슷하게 작동함!

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

type A = IsString<string>; // "Yes"
type B = IsString<number>; // "No"

 

keyof 연산자

객체 타입의 키를 타입으로 반환함.
이를 통해 객체의 키에 기반한 타입 연산을 수행할 수 있다.

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

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

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  // obj와 key를 받아 해당 키에 해당하는 값 반환
  return obj[key];
}

const person: Person = { name: "Alice", age: 25 };
const name = getProperty(person, "name"); // string

 

매핑 타입 (Mapped Type)

매핑 타입은 기존 타입의 모든 속성들을 다른 형태로 변환하는 타입.
 in  연산자를 사용하여 정의.

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
  // T 타입의 모든 속성을 읽기 전용으로 변환
  // T 타입의 모든 키 P를 순회하며, 읽기 전용으로 만듦.
};

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

type ReadOnlyPerson = ReadOnly<Person>; // Person 타입의 모든 속성을 읽기 전용으로 변환

const person: ReadOnlyPerson = {
  name: "Alice",
  age: 25,
};

// person.name = "Bob"; // 오류: 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.