💟 [2장] 맵드 타입이 뭘까?

const metaData: MetadataProps = {
	author: "규호",
	createdAt: 2024-03-24,
	chapter: 2,
	description: "맵드 타입이 뭘까?"
	}
	
const { chapter, description } = metaData;

🤔맵드 타입이란?

맵드 타입(Mapped Types)은 TypeScript의 강력한 기능 중 하나로, 기존 타입을 변환하여 새로운 타입을 만드는 데 사용됩니다. 이를 통해 기존 타입에서 속성을 하나씩 가져와 수정하거나 새로운 속성을 추가하여 타입을 유연하게 조작할 수 있습니다.

맵드 타입은 기존 타입의 각 속성을 순회하면서 변환하는 데 사용되는 키워드입니다. 다음은 가장 기본적인 형태의 맵드 타입입니다.

type MyMappedType = {
    [Property in OldType]: NewType;
};

여기서 OldType은 기존 타입을 나타내고, NewType은 해당 속성의 새로운 타입을 나타냅니다. Property은 기존 타입의 각 속성을 나타내며, 이를 통해 맵드 타입이 해당 속성을 순회하고 변환합니다.

예를 들어, 다음과 같이 인터페이스 Person이 있다고 가정해봅시다.

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

이제 맵드 타입을 사용하여 Person 인터페이스의 속성을 변경하여 새로운 타입을 만들 수 있습니다.

type ModifiedPerson = {
    [Property in keyof Person]: string;
};

위 코드에서 [Property in keyof Person] 부분은 Person 인터페이스의 각 속성을 순회하는 부분입니다. 그리고 string은 각 속성의 새로운 타입을 나타냅니다. 이렇게 하면 ModifiedPerson 타입은 Person 인터페이스와 동일한 속성을 가지지만, 모든 속성의 타입이 문자열로 변경됩니다.

🍀맵드 타입의 활용

• 선택적 속성을 가진 타입을 만들기
• 읽기 전용 속성을 추가하기

→ 맵드 타입은 TypeScript에서 타입을 유연하게 다루고 조작하는 강력한 도구로 활용됩니다.

1. 선택적 속성을 가진 타입을 만들기

맵드 타입을 사용하여 모든 속성을 선택적으로 만드는 예시 코드입니다.

type Partial<T> = {
    [K in keyof T]?: T[K]; // 기존 타입 T의 모든 속성을 선택적으로 만듦
};

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

type PartialUser = Partial<User>;

const partialUser: PartialUser = {}; // 모든 속성이 선택적으로 만들어진 User 타입
partialUser.name = 'John'; // 선택적으로 만들어진 속성이므로 사용 가능
partialUser.age = 30; // 선택적으로 만들어진 속성이므로 사용 가능

위 예시 코드에서는 Partial라는 맵드 타입을 정의하고 있습니다. 이 맵드 타입은 입력된 제네릭 타입 T의 모든 속성을 선택적으로 만드는 역할을 합니다. 이후 User라는 인터페이스를 정의하고, PartialUser라는 새로운 타입을 Partial를 통해 생성합니다. 이로써 PartialUser 타입은 User 타입의 모든 속성을 선택적으로 가지게 됩니다.

### 2. 읽기 전용 속성을 추가하기 맵드 타입을 사용하여 읽기 전용 속성을 추가하는 예시를 살펴보겠습니다. TypeScript에서는 readonly 키워드를 사용하여 속성을 읽기 전용으로 만들 수 있습니다. 맵드 타입을 사용하여 기존 타입의 모든 속성을 읽기 전용으로 만들어보겠습니다.

type Readonly<T> = {
    readonly [K in keyof T]: T[K]; // 기존 타입 T의 모든 속성을 읽기 전용으로 만듦
};

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

type ReadonlyUser = Readonly<User>;

const readonlyUser: ReadonlyUser = { name: 'John', age: 30 };

// 아래 코드는 에러를 발생시킵니다.
readonlyUser.name = 'Doe'; // 속성이 읽기 전용이므로 변경할 수 없음
readonlyUser.age = 31; // 속성이 읽기 전용이므로 변경할 수 없음

위 코드에서는 Readonly라는 맵드 타입을 정의하고 있습니다. 이 맵드 타입은 입력된 제네릭 타입 T의 모든 속성을 읽기 전용으로 만드는 역할을 합니다. 그리고 User라는 인터페이스를 정의하고, ReadonlyUser라는 새로운 타입을 Readonly를 통해 생성합니다. 이렇게 생성된 ReadonlyUser 타입은 User 타입의 모든 속성을 읽기 전용으로 가지게 됩니다.

이후에 readonlyUser 객체를 생성하고, 이 객체의 속성을 변경하려고 시도하는 코드를 작성하였습니다. 하지만 속성이 읽기 전용으로 만들어졌기 때문에 해당 속성을 변경할 수 없으며, 컴파일러가 이를 감지하여 에러를 발생시킵니다.