TypeScript에서 속성 값 유형의 조합을 반환하기 위해 Keyof와 유사한 사용자 정의 값 생성

1. TypeScript에서 valueof를 사용하여 속성 값 유형의 합집합 반환
2. TypeScript에서 keyof 및 typeof를 사용하여 속성 값 유형의 합집합 반환
3. TypeScript의 개별 키를 사용하여 속성 값 유형 가져오기
4. TypeScript에서 제네릭을 사용하여 컴파일 시 키-값 확인

이 튜토리얼에서는 속성이나 객체를 구성하는 유형을 반환하는 데 사용할 수 있는 다양한 방법을 배웁니다.

이 기능을 실현하는 데 사용할 수 있는 세 가지 방법이 있습니다. 방법 중 하나는 속성의 모든 공용체 유형을 반환하는 valueof라는 사용자 정의 유형을 생성하기 위해 제네릭을 활용합니다.

두 번째 방법은 keyof 및 typeof 유형을 사용하여 속성의 모든 공용체 유형을 반환합니다. 세 번째 방법은 개별 키를 사용하여 필요에 따라 단일 유형을 반환합니다.

또한 제네릭 및 인덱싱된 액세스 유형을 활용하여 동일한 유형이 아닌 경우 컴파일 시간에 키-값 항목을 제한하는 방법을 배웁니다.

TypeScript에서 valueof를 사용하여 속성 값 유형의 합집합 반환

Visual Studio 코드로 이동하여 typescript-types라는 폴더를 만들거나 원하는 이름을 사용합니다. 폴더 아래에 value-types-using-valueof.ts라는 파일을 만듭니다.

value-types-using-valueof.ts 파일에 다음 코드를 복사하여 붙여넣습니다.

type ValueOf<T> = T[keyof T];

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type ValueOfCustomer = ValueOf<Customer>

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

function logDetails(customerInfo: ValueOfCustomer){
   console.log(customerInfo)
}

logDetails(customer.firstName)
logDetails(customer.lastName)
logDetails(customer.doB)
logDetails(500)// Error - The union does not include type number

먼저 제네릭 유형 ValueOf<T>를 정의하고 T[keyof T]에 할당합니다. T는 속성이든 개체이든 모든 유형이 ValueOf에 전달될 수 있음을 의미합니다.

keyof는 전달된 유형에 속하는 모든 키 유형의 합집합을 반환합니다.

firstName, lastName 및 doB 속성을 포함하는 Customer 개체를 만들었습니다. 처음 두 속성은 문자열 형식이고 마지막 속성은 날짜 형식입니다.

다음으로 Customer를 ValueOf<Customer> 일반 유형에 전달하여 ValueOfCustomer라는 유형을 생성했습니다. ValueOfCustomer는 Customer 개체의 모든 주요 시간의 조합으로 구성된 새로운 유형입니다.

이는 ValueOfCustomer가 문자열 및 날짜 유형의 값만 허용할 수 있음을 의미합니다.

확인을 위해 ValueOfCustomer 유형의 매개변수를 허용하고 Customer의 firstName, lastName 및 doB를 기록하는 데 사용하는 logDetails()라는 메서드를 만들었습니다.

메서드의 숫자와 같이 문자열이나 날짜 유형이 아닌 값을 전달하려고 하면 메서드 인수가 문자열이나 숫자만 받아들이기 때문에 오류가 발생합니다.

TypeScript에서 keyof 및 typeof를 사용하여 속성 값 유형의 합집합 반환

같은 폴더에 value-types-using-keyof-and-typeof.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

const customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
} as const

type customertypes = typeof customer[keyof Customer]

function getCustomerInfo(theCustomerTypes: customertypes){
    console.log(theCustomerTypes)
}

getCustomerInfo(customer.firstName)
getCustomerInfo(customer.lastName)
getCustomerInfo(customer.doB)
getCustomerInfo(234)//Error - The union does not include type number

위의 코드에서 firstName, lastName 및 doB 속성을 포함하는 Customer 유형을 정의했습니다. 처음 두 속성은 문자열 형식이고 마지막 속성은 날짜 형식입니다.

Customer 개체는 개체의 각 속성에 대한 구체적인 값으로 초기화됩니다. customertypes라는 유형이 생성되어 typeof customer[keyof customer]에 할당되었습니다.

