타입 단언(Type Assertion)은 컴파일러에게 특정 값이 어떤 타입인지 개발자가 더 잘 알고 있다고 알려주는 방법이다. 개발자가 as 를 이용해 타입을 단언하면, 자동 추론된 타입을 덮어쓰게 된다. 이는 컴파일러가 타입을 자동으로 추론하지 못하거나 잘못 추론하는 상황에서 사용된다.
예를 들어, DOM 요소를 가져오는 document.fetElementById() 메서드의 반환 타입은 HTMLElement | null 로 정의되어있다. 하지만 개발자가 해당 요소가 HTMLDivElement 임을 확신한다면, asHTMLDivElement 를 사용해 컴파일러에게 명시적으로 알려줄 수 있다. 이를 통해 타입 오류 없이 안전하게 속성에 접근할 수 있다.
const element = document.getElementById("myElement") as HTMLDivElement;
element.style.backgroundColor = "blue"; 타입 단언은 주로 API나 외부 라이브러리의 반환 타입을 확실히 알고 있을 때 사용된다. 컴파일러가 타입 추론에 실패하거나 경고를 발생시키는 경우에 타입 단어을 통해 올바른 타입을 지정할 수 있다.
타입 단언을 사용할 때 주의할 점❓🤔
타입 단언은 컴파일러의 타입 검사를 우회하기 때문에, 실제 값이 단언한 타입과 다를 경우 런타임 에러가 발생할 수 있다. 따라서 타입 단언은 해당 타입을 확실히 알고 있을 때만 사용하는 것이 중요하며, 가능한 한 타입 추론과 타입 가드를 우선적으로 사용하는 것이 바람직하다. 잘못된 사용은 타입스크립트의 장점을 훼손하며, 오히려 코드의 안정성을 해칠 수 있다.
타입 단언은 강제 형변환과는 다른 개념이다. 강제 형변환은 실제로 데이터 자료를 변환시키지만, 타입 단언은 그냥 타입만 이것이라고 컴파일러에게 주장할 뿐이라 실제 데이터가 바뀌거나 그러지 않는다. 어떻게 보면 컴파일러를 속이는 것과 같게 되므로 코드에 빨간줄은 안뜨지만 실제 실행하다보면 오류가 발생할 수 있다.
타입 추론이란?
타입 추론(type Inference)은 타입스크립트가 코드를 해석하여 타입을 정의하는 동작을 의미한다. 변수를 초기화 하거나 함수의 파라미터에 기본 값을 설정하거나 반환 값을 설정했을 때 지정한 값을 적당한 타입을 제시하고 정의해주는 것을 의미한다.
예를 들어 다음과 같이 타입을 생략한채 변수를 선언하면 대입되는 값의 자료형태를 보고 컴파일러가 num 변수는 number 타입인 것을 추론해서 자동으로 넣게 되는 원리이다.
let num = 12;
num = 'Hello type!'; // Error - TS2322: Type '"Hello type!"' is not assignable to type 'number'.컴파일러에 의한 추론값
let num: number위와 같이 num에 대한 타입을 따로 지정하지 않더라도 일단 num 변수는 number로 간주되는걸 확인할 수 있다.
이렇게 타입을 생략한채 변수를 선언하거나 초기화 할 때 타입 추론이 일어난다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다.
- 초기화된 변수
- 기본 값이 설정된 매개 변수
- 반환 값이 있는 함수
타입 가드란?
타입 가드는 에러를 줄일 수 있는 방어 코드 기법을 의미한다. 타입 가드는 어떠한 전용 문법이 있는 것이 아니라, 타입 스크립트에서 우리가 흔히 쓰는 if문 조차도 분기를 잘해서 오류를 최소화 할 수 있다면 그것이 바로 타입 가드 기법이 될 수 있다.
대표적으로 타입 가드에서 사용되는 키워드들이 있다.
typeof: 일반 타입 체킹instanceof: 클래스 체킹Array.isArray(): 배열 체킹.type/in: 객체 속성 체킹
이들은 모두 자바스크립트 코드이다.
자바스크립트에서는 쓸 일이 별로 없겠지만 타입스크립트에서는 유용하다.
타입 단언을 안전하게 활용하기 위한 원칙❗
1. 타입 내로잉(narrowing) 우선 사용
타입 단언보다는 타입 내로잉(narrowing)을 우선적으로 활용하는 것이 좋다. 타입스크립트는 조건문과 타입 체크를 통해 자동으로 타입을 좁힐 수 있으므로, 가능한 한 단언 없이 타입을 명확히 하는 방식이 권장된다.
function printLength(value: string | string[]) {
if (Array.isArray(value)) {
console.log(value.length); // 타입 내로잉으로 배열로 안전하게 처리
} else {
// 문자열로 처리
}
}2. type predicate을 활용한 타입 가드 사용
type predicate을 활용한 타입 가드를 통해서도 타입 안전성을 높일 수 있다. type prediacate을 통해 데이터 구조를 확인하여 런타임 오류를 줄이는 방식이다.
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
if (isFish(pet)) {
pet.swim();
}3. 최소한의 범위에서만 사용
타입 단언은 최소한의 범위에서만 사용하는 것이 좋습니다. 전체 객체보다는 필요한 속성이나 특정 부분만 단언하는 방식으로 불필요한 위험을 줄이는 것이 바람직하다.
const element = document.getElementById("myElement");
if (element) {
(element as HTMLDivElement).style.backgroundColor = "blue"; // 필요한 부분만 단언
}래퍼런스(Reference)
주제 - https://www.maeil-mail.kr/question/165
타입 단언, 타입 추론, 타입 가드 - https://inpa.tistory.com/entry/TS-📘-타입-추론-타입-호환-타입-단언-타입-가드-💯-총정리
