타입스크립트 타입선언 키워드

타입 선언

타입스크립트는 자바스크립트와 다르게 타입을 선언하는 언어이다. 이 타입을 선언하는 방법에도 여러가지가 있어서 한번 알아보고자 한다.

기존의 타입 선언문

interface Person { 
    name: string;
}

let person1 : Person = {name: 'Alice'};

가장 기본적인 타입선언 방식이다. 변수명에 콜론(:)을 찍어서 타입을 명시해준다. 가장 많이 보편적으로 사용되는 방법이다. 만약 이런 타입표기가 없으면 자바스크릡트에서 묵시적으로 형을 결정해 준다.

AS 키워드

타입단언이라고 하는 선언 방식이다. Type Assertion이라고 칭하는 키워드이다.

let person2 = {name: 'Bob'} as Person;

위 코드에서 이어지느 코드이지만 방식이 다르다. 변수명에 콜론으로 선언해주는 것이 아닌 as 키워드 뒤에 타입을 지정해준다. 차이점은 다음곽 같다. 타입선언은 할당되는 값이 인터페이스를 만족하는지 검사하지만, 타입 단언은 강제로 타입을 지정하는 방식이다. 즉, 틀린 방식의 코드라도 오류가 없이 지나간다는 뜻이다.

const alice: Person = {};
// 오류
const bob = {} as Person; // 오류 없음

하지만 as 키워드는 실제 타입과 무관한 값이 들어가 있거나 혹은 그 타입을 충족하지 못하는 값이 들어가 있어도 무조건 받아들이기 때문에 사용에 주의가 필요하다.

satisfies 연산자

as 키워드에는 잘못된 타입이 들어가 있어도 받아들이는 문제점이 있지만 이런 문제를 해결할 수 있는 새로운 키워드가 있다. satisfies라는 키워드이다.

interface Person { 
    name: string;
    age: number;
    job: string;
};

const person1: Person = {
    name : "Alice",
    age: 25,
    job : "programmer"
}

const person2 = {
    name : "Alice",
    age: 25,
} as Person

const person2: Person = {
    name : "Alice",
    age: 25,
    job : "programmer"
} satisfies Person

예시를 위해 Person 이라는 타입을 하나 만든다. 그리고 이 타입에는 name, age, job 3가지 속성이 있다. 기본적인 방식의 타입 선언은 3가지 프로퍼티 중에 하나라도 잘못되거나 빠져있다면 에러를 낼 것이다.
하지만 두번째 방식인 as 키워드를 사용하면 예시와 같이 job 이 빠져있어도 오류가 생기지 않는다.
마지막인 satisfies 키워드는 첫번째와 마찬가지로 값이 하나라도 빠지거나 잘못되면 에러가 나타나게 된다.

타입 단언은 왜 사용하는가?

타입 단언은 타입이 확실할 때 경고메시지를 방지하거나, api 등을 사용하기 위해 사용한다. 즉, 컴파일러가 실제 변수타입과 다르게 추론하거나, 빡빡하게 추론하는 경우 개발자가 타입을 손수 지정해 주기 위해 사용하는 것이다.

가장 대표적인 예시는 DOM을 조작하는 것이다.

const div = document.querySelector('div');
console.log(div.innerText);

위코드는 에러가 발생하는데 기본적으로 DOM은 HTMLElement | null 의 유니온 타입이기 때문이다. 따라서 경고 메시지가 뜨게 된다. 하지만 개발자는 이 div가 확실히 HTMLElement 임을 알고 있기 때문에 이를 단언하기 위해 사용되는 것이다.

const div document.querySelector('div') as HTMLElement
console.log(div.innerText);

결론

타입 단언은 타입을 컴파일러가 인식하지 못할때 직접 지정해 줄 수 있는 유용한 기능이지만 너무 남발하게 되면 런타임에 에러가 발생할 확률을 올리기 때문에 꼭 필요한 부분에서만 사용해야 한다.

jh9788의 블로그