마지막 예에서 keyof는 모든 키 유형의 합집합을 반환한다고 언급했습니다. 그리고 이것은 동일한 작업을 수행하기 위해 Customer 개체에 적용되었습니다.

typeof는 코드에 표시된 대로 keyof의 도움으로 실현되는 Customer 개체에서 얻은 모든 유형을 반환합니다.

이를 확인하기 위해 customertypes 유형의 매개변수를 수락하고 Customer 개체의 값을 기록하는 데 사용하는 getCustomerInfo()라는 메서드를 만들었습니다.

문자열 또는 숫자와 같은 날짜 유형이 아닌 값을 전달하려고 하면 메서드에서 새 유형에 유형 번호가 포함되어 있지 않기 때문에 오류가 발생합니다.

TypeScript의 개별 키를 사용하여 속성 값 유형 가져오기

위의 두 가지 예에서 모든 값 유형의 합집합을 검색하는 방법을 다루었지만 경우에 따라 한 가지 유형의 개체에만 관심이 있을 수 있습니다.

이 예에서는 개별 키를 사용하여 개체의 단일 값 유형을 검색하는 방법을 배웁니다.

같은 폴더 아래에 individual-keys.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

type Customer = {
    firstName: string,
    lastName: string,
    doB: Date,
}

type date = Customer['doB']

function getDateOfBirth(doB: date): Date{
    return doB;
}

let customer: Customer  ={
    firstName: 'john',
    lastName: 'doe',
    doB: new Date(2022,12,6),
}

getDateOfBirth(customer.doB)
getDateOfBirth(123)//Error - Method accepts a single parameter of type date

이 예에서는 이전 예에서와 동일한 고객 정의를 재사용했습니다. 날짜 유형은 Customer['doB']를 사용하여 고객 정의에서 doB 키를 참조하여 생성되었습니다.

이것은 새로운 date 유형이 Date 유형임을 의미합니다. getDateOfBirth()는 date 유형의 단일 매개변수를 포함하며 코드에 표시된 대로 날짜 유형만 전달될 수 있는지 확인하는 데 사용되었습니다.

숫자와 같이 date 유형이 아닌 값을 전달하려고 하면 매개변수가 단일 유형으로 제한되기 때문에 오류가 발생합니다.

TypeScript에서 제네릭을 사용하여 컴파일 시 키-값 확인

이전 예에서 보았듯이 객체는 키와 값으로 구성됩니다. 때때로 우리는 키를 기반으로 객체의 값을 변경해야 하는 요구 사항에 직면할 수 있습니다.

이 튜토리얼에서는 전달한 값이 키와 동일한 유형인지 확인하기 위해 컴파일 시간에 확인하는 방법을 배웁니다.

같은 폴더 아래에 key-value-checking.ts라는 파일을 만듭니다. 다음 코드를 복사하여 파일에 붙여넣습니다.

type Shipment = {
    containerItems: string,
    containerSerial: string
    shipmentDate: Date
}

declare function updateShipment<K extends keyof Shipment>(key: K, value: Shipment[K]): void;

updateShipment('containerItems','flowers')
updateShipment('containerSerial','def456');
updateShipment('shipmentDate',new Date(2018,3,14))
updateShipment('shipmentDate',1337)// Error- Shipment object does not contain type number

위의 코드에서 containerItems, containerSerial 및 shipmentDate 매개변수를 포함하는 Shipment라는 개체를 정의했습니다.

처음 두 속성은 문자열 형식이고 마지막 속성은 날짜 형식입니다. updateShipment()라는 일반 메서드를 정의했습니다.

updateShipment() 메소드는 두 개의 매개변수를 허용합니다. 여기서 하나는 키이고 두 번째는 Shipment 객체에 대한 값입니다.

키는 모든 유형의 Shipment 개체 키여야 하며 꺾쇠 괄호 매개변수에서 <K extends keyof Shipment>를 사용하여 확인합니다.

K 키가 있으므로 Shipment[K]를 사용하여 Shipment 개체에 대한 키를 인덱싱하여 이 키로 전달되는 값을 제한할 수 있습니다. 이 정의에서 키에 대해 입력하는 모든 값은 키와 동일한 유형이어야 합니다.

숫자와 같이 Shipment 개체에 정의되지 않은 값을 전달하려고 하면 컴파일러에서 문제에 플래그를 지정합니다.