TypeScript에서 타입 가드와 타입 단언 활용하기

TypeScript에서 타입 가드와 타입 단언 활용하기

TypeScript는 JavaScript에 정적 타입을 추가해 코드의 가독성과 안정성을 높이는 언어입니다. 이 글에서는 TypeScript의 타입 가드와 타입 단언 기능에 대해 알아보고 활용하는 방법을 소개합니다.

타입 가드

타입 가드(type guard)는 코드 블록 내에서 변수의 타입을 좁혀서(specific type) 사용할 수 있는 기능입니다. 이를 통해 컴파일러가 타입을 정확하게 추론할 수 있어 에러를 방지할 수 있습니다.

사용자 정의 타입 가드

사용자 정의 타입 가드는 함수를 사용해 특정 타입을 확인하는 방법입니다. 이 함수는 boolean 값을 반환하며, is 키워드를 사용해 반환할 타입을 지정합니다.
​
예제:

interface Bird {
  fly(): void;
}

interface Fish {
  swim(): void;
}

function isBird(animal: Bird | Fish): animal is Bird {
  return (animal as Bird).fly !== undefined;
}

const animal: Bird | Fish = getAnimal();

if (isBird(animal)) {
  animal.fly(); // 타입 가드로 인해 Bird로 타입이 좁혀짐
} else {
  animal.swim(); // 타입 가드로 인해 Fish로 타입이 좁혀짐
}

타입 단언

타입 단언(type assertion)은 개발자가 명시적으로 변수의 타입을 지정하는 방법입니다. 이를 통해 컴파일러가 타입을 정확하게 추론할 수 있도록 도와줍니다.
​
예제:

const inputElement = document.querySelector("#input") as HTMLInputElement;

위 예제에서 as 키워드를 사용해 inputElement의 타입을 HTMLInputElement로 단언합니다. 이렇게 하면 컴파일러가 inputElement를 HTMLInputElement로 인식해 해당 타입의 메서드와 속성을 사용할 수 있습니다.

결론

TypeScript에서 타입 가드와 타입 단언은 코드의 안정성과 가독성을 높이는 데 도움이 됩니다. 타입 가드를 사용하면 코드 블록 내에서 변수의 타입을 좁혀서 사용할 수 있으며, 타입 단언을 통해 개발자가 명시적으로 변수의 타입을 지정할 수 있습니다. 이 글을 통해 타입 가드와 타입 단언을 이해하고 활용하는 방법을 배웠습니다. 이러한 기능을 활용하면 TypeScript 코드를 더 효과적으로 작성하고 관리할 수 있습니다.