반응형
vue-core의 코드 분석 중 inject()
의 구현부에서 isFunction()
이라는 함수를 보게되었다. '함수여부를 어떻게 판별할까?'하고 정의를 찾아보니 아래와 같은 코드가 있었다.
export const isFunction = (val: unknown): val is Function =>
typeof val === 'function'
내가 헷갈렸던 부분은 반환 타입으로 주어진 val is Function
이었다. 파이썬에서만 봤지 타입스크립트에서 is
를 사용하는걸 처음봐서 검색해보니 User Defined Type Guards
라는 개념을 찾을 수 있었다.
User Defined Type Guards란 특정 조건을 만족하는지 확인하여 컴파일러에게 해당 조건이 참일 경우 변수나 객체의 타입을 안전하게 판단하고 추론할 수 있도록 도와주는 기능을 말한다.
function 함수명(변수명: 타입): 변수명 is 특정타입 {
// 타입을 확인하는 코드
return 조건;
}
is는 user-defined type guards
에서 사용하는 키워드로 함수 반환 타입의 일부로 사용한다. 조건이 만족될 때 인자가 특정 타입임을 타입스크립트 컴파일러에게 알려줘서 조건문 내에서 타입 안전성을 보장한다.
다음은 예시 코드이다.
const isFunction = (val: unknown): val is Function => typeof val === 'function'
function test(val: unknown) {
if (isFunction(val)) {
// 여기서 타입스크립트 컴파일러가 val을 Function 타입으로 간주한다.
val()
} else {
// 하지만 여기에서는 val이 Function이 아니기 때문에 컴파일 시 에러가 발생한다.
val()
}
}
컴파일러가 보다 정확한 타입 추론을 할 수 있게해 타입 안전성을 유지하면서 가독성 높은 코드 작성을 도와주는 유용한 기능이다. 앞으로 적용할 수 있는 부분이 있으면 사용해봐야겠다.
반응형