타입 가드
타입스크립트의 타입은 일반적으로 변경되지 않습니다. 하지만 예외적인 경우가 존재합니다.
타입 가드 경우 현재 타입에서 서브 타입으로 변경하여 값의 범위를 줄이는 것이 가능합니다.
타입스크립트의 타입은 값의 집합을 나타냅니다. 이때 서브 타입에 해당되는 값들을 모두 할당할 수 있는데 이때 상위 타입을 하위 타입으로 좁힐 수 있습니다(타입 가드).
1. typeof 연산자
자바스크립트의 "typeof 연산자"를 사용하여 타입 가드를할 수 있습니다.
위 코드는 그림과 같은 에러를 표시하게 됩니다. 이는 타입스크립트가 매개변수 a와 b가 어떤 특정 타입을 전달받는지 알 수 없기 때문에 + 연산자에 대해서 에러를 표시하고 있습니다.
이를 해결하기 위해 "조건문과 typeof 연산자"를 사용하여 타입 가드를할 수 있습니다.
위 코드처럼 if 조건문과 typeof 연산자를 사용하여 매개변수 a와 b를 number이라는 타입으로 제한하여 사용할 수 있습니다.
주의할 점으로 null 값의 경우 typeof 연산자의 결과가 "object"라는 점을 주의하여 사용해야 합니다.
2. in 연산자
객체 타입을 특정할 때 "in 연산자"를 사용하여 타입을 제한할 수 있습니다.
즉, in 연산자를 사용하여 특정 객체만이 갖는 프로퍼티 키로 타입을 제한할 수 있습니다.
매개변수 emp 타입은 Admin과 Employee를 합집합으로 가지며, Admin과 Employee의 서브 타입 모두 허용합니다.
printEmployeeInformation 함수 내부에서는 name에 접근하는 것은 허용하지만 privileges나 startDate에 접근하는 것에는 에러를 표시하게 됩니다.
그 이유는 타입스크립트가 어떤 인터페이스의 구조를 갖는 객체를 전달받을지 알 수 없기 때문에 "확정적으로 접근 가능한 프로퍼티에 대해서만 접근을 허용"합니다.
이러한 경우 타입 좁히기를 사용하여 특정 인터페이스를 갖는 객체로 제한하여 프로퍼티에 접근해야 합니다.
이 경우 "조건문과 in 연산자"를 사용하여 타입 가드를 사용할 수 있습니다. in 연산자는 객체가 특정 프로퍼티를 갖게 되면 true를 반환하여 이때 상속되는 프로퍼티는 제외됩니다.
if 코드 블록 내 emp 객체는 Admin 인터페이스로 제한되며, else 코드 블록 내에서는 Employee 인터페이스로 제한됩니다.
3. instanceof 연산자
만약 특정 클래스(생성자 함수)로 생성되는 객체를 특정할 때 "instanceof 연산자"를 사용하여 타입 가드를 사용할 수 있습니다.
위 코드에서 useVehicle 함수의 매개변수 타입을 Vehicle 인터페이스로 지정했습니다. 함수 내부에서는 Car와 Truck 인터페이스가 공통적으로 갖고 있는 drive 메서드에 대해서는 접근 가능하지만 Truck만 갖는 loadCargo 메서드에 접근하는 것에는 에러를 표시합니다.
이는 타입스크립트가 특정 인터페이스로 인식하지 못하고 유니온 타입으로 인식하기 때문입니다. 이러한 경우 "조건문과 instanceof 연산자"를 통해 특정 타입으로 좁힐 수 있습니다.
위 코드처럼 조건문과 instanceof 연산자를 사용**하여 if 코드 블록 내 vehicle이 Truck 타입으로 특정하여 타입스크립트에게 알려줄 수 있습니다.
4. 태그된 유니온 타입
객체의 경우 각 객체를 식별하기 위한 프로퍼티를 추가하고, 프로퍼티 값을 통해 객체를 특정할 수 있습니다.
위 코드처럼 두 인터페이스를 유니온 타입으로 하는 객체를 인수로 전달받는 함수 내부에서는 각 프로퍼티에 대한 접근에 에러를 표시합니다. 위에서 살펴보았듯이 타입스크립트가 어떤 인터페이스의 구조를 갖는 객체인지 인지하지를 못하기 때문에 에러를 표시합니다.
이때 "태그된 유니온 타입"을 사용하여 타입 가드를 할 수 있습니다..
예를 들어, 각 인터페이스에 객체를 구분하기 위한 type 프로퍼티를 정의하고 리터럴 타입을 갖도록 정의합니다.
모든 인터페이스는 type 프로퍼티를 갖고 있으며, 각 type에 대한 값이 'bird', 'horse'이므로 타입스크립트는 이를 인지하고 자동 완성으로 표시해줍니다. 'brid', 'horse' 이외 값 작성시 에러를 표시하게 됩니다.
이로써 오타가 발생하여 에러가 발생할 확률이 없으며, 해당 인터페이스의 구조를 갖는 모든 객체는 type 프로퍼티를 갖도록 강제합니다.
그리고 함수 내부에서는 "switch(if) 문을 통해 각 인터페이스의 type 프로퍼티 값을 통해" 특정 인터페이스를 갖는 객체로 제한하는 방식으로 타입을 좁힐 수 있습니다.
5. 사용자 정의 타입 가드 (is 타입 연산자)
"is 타입 연산자"를 사용하여 타입 가드 전용 함수를 정의할 수 있습니다.
is 타입 연산자를 함수의 "반환값 타입"에 사용한 함수를 타입 가드 전용 함수라 부르며 이는 타입 가드를 위해 사용하는 헬퍼 함수로서 사용합니다.
형식은 ": parameter is Type" 형식으로 사용되며 런타임에 함수에게 전달되는 인수의 타입이 Type인 경우 true, 아닌 경우 false로 추론됩니다.
위 코드처럼 element 함수 내부에서 isInputElement 타입 가드 전용 함수를 헬퍼 함수로 사용하여 타입 가드를 사용할 수 있습니다.
