Intrinsic Type Manipulation이 TypeScript에서 작동하는 방식
string
유형을 대문자, 소문자 또는 대문자 버전으로 쉽게 변환할 수 있습니다. 이것은 언제 유용할 수 있습니까? 예를 들어 keyof 과 같은 것을 사용하는 개체의 문자열 집합이 있을 때와 같이 고정된 문자열 값 집합이 있는 많은 상황에서.유형 조작자 중 하나와 함께 새 유형을 정의하여 문자열을 다른 버전으로 변환합니다. 예를 들어 아래에서
myType
를 대문자 버전으로 변환합니다.type myType = "hi there"
type capitalizedMyType = Capitalize<myType>
let myVar:capitalizedMyType = "Hi there";
위의 예에서
hi there
는 오류를 발생시킵니다. Hi there
만 Capitalize
유형과 함께 작동합니다. 마찬가지로 Uncapitalize
를 사용하여 문자열을 대문자로 바꿀 수 있습니다.type myType = "HI THERE"
type uncapitalizedMyType = Uncapitalize<myType>
let myVar:uncapitalizedMyType = "hI THERE";
위의 경우
hI THERE
만 작동합니다. 다른 경우에는 확인에 실패합니다.대문자 및 소문자 고유 유형 조작
Capitalize
와 함께 Uppercase
및 Lowercase
도 있습니다. 둘 다 당신이 생각하는 대로 정확하게 수행합니다. 하나는 모든 문자를 대문자로, 다른 하나는 소문자로 변경합니다.type myType = "this long sentence"
type bigMyType = Uppercase<myType>
let myVar:bigMyType = "THIS LONG SENTENCE"
소문자 내장 유형 조작
위에서 우리는
myType
의 대문자 버전인 유형을 만들었습니다. 다음은 동일한 예이지만 다른 방향입니다. 소문자 버전 만들기:type myType = "THIS LONG SENTENCE"
type smallMyType = Lowercase<myType>
let myVar:smallMyType = "this long sentence"
템플릿 리터럴과 함께 사용
이러한 유형은 template literals 으로 작업할 때 매우 유용합니다. 여기서 문자열 리터럴이 소문자 버전을 사용하도록 강제할 수 있습니다(예: ID용). 다음은 일련의 문자열이 있고
versionId
유형의 일부로 ID에 소문자 버전만 사용하려는 버전입니다.type versions = "DEV" | "PROD" | "STAGING"
type versionPrefix = "gold-" | "beta-" | "alpha-"
type versionId = `${versionPrefix}${Lowercase<versions>}`
let currentVersion:versionId = "gold-dev"
위에서 두 세트의 공용체 유형이 있고 이를 하나로 결합합니다
versionId
. 여기서는 소문자만 허용하지만 version
는 대문자입니다. Lowercase
로 변환할 수 있으므로 gold-dev
가 유효합니다.keyof 객체와 함께 사용
비슷한 방식으로 API 또는 다른 곳에서 대소문자가 홀수이거나 고르지 않은 개체를 받을 수 있습니다. 이를 정규화하기 위해 내장 유형 조작을 사용할 수 있습니다. 아래에서는
keyof
를 사용하여 myObject
의 모든 키를 가져오고 모두 소문자로 만듭니다.type myObject = {
firstName: string,
Age: number,
Lastname: string
}
type keys = Lowercase<keyof myObject>
let getObjectKey:keys = "firstname"
keys
에는 다음과 같은 유효한 값만 있습니다. firstname | age | lastname
. 이 예에서 이와 같은 내장 문자열 조작을 사용하면 마음대로 사용할 수 있는 데이터에 문제가 있을 때 깨끗한 유형을 만드는 쉬운 방법이 될 수 있습니다.
Reference
이 문제에 관하여(Intrinsic Type Manipulation이 TypeScript에서 작동하는 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/smpnjn/how-intrinsic-type-manipulations-work-in-typescript-869텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)