이 문서는 Google Cloud Translation API를 사용해 자동 번역되었습니다.
어떤 문서는 원문을 읽는게 나을 수도 있습니다.
TypeScript의 유형 술어: 사용자 정의 유형 가드를 작성하는 방법
TypeScript는 개발자가 보다 강력하고 유지 관리 가능한 코드를 작성하는 데 도움이 되는 정적 타이핑 및 기타 기능을 제공하는 JavaScript의 상위 집합입니다. TypeScript의 가장 강력한 기능 중 하나는 유형 시스템으로, 이를 통해 개발자는 코드베이스에서 유형 안전성을 강화하는 데 사용할 수 있는 사용자 정의 유형 및 인터페이스를 정의할 수 있습니다.
TypeScript의 유형 시스템으로 작업하기 위한 주요 도구 중 하나는 유형 술어입니다. 유형 술어를 사용하면 개발자가 런타임에 변수 유형의 범위를 좁히는 데 사용할 수 있는 사용자 정의 유형 가드를 작성할 수 있습니다. 이 게시물에서는 유형 술어를 사용하여 TypeScript에서 사용자 정의 유형 가드를 작성하는 방법을 살펴보겠습니다.
TypeScript에서 유형 술어는 부울 값을 반환하는 함수이며 변수의 유형을 좁히는 데 사용됩니다. 유형 술어는 일반적으로 typeof
및 instanceof
연산자와 함께 사용되어 런타임 시 변수의 유형을 결정합니다.
예를 들어, unknown
유형의 인수를 받는 함수가 있고 그 인수가 문자열인지 여부를 확인하려고 한다고 가정해 보겠습니다. 다음과 같은 형식 조건자를 사용하여 사용자 지정 형식 가드를 작성할 수 있습니다.
function isString(value: unknown): value is string {
return typeof value === 'string';
}
이 예에서는 unknown
유형의 인수를 취하고 부울 값을 반환하는 isString
이라는 함수를 정의합니다. value is string
구문은 TypeScript에 isString
함수가 true
를 반환하면 value
의 유형이 string
으로 좁혀져야 한다고 TypeScript에 지시하는 유형 주장입니다.
그런 다음 이 유형 가드를 사용하여 런타임에 변수가 문자열인지 여부를 확인할 수 있습니다.
function processValue(value: unknown) {
if (isString(value)) {
// value is now of type string
console.log(value.toUpperCase());
} else {
console.log('Value is not a string');
}
}
이 예에서 processValue
함수는 unknown
유형의 인수를 사용하고 isString
유형 가드를 사용하여 인수가 문자열인지 여부를 확인합니다. 인수가 문자열인 경우 함수는 이를 대문자로 변환하고 콘솔에 기록합니다. 인수가 문자열이 아닌 경우 함수는 값이 문자열이 아님을 나타내는 메시지를 기록합니다.
TypeScript에서 사용자 지정 유형 보호를 작성하려면 부울 값을 반환하고 유형 어설션을 사용하여 변수 유형을 좁히는 함수를 정의해야 합니다. 사용자 정의 유형 가드를 정의하는 구문은 다음과 같습니다.
function isType(value: unknown): value is Type {
// return true if value is of type Type, false otherwise
}
이 구문에서 value
는 좁히려는 유형의 변수이고 Type
은 좁히려는 유형입니다. is
키워드는 함수가 유형 술어임을 나타내는 데 사용됩니다.
형식 조건자를 사용하여 사용자 지정 형식 가드를 작성하는 방법에 대한 몇 가지 예를 살펴보겠습니다.
변수가 기본 유형인지 확인하려면 유형 주장과 함께 typeof
연산자를 사용할 수 있습니다. 예를 들어 변수가 문자열인지 확인하려면 다음과 같이 작성할 수 있습니다.
function isString(value: unknown): value is string {
return typeof value === 'string';
}
이 예에서 value
의 typeof
연산자가 'string'
과 같은 경우 isString
함수는 true
를 반환합니다. value is string
구문은 TypeScript에 함수가 true
를 반환하는 경우 value
의 유형을 string
으로 좁히도록 지시하는 유형 어설션입니다.
유사한 기술을 사용하여 숫자
, 부울
및 심볼
과 같은 다른 기본 유형을 확인할 수 있습니다.
변수가 객체인지 확인하려면 유형 주장과 함께 typeof
연산자를 사용할 수 있습니다. 예를 들어 변수가 배열인지 확인하려면 다음과 같이 작성할 수 있습니다.
function isArray(value: unknown): value is any[] {
return typeof value === 'object' && Array.isArray(value);
}
이 예에서 value
의 typeof
연산자가 'object'
와 같고 value
가 배열인 경우 isArray
함수는 true
를 반환합니다. value is any[]
구문은 TypeScript에 함수가 true
를 반환하는 경우 value
의 유형을 any[]
로 좁히도록 지시하는 유형 주장입니다.
유사한 기술을 사용하여 Map
, Set
및 Date
와 같은 다른 객체 유형을 확인할 수 있습니다.
변수가 사용자 지정 유형 또는 인터페이스인지 확인하려면 유형 어설션과 함께 instanceof
연산자를 사용할 수 있습니다. 예를 들어 Person
이라는 사용자 지정 인터페이스가 있다고 가정해 보겠습니다.
interface Person {
name: string;
age: number;
}
다음과 같이 변수가 Person
유형인지 확인하기 위해 유형 가드를 작성할 수 있습니다.
function isPerson(value: unknown): value is Person {
return typeof value === 'object' && value !== null && 'name' in value && 'age' in value;
}
이 예에서 value
가 string
유형의 name
속성과 number
유형의 age
속성이 있는 객체인 경우 isPerson
함수는 true
를 반환합니다. value is Person
구문은 TypeScript에 함수가 true
를 반환하는 경우 value
의 유형을 Person
으로 좁히도록 지시하는 유형 어설션입니다.
유형 술어는 TypeScript의 유형 시스템으로 작업하기 위한 강력한 도구이지만 올바르게 사용하기 까다로울 수도 있습니다. 다음은 형식 술어로 작업할 때 염두에 두어야 할 몇 가지 추가 팁입니다.
unknown
및 any
유형에서만 작동합니다. 특정 유형과 함께 유형 술어를 사용하려면 unknown
또는 any
를 포함하는 공용체 유형을 사용해야 합니다.true
또는 false
이외의 값을 반환하면 TypeScript에서 오류가 발생합니다.null
및 undefined
값과 함께 사용할 수 있지만 이러한 값을 허용하려면 유형 어설션을 사용해야 합니다. 예를 들어 변수가 문자열인지 null
인지 확인하려면 다음과 같이 작성할 수 있습니다.function isStringOrNull(value: unknown): value is string | null {
return value === null || typeof value === 'string';
}
유형 술어는 TypeScript의 유형 시스템으로 작업하기 위한 강력한 도구입니다. 사용자 정의 유형 가드를 정의하면 코드가 유형 안전하고 유지 관리 가능하도록 할 수 있습니다. 기본 유형, 객체 유형 또는 사용자 정의 유형을 확인하는지 여부에 관계없이 유형 술어는 런타임에 변수 유형의 범위를 좁힐 수 있는 유연하고 강력한 방법을 제공합니다.