타입 추론, 할당, 단언, 가드

타입 추론 (Type Inference)

최대한 타입을 적게 명시하여 코드를 간결하게 작성하는 것이 좋음

• 타입 추론이란 TypeScript가 자동으로 타입을 추론하는 것
• 변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용

let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
str = 123; // Error: Type '123' is not assignable to type 'string'

01. 변수 추론

• 초기화된 변수

let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
let num = 123;
let bool = true;

• 기본값이 설정된 매개변수

// a와 b의 타입을 명시하지 않아도 타입스크립트가 number 타입으로 추론
function add(a: number, b = 2) {
    return a + b;
}

console.log(add()); // 3

• 반환값이 있는 함수

// 반환값이 있는 함수는 타입스크립트가 반환값의 타입을 추론
function hello(name: string) {
    return `Hello, ${name}!`;
}

console.log(hello('TypeScript')); // Hello, TypeScript!

타입 단언 (Assertion)

타입 단언(Type Assertion)은 타입스크립트 컴파일러에게 "내가 더 잘 알고 있어" 라고 말해주는 방법입니다. 타입 단언은 다른 언어에서 비슷한 개념으로 "타입 캐스팅(Type Casting)" 이라고도 불립니다.

01. as 키워드

as 키워드를 사용하는 방법은 JSX를 사용할 때 <타입> 문법과 혼동을 피하기 위해 도입된 방법입니다.

const el = document.querySelector('body'); // HTMLElement | null
el.textContent = '주말이 끝났다'; // `el`는 `null`일 수 있습니다.

document.querySelector는 선택자 문자열을 인수로 받아 해당 선택자와 일치하는 문서 내 첫 번째 요소를 반환합니다. 만약 문서 내에 해당 요소가 존재하지 않는다면, 반환 값은 null이 됩니다.

이런 상황에서 타입스크립트는 null일 가능성을 고려하여 el 변수의 타입을 HTMLElement | null로 간주합니다. 따라서 el 변수를 개발자가 명확하게 HTMLElement 타입으로 단언해주어야 합니다.

const el = document.querySelector('body') as HTMLElement;
el.textContent = '주말이 끝났다'; // `el`은 `null`일 수 없습니다.

이 경우, el 변수는 HTMLElement 타입으로 단언되었기 때문에 null일 가능성이 없어졌습니다.

02. non-null 단언 연산자 (!)

! 연산자는 null 또는 undefined가 아님을 단언하는 연산자입니다. 이 연산자는 변수 뒤에 붙여 사용합니다.

const el = document.querySelector('body')!;
el.textContent = '주말이 끝났다'; // `el`은 `null`일 수 없습니다.

! 연산자를 사용하면 null 또는 undefined가 아님을 단언할 수 있습니다. 하지만, ! 연산자를 남발하면 코드의 가독성이 떨어지고, null 또는 undefined로 인한 오류가 발생할 수 있습니다. 따라서, ! 연산자 사용은 신중하게 사용해야 합니다.

03. as 키워드 vs <타입> 문법

아래 예제에서 getNumber 함수는 number, null, 또는 undefined 값을 받을 수 있습니다. 그러나 null 또는 undefined 값을 받았을 때 toFixed 메서드를 호출하려 하면 오류가 발생합니다. 이 문제를 해결하려면 함수 내부에서 타입 단언 또는 null 및 undefined 체크를 해줘야 합니다.

function getNumber(x: number | null | undefined) {
    return Number(x.toFixed(2)); // 오류 발생
}

getNumber(3.14);
getNumber(null);

- as 키워드 사용

function getNumber(x: number | null | undefined) {
    return Number((x as number).toFixed(2)); // 타입 단언
}

getNumber(3.14);
getNumber(null);

- non-null 단언 연산자 사용

function getNumber(x: number | null | undefined) {
    return Number(x!.toFixed(2)); // non-null 단언 연산자
}

getNumber(3.14);
getNumber(null);

- 조건문 사용

function getNumber(x: number | null | undefined) {
    if (x === null || x === undefined) {
        return 0;
    }
    return Number(x.toFixed(2));
}

getNumber(3.14);
getNumber(null);

할당 단언 (Non-null Assertion)

타입스크립트에서는 타입을 명시적으로 지정하지 않은 변수에 값을 할당할 때 오류가 발생합니다. 이때, 변수 뒤에 ! 연산자를 붙여 할당 단언을 사용하면 오류를 해결할 수 있습니다.

let num!: number;
// num = 10;
console.log(num); // 변수가 할당되기 전에 사용하면 오류 발생

num = 10;

타입 가드 (Type Guard)

타입 가드(Type Guard)는 런타임에 발생하는 오류를 줄이기 위해 사용하는 타입스크립트의 기능입니다. 타입 가드는 작성된 코드가 실제로 잘 동작할 수 있도록 코드 상에서 방어 역할을 합니다.

// Element | null 타입을 Element 타입으로 단언
function logText(el: Element) {
    console.log(el.textContent);
}

const el = document.querySelector('div');
logText(el); // el이 null일 가능성이 있어 오류 발생

위 코드에서 logText 함수는 Element 타입을 인수로 받습니다. 그러나 document.querySelector 메서드는 Element 또는 null을 반환할 수 있습니다. 따라서 el 변수를 Element 타입으로 단언해주어야 합니다.

function logText(el: Element) {
    console.log(el.textContent);
}

const el = document.querySelector('div') as Element;
logText(el);

as 키워드를 사용하여 el 변수를 Element 타입으로 단언하면 빨간 줄은 사라지지만 콘솔창에서는 오류가 발생합니다. 이는 el 변수가 null일 가능성이 있기 때문입니다.

// Element 타입을 반환하는 함수
function logText(el: Element | null) {
    if (el === null) {
        return;
    }
    console.log(el.textContent);
}

const el = document.querySelector('div');
logText(el);

if 문을 사용하여 el 변수가 null인지 확인한 후, el 변수를 Element 타입으로 사용하면 오류가 발생하지 않습니다.