TypeScript 레코드 유형의 작동 방식

TypeScript 레코드는 더 복잡한 유형의 데이터를 구현하려고 할 때 일관성을 보장하는 좋은 방법입니다. 키 값을 적용하고 값에 대한 사용자 지정 인터페이스를 만들 수 있습니다.

혼란스럽게 들리겠지만 실제로 어떻게 작동하는지 살펴보겠습니다.

유틸리티 유형

레코드는 유틸리티 유형입니다. 즉, 특정 문제를 해결하기 위해 TypeScript에서 특별히 정의한 유형입니다.

Typescript 레코드 유형의 작동 방식

다음과 같은 데이터 세트가 있다고 가정합니다.

const myData = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
}

데이터 세트에는 문자열 유형인 키에 대한 ID가 있습니다. 모든 값은 형식이 동일합니다. 즉, firstName과 lastName이 있습니다.

이 데이터 구조에서 레코드는 사용하기에 가장 적합한 유틸리티 유형입니다. 다음과 같이 데이터 구조 유형을 정의할 수 있습니다.

type User = {
    firstName: string,
    lastName: string
}

const myData:Record<string, User> = {
    "123-123-123" : { firstName: "John", lastName: "Doe" },
    "124-124-124" : { firstName: "Sarah", lastName: "Doe" },
    "125-125-125" : { firstName: "Jane", lastName: "Smith" }
}

레코드는 Record<K, T> 형식을 취합니다. 여기서 K는 키의 유형이고 T는 값의 유형입니다.

위에서 우리는 값에 대해 새로운 유형의 User를 정의하고 키를 문자열 유형으로 설정했습니다.

레코드 유형 및 조합 유형

경우에 따라 미리 정의된 가능한 키 집합이 있는 객체를 가질 수 있습니다. 이는 API에서 호출할 때 특히 그렇습니다. 예를 들어:

const myData = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
}

위의 데이터 세트에서 키는 영국, 프랑스 또는 인도의 세 가지 값만 될 수 있다고 가정해 보겠습니다. 이 경우 사용자에 대한 유형과 키에 대한 통합 유형을 정의할 수 있습니다.

type User = {
    firstName: string,
    lastName: string
}
type Country = "uk" | "france" | "india";

const myData:Record<Country, User> = {
    "uk" : { firstName: "John", lastName: "Doe" },
    "france" : { firstName: "Sarah", lastName: "Doe" },
    "india" : { firstName: "Jane", lastName: "Smith" }
}

이 방법을 사용하면 값이 준수해야 하는 유형과 함께 키가 허용되는 값에 대한 엄격한 규칙을 적용할 수 있습니다.