타입 가드
타입 가드는 특정 스코프 내의 타입을 보장하도록 런타임 체크를 수행하는 표현식이다. - 타입스크립트 공식문서
타입가드를 if
에 조건으로 걸어서 런타임에서 코드가 실행될때 해당 if
절에서 타입을 좁혀서 실행할 수 있다.
사용자 정의 타입 가드
type Ori = {
kwak: () => void
}
type Dog = {
wall: () => void
}
type Animal = Ori & Dog
const chundungOri: Animal = {kwak: () => console.log("꽥")}
const sabsalGae: Animal = {wall: () => console.log("삽살")}
const isDog = (animal: Animal): animal is Dog => {
return animal.wall !== undefined
}
const doSomething = (animal: Animal): void => {
if(isDog(animal)) {
animal.wall()
} else {
animal.kwak()
}
}
doSomething(chundungOri) // 꽥
doSomething(sabsalGae) // 삽살
type predicate를 사용해서 파라미터가 어떤 타입인지를 판별하는 함수를 선언한다. isType
형태로 보통 선언한다.
해당 함수의 리턴 타입으로 [parameter] is [type]
을 줘서 [parameter]
가 [type]
이면 true
, 아니면 false
를 리턴한다.
리턴 타입으로 boolean
을 줘도 컴파일시 에러가 발생하지는 않는다. 쓰면 가독성이 좋아지므로 쓰는 것 같다.
좀더 타입 판별하는 부분을 추상화 해서 쓰는 개념으로 보면 될 것 같다.
typeof
는 원시타입에만 사용가능하고 in
은 가독성이 좀 떨어지므로 타입 앨리어싱한 타입을 판별하는 경우에 잘 쓸 수 있다.
in 연산자 사용
객체에서 특정 프로퍼티가 존재하는지를 검사해서 타입을 좁힌다.
// Ori, Dog 선언은 위와 동일
const doSomething = (animal: Animal): void => {
if('wall' in animal) {
animal.wall()
} else {
animal.kwak()
}
}
사용자 정의 타입가드에 비해서 가독성이 떨어진다.
typeof
typeof로 타입 체크를 해서 타입을 좁힌다.
const doSomething = (strOrNumber: string | number): void => {
if(typeof strOrNumber === 'string') {
console.log('나는 스트링')
} else {
console.log('나는 숫자')
}
}
원시 타입에만 사용할 수 있다.
instanceof
instanceof
를 활용해 클래스의 인스턴스인지를 검사해서 타입을 좁힌다.
const doSomething = (animal: Ori | Dog): void => {
if(animal instanceof Ori) {
animal.kwak()
} else {
animal.wall()
}
}
태그
해당 타입의 태그를 활용해서 타입을 좁힌다.
type Ori = {
kwak: () => void
_tag: "Ori"
}
type Dog = {
wall: () => void
_tag: "Dog"
}
const doSomething = (animal: Dog | Ori): void => {
switch(animal._tag) {
case 'Ori':
animal.kwak()
break
case 'Dog':
animal.wall()
break
}
}
함수형 프로그래밍에서 쓰는 타입들은 다 _tag
프로퍼티를 달아놓는다. (판별하기 편하게) , 이렇게 태그 달려있는 친구들에 쓰기 용이하다.
등호
등호를 사용해서 파라미터 검사후 타입을 좁힌다.
const consoleNumber = (data: number | null): void => {
if(data !== null) {
console.log(data)
}
}
예시 외에도 리터럴 타입 여러개를 유니언한 타입 ex) type a = '1' | '2' | '3'
검사할 때도 유용하게 쓸 수 있다.
'프론트엔드 > JavaScript, TypeScript' 카테고리의 다른 글
Typescript와 Duck typing (0) | 2023.12.11 |
---|---|
조건부 타입과 맵드 타입, 유틸리티 타입 (1) | 2023.03.15 |
?. - Optional chaining 연산자 / ?? - Null 병합 연산자 (0) | 2022.08.22 |
Promise 일정 시간 초과시 대기 취소하고 에러 처리하기 (1) | 2022.08.07 |
디바운스와 쓰로틀 (0) | 2022.07.24 |