[타입스크립트] 매핑 타입

Moon·2023년 7월 28일
0
post-thumbnail

매핑 타입은 기존의 타입을 기반으로 새로운 타입을 생성한다. 이는 모든 프로퍼티를 옵셔널로 만들거나, 모든 프로퍼티를 읽기 전용으로 만드는 것과 같은 기능을 할 수 있다.

기본 매핑 타입

TypeScript는 기본적으로 Partial<T>, Required<T>, Readonly<T> 등의 기본 매핑 타입을 제공한다. 이들은 타입 T의 모든 프로퍼티를 각각 선택적 프로퍼티, 필수 프로퍼티, 읽기 전용 프로퍼티로 만든다.

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

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

이제 Partial<T> 매핑 타입을 사용하면 Person의 모든 프로퍼티를 옵셔널로 만들 수 있다.

type PartialPerson = Partial<Person>;

이렇게 되면 PartialPerson 타입은 { name?: string; age?: number; }와 동일한 타입을 가지게 된다.

사용자 정의 매핑 타입

사용자가 직접 매핑 타입을 정의할 수도 있다. 기본적으로 매핑 타입은 in 키워드를 사용하며, 다음과 같이 정의된다.


type MyReadonly<T> = {
    readonly [Property in keyof T]: T[Property];
}

MyReadonly<T> 타입은 기본 제공되는 Readonly<T>와 동일한 기능을 한다. 즉, 타입 T의 모든 프로퍼티를 읽기 전용으로 만든다.

type ReadonlyPerson = MyReadonly<Person>;

// ReadonlyPerson은 다음과 같은 타입을 가진다.
// {
//     readonly name: string;
//     readonly age: number;
// }

이처럼 매핑 타입은 기존 타입을 기반으로 새로운 타입을 생성하는 강력한 도구다. 이를 통해 코드를 더 안전하고 유연하게 작성할 수 있다.

다른 예:

type OptionsFlags<T> ={
    [Property in keyof T]:boolean;
};

type Input={
value:string,
onChange:()=>void;
disabled:boolean
};

type InputOptions=OptionsFlags<Input>;
// InputOptions 다음과 같은 타입을 가진다.
// type InputOptions={
// value:boolean,
// onChange:boolean,
// disabled:boolean,
// }
profile
FE moon

0개의 댓글