Typescript로 매핑된 유형

매핑된 유형은 Typescript로 수행할 수 있는 유형 조작 중 하나입니다. 다른 유형에서 유형을 파생시키고 싶지만 새 유형의 속성이 약간의 조작을 거치도록 할 때 유용합니다.

핵심 개념은 Javascript의 Array.map() 메서드와 매우 유사합니다. 새 배열을 반복하는 대신 기존 배열에서 새 배열을 파생시키려는 경우 Array.map() 메서드를 사용하고 이전 배열을 반복하여 유사하거나 다른 배열을 생성할 수 있습니다.

이것이 기본적으로 매핑된 유형으로 수행하려는 작업입니다.

매핑된 유형이란?

매핑된 유형은 PropertyKey s( [keyof](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html) 를 통해 자주 생성됨)의 조합을 사용하여 키를 반복하여 유형을 생성하는 일반 유형입니다.

속성으로 함수가 있는 유형이 있고 동일한 속성을 가진 새 유형을 생성하려고 하지만 부울로 다음과 같이 할 수 있다고 가정해 보겠습니다.

type MappedToBoolean <Type> = {
    [Property in keyof Type]: boolean
}

type Animal = {
    fly: () => void;
    run: () => void;
    swim: () => void
}

type NewAnimal = MappedToBoolean<Animal>

const dog: NewAnimal =  {
    fly: false,
    run: true,
    swim: true
}

아래에서 이렇게 하면 유형 오류가 발생합니다.

const dog: NewAnimal =  {
    fly: () => undefined, // '() => undefined' is not assignable to type 'boolean'
    run: true,
    swim: true
}

매핑 수정자란?

매핑 중에 적용할 수 있는 두 가지 추가 수정자가 있습니다: readonly 및 ? 각각 가변성과 선택성에 영향을 미칩니다.
- (추가) 또는 + (삭제) 접두사를 붙여 이러한 수식어를 제거하거나 추가할 수 있습니다.

예를 들어 유형을 통해 매핑하고 모든 속성을 선택 사항으로 만들려면 다음과 같이 + 한정자를 추가하면 됩니다.

type MappedToBoolean <Type> = {
    [Property in keyof Type]+?: Type[Property]
}

as 키워드를 사용한 매핑

다음과 같이 키 유형을 다른 유형으로 다시 매핑할 수 있습니다.

type MappedTypeWithNewProperties<Type> = {
    [Properties in keyof Type as NewKeyType]: Type[Properties]
}

사용 사례

다양한 형식을 조작하는 방법을 알면 모듈식 또는 확장 가능한 형식을 효율적으로 만들고 관리할 수 있습니다.

이것을 사용한 간단한 시나리오는 객체의 하위 유형을 취하고 객체 배열을 검색하여 슈퍼 객체가 존재하는지 확인할 수 있는 함수가 필요할 때였습니다.

개체의 하위 유형은 말 그대로 모든 속성이 선택적일 수 있는 유형이므로 모든 속성이 선택적인 기존 유형의 새 유형을 만들었습니다.

type MakePropertiesOptional<Type> = {
    [Property in keyof Type]+?: Type[Property]
}

type Person = {
    name: string;
    age: number;
    school: string;
    state: string;
    number: string;
    country: string
}

function searchArrayOfPersons(person: MakePropertiesOptional<Person>) {
    // .. some more codes
    return undefined
}

searchArrayOfPersons({name: "Kayode"})

searchArrayOfPersons({address: "some address"})
// Type Error: '{ address: string}': is not assignable to parameter
// of 'MakePropertiesOptional<Person>`

이 글을 재미있게 읽으셨다면 buying me a coffee 으로 제 취미를 지원해 주세요.