TypeScript 개체에서 인덱싱된 멤버에 대한 유형 적용

Shuvayan Ghosh Dastidar 2023년1월30일
  1. 매핑된 유형을 사용하여 TypeScript 개체의 인덱싱된 멤버에 대한 유형 적용
  2. TypeScript 개체에서 인덱싱된 멤버에 대한 형식을 적용하려면 매핑된 형식이 있는 제네릭 형식 사용
  3. Record 유형을 사용하여 TypeScript 개체의 인덱싱된 멤버에 대한 유형 적용
TypeScript 개체에서 인덱싱된 멤버에 대한 유형 적용

TypeScript는 강력한 형식의 언어이며 이 언어의 일부로 사용되는 모든 구문은 강력한 형식입니다. 기본 유형과 사용자 정의 유형이 결합된 인터페이스 또는 유형과 같은 구성이 있습니다.

TypeScript의 매핑된 유형 범주에 속하는 맵 또는 인덱스 유형과 같은 복잡한 유형을 가질 수도 있습니다. 이 튜토리얼은 매핑된 유형이 TypeScript에서 사용되는 방법을 보여줍니다.

매핑된 유형을 사용하여 TypeScript 개체의 인덱싱된 멤버에 대한 유형 적용

매핑된 유형은 TypeScript의 개체에 있는 키와 값에 대한 고정 유형이 있는 고정 스키마가 있는 개체를 나타낼 수 있습니다. 인덱스 서명 구문을 기반으로 합니다.

type NumberMapType = {
    [key : string] : number;
}

// then can be used as
const NumberMap : NumberMapType = {
    'one' : 1,
    'two' : 2,
    'three' : 3
}

객체의 키 유형을 고정하는 것 외에도 매핑된 유형을 사용하여 인덱스 서명을 사용하여 객체의 모든 키 유형을 변경할 수 있습니다.

interface Post {
    title : string;
    likes : number;
    content : string;
}

type PostAvailable = {
    [K in keyof Post] : boolean;
}

const postCondition : PostAvailable = {
    title : true,
    likes : true,
    content : false
}

다음은 Post 인터페이스의 키를 사용하여 다른 유형인 Boolean에 매핑합니다.

TypeScript 개체에서 인덱싱된 멤버에 대한 형식을 적용하려면 매핑된 형식이 있는 제네릭 형식 사용

매핑된 형식은 일반 형식 개체를 만드는 데 사용할 수도 있습니다. 제네릭 유형을 사용하여 동적 유형이 있는 유형을 생성할 수 있습니다.

enum Colors {
    Red,
    Yellow,
    Black
}

type x = keyof typeof Colors;

type ColorMap<T> = {
    [K in keyof typeof Colors] : T;
}

const action : ColorMap<string> = {
    Black : 'Stop',
    Red : 'Danger',
    Yellow : 'Continue'
}

const ColorCode : ColorMap<Number> = {
    Black : 0,
    Red : 1,
    Yellow : 2
}

위의 예에서 열거형 Colors는 매핑된 유형 개체에 사용되었으며 ColorMap<T>에서 지원하는 제네릭 유형에 따라 다른 유형이 적용되었습니다.

Record 유형을 사용하여 TypeScript 개체의 인덱싱된 멤버에 대한 유형 적용

Record 유형은 TypeScript의 기본 제공 유형이며 TypeScript의 개체에 유형을 적용하는 데 사용할 수 있습니다. Record 유형은 키 유형과 개체 값의 두 가지 필드를 허용합니다.

다른 프로그래밍 언어에서 볼 수 있는 맵으로 볼 수 있습니다.

const LogInfo : Record<string, string> = {
    'debug' : 'Debug message',
    'info' : 'Info message',
    'warn' : 'Warning message',
    'fatal' : 'Fatal error'
}

const message = LogInfo['debug'] + " : Hello world";
console.log(message);

출력:

Debug message : Hello world
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

관련 문장 - TypeScript Map