[TypeScript] TypeScript 타입 조합에 대해 알아보자

1. 교차 타입 (Intersection Types)

교차 타입은 여러 타입을 결합하여 하나의 새로운 타입으로 만드는 기능입니다. 이 타입은 각 타입의 모든 멤버를 포함하므로, 여러 타입의 특징을 모두 만족해야 합니다. 이를 활용하면 기존 타입을 확장하거나 새로운 기능을 추가하는 데 유용합니다. & 연산자를 사용합니다.

type ProductItem = {
  id: number;
  name: string;
  price: number;
};

type Discount = {
  discountAmount: number;
};

type ProductItemWithDiscount = ProductItem & Discount;

const discountedProduct: ProductItemWithDiscount = {
  id: 1,
  name: "Laptop",
  price: 1000,
  discountAmount: 100,
};

 

2. 유니온 타입 (Union Types)

유니온 타입은 특정 변수나 객체가 여러 타입 중 하나를 가질 수 있도록 정의합니다. | 연산자를 사용하며, 주로 타입 제한 및 타입 체크에서 사용됩니다.

type PaymentMethod = "credit" | "paypal" | "cash";

type OrderStatus = "pending" | "completed" | "canceled";

function processOrder(status: OrderStatus, method: PaymentMethod) {
  if (status === "completed") {
    console.log(`Order is completed. Paid with ${method}.`);
  } else {
    console.log(`Order is ${status}.`);
  }
}

processOrder("completed", "credit");

 

3. 인덱스 시그니처 (Index Signatures)

인덱스 시그니처는 특정 타입의 속성 이름은 알 수 없지만 속성값의 타입을 알고 있을 때 사용하는 문법입니다. 
인터페이스 내부에 [Key : K] : T 꼴로 타입을 명시해주면 되는데 이는 해당 타입의 속성 키는 모두 K 타입이어야 하고 속성값은 모두 T 타입을 가져아 한다는 의미입니다. 

interface IndexSignatureExample {
  [key: string]: number; // 모든 속성의 값은 number 타입이어야 함
}

const scores: IndexSignatureExample = {
  math: 95,
  science: 88,
  history: 90,
};

scores["english"] = 85; // 동적으로 속성 추가 가능

 

4. 인덱스드 엑세스 타입 (Indexed Access Types)

인덱스드 엑세스 타입은 특정 타입의 속성 타입을 조회하는 데 사용됩니다. 이를 통해 특정 타입에서 원하는 속성의 타입을 쉽게 참조할 수 있습니다.

주로 배열의 요소 타입을 조회하기 위해 인덱스드 엑세스 타입을 사용하는 경우가 있습니다. 배열 타입의 모든 요소는 전부 동일한 타입을 가지며 배열의 인덱스는 숫자 타입이기 때문에 number로 인덱싱하여 배열 요소를 얻은 다음에 typeof 연산자를 붙여주면 해당 배열 요소의 타입을 가져올 수 있습니다. 

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

type UserName = User["name"]; // string
type UserId = User["id"]; // number

function getUserName(user: User): UserName {
  return user.name;
}

const user: User = { id: 1, name: "Alice", age: 30 };
console.log(getUserName(user)); // "Alice"

 

type NumberArray = number[]; // 배열 타입 선언
type ElementType = NumberArray[number]; // 배열의 요소 타입 조회

// ElementType은 number 타입
const numbers: NumberArray = [1, 2, 3, 4];

function getFirstElement(arr: NumberArray): ElementType {
  return arr[0]; // 첫 번째 요소 반환
}

const firstNumber = getFirstElement(numbers);
console.log(typeof firstNumber); // "number"

 

5. 맵드 타입 (Mapped Types)

맵드 타입은 기존 타입을 변환하거나 확장할 때 유용합니다. 기존 타입의 각 속성을 반복적으로 변형하여 새로운 타입을 생성합니다.맵드 타입은 객체 타입의 속성 이름과 속성 값을 기반으로 변형된 타입을 생성할 수 있습니다. keyof와 같은 유틸리티 타입과 함께 자주 사용됩니다.

type Product = {
  id: number;
  name: string;
  price: number;
};

// 모든 속성을 읽기 전용으로 변환
type ReadonlyProduct = {
  readonly [Key in keyof Product]: Product[Key];
};

const readonlyProduct: ReadonlyProduct = {
  id: 1,
  name: "Phone",
  price: 500,
};

// readonlyProduct.price = 600; // 오류: 읽기 전용 속성입니다.

 

6. 템플릿 리터럴 타입 (Template Literal Types)

템플릿 리터럴 타입은 기존 문자열 타입을 기반으로 새로운 문자열 조합을 생성하는 기능입니다. 이 기능은 문자열을 동적으로 생성해야 하는 경우 유용합니다.

type Color = "red" | "green" | "blue";
type Shade = "light" | "dark";

type ColorShade = `${Shade}-${Color}`; // "light-red" | "light-green" | "light-blue" | ...

const theme: ColorShade = "dark-green"; // 올바른 타입

 

 

다음 포스트로는 제네릭 타입에 대해 작성하겠습니다 !!