타입가드(Type Guard)
타입스크립트는 원시 타입과 클래스뿐만 아니라 섞어서 유니온 타입을 만들 수 있습니다.
function doSomething(arg: string | number)
인자는 string일 수도 있고 number일 수도 있습니다. 이러한 유니온 타입의 인자를 처리할 때 정확히 어떤 타입인지 검사해야 하는 경우가 있는데 이를 타입 가드
라고 합니다.
타입 가드는 특정 범위 안에서 런탕미 타입 검사를 수행하는 표현식입니다.
원시 타입에 식별하기
원시 타입은 typeof 연산자를 이용해 타입을 검사할 수 있습니다. 피연산자의 타입을 문자열로 반환하기 때문에 이걸 가지고 검사하는 방식입니다.
const doSomething(id: string | number){
if(typeof id === 'string'){
id.trim()
}else {
id
}
}
함수 안에서 타입 가드 없이 id.trim()을 호출하면 타입스크립트는 에러가 발생합니다. 왜냐면 타입이 number일 수도 있기 때문입니다. 이러한 경우 typeof 연산자로 타입을 검사한 뒤에 해당 타입의 함수를 사용해야 합니다.
클래스 객체 식별하기
생성자 함수가 반환하는 클래스 객체는 typeof로는 검사할 수 없습니다. 모든 객체가 문자열 "object"를 반환하기 때문입니다. 대신 instanceof 연산자를 이용해 식별할 수 있습니다. instanceof 연산자는 생성자의 프로토타입이 객체의 프로토타입 체인에 있는지 검사하기 때문입니다.
class Diner { }
class Merchant { }
const doSomething(user: Diner | Merchant) {
if (user instanceof Diner) {
user.createOrder() // user가 Diner 클래스의 객체임
} else {
user.acceptOrder() // user가 Merchant 클래스의 객체임
}
}
일반 객체 식별하기
타입스크립트로 객체 타입을 지정할 때 클래스 말고도 인터페이스를 사용할 수 있습니다.
interface Bird {
fly(): number
}
interface Fish{
swim(): number
}
function doSomething(animal: Fish | Bird){
if("swim" in animal){
(animal as Fish).swim()
}else{
(animal as Bird).fly();
}
}
in 연산자는 타입을 좁히는 표현으로 작용합니다. n in x 표현에서 n은 문자열 리터럴 혹은 문자열 리터럴 타입이고 x 는 유니언 타입입니다.
사용자 정의 타입가드
타입을 검사하는 함수를 만들고 이 함수를 전달한 인자가 특정 타입임을 확인하는 메세지를 반환합니다. Fish 타입을 검사하는 isFish 함수는 animal is Fish 라는 타입 서술어를 반환합니다.
function isFish(animal: Fish | Bird): animal is Fish{
return (animal as Fish).swim !== undefined
}
함수의 본체는 불리언 값을 반환합니다. 반환 값에 animal is Fish라는 타입 서술어가 보이는데 parameter is Type 형태이고, parameter는 반드시 현재 함수 시그니처의 매개변수 이름이어야 합니다.
function doSomething(animal: Fish | Bird) {
if (isFish(animal) {
animal.swim() // animal은 Fish 타입이 확실함
} else {
animal.fly() // animal은 Fish 타입이 아니니깐 Bird 타입이 확실함
}
}
'프론트엔드 스터디 > Typescript' 카테고리의 다른 글
[Typescript]기초 - 비구조화(구조 분해) 할당 (0) | 2021.10.13 |
---|---|
[Typesciprt] tsconfig.json 살펴보기 (0) | 2021.10.13 |
[TypeScript] 기초 - 타입 앨리어스(Type Alias) (0) | 2021.07.21 |
[TypeScript] 기초 - 타입 추론(Type Inference) (0) | 2021.07.21 |
[TypeScript] 기초 - 제네릭(Generic) (0) | 2021.07.21 |