✨ 타입 단언

타입스크립트가 추론하지 못하는 타입을 as 키워드를 통해 명시해주는 것을 말한다.

사용법

변수 as 타입

as 뒤에 명시하고자 하는 데이터 타입을 작성해주는 방식으로 사용한다.

예제로 살펴보기

기본 예제

• ✅ 타입 단언을 하지 않은 빈 객체

let iFruit = {};
// let iFruit: {}
iFruit.name = "strawberry";
// '{}' 형식에 'name' 속성이 없습니다.ts(2339)
iFruit.color = "red";
// '{}' 형식에 'color' 속성이 없습니다.ts(2339)

iFruit에 빈 객체를 할당하고, 프로퍼티를 생성하려고 했지만, 타입 추론이 let iFruit: {}빈 객체로 이루어지기에 프로퍼티를 참조할 수 없다.

• ✅ 타입 단언을 사용한 빈 객체

interface IFruit {
    name: string;
    color: string;
}
let iFruit = {} as IFruit;
// let iFruit: IFruit
iFruit.name = "strawberry";
iFruit.color = "red";

타입 단언을 통해 iFruit의 타입을 IFruit으로 추론하게 만들어 name, color 프로퍼티에 참조 가능하도록 하였다.

DOM 접근

// div가 있다면 접근가능하지만, 없다면 null 
let div = document.querySelector('div');
// let div: HTMLDivElement
div.innerText;

타입을 지정해주기 전 div는 HTMLDivElement | null 이기에 오류가 생길수 있다.

let div = document.querySelector('div') as HTMLDivElement 
// let div: HTMLDivElement

div.innerText;

as로 정확하게 타입을 단언해주어야 오류없이 DOM API를 조작할수 있게 된다.

추가적인 부분이지만, 값의 무조건 존재함을 보장하기 위한 방법으로 !를 사용하기도 한다.

let div = document.querySelector('div')!;

❗️ 주의 ❗️

const num = 1;

console.log((num as string[]).push('error'));

number 형이 선언되어 있는 num 변수에 as string[] 를 적용해 타입을 변환시키려고 시도해보았지만 아래와 같은 오류가 발생한다.

'number' 형식을 'string[]' 형식으로 변환한 작업은 실수일 수 있습니다. 두 형식이 서로 충분히 겹치지 않기 때문입니다. 의도적으로 변환한 경우에는 먼저 'unknown'으로 식을 변환합니다.ts(2352)

타입 단언을 아무렇게나 남발해서 사용하지 않도록 해야 할 것이다.

❗️선언(Declaration) vs 단언(Assertion) ❗️

interface Fruits{
    friutName: string;
    color: string;
}
interface Consumer extends Fruits{
    consumer: string;
    quantity: number;
}


let person1 = {} as Consumer;		// 타입 단언
person1.consumer = "happhee";
person1.quantity = 20;			
person1.friutName = "strawberry";
person1.color = "red";

let person : Consumer = {			// 타입 선언
    consumer: "hyeeun",
    quantity: 22,
    friutName: "pear",
    color : "white"
}

타입 단언은 알아서 Consumer 타입으로 인식하고 빈 객체이어도 에러를 발생시키지 않지만, 타입 선언은 객체 프로퍼티를 모두 채워야 정상 작동한다.

📚 학습할 때, 참고한 자료 📚

• 타입 단언, 타입 가드, 타입 호환
• [TypeScript] 타입스크립트 타입 단언 (Type Assertion)