[ TS ] 타입스크립트에서 타이핑 하기 귀찮은데요 (Typescript as 키워드)

주의사항

본 문서는 Bing AI로 작성되었으며, 작성자 참고용으로 제작된 문서입니다. 향후 저작권 이슈가 있을 경우 바로 내릴 수 있도록 하겠습니다.

본문

TypeScript에서 as 키워드는 타입 단언(type assertion)을 사용하기 위한 것입니다. 타입 단언은 컴파일러에게 변수나 속성의 타입을 우리가 지정해주는 것이며, 컴파일러가 스스로 추론하는 것을 방지합니다. 타입 단언은 any 타입을 특정 타입으로 다루는 데 자주 사용됩니다. 예를 들어, 다음과 같은 코드가 있습니다.

let x: any = "Hello";
let y = x as string;

여기서 x는 any 타입이므로, 컴파일러는 x가 가지고 있는 메서드나 속성에 대해 알 수 없습니다. 그래서 x.length나 x.toUpperCase()와 같은 코드는 오류를 발생시킬 수 있습니다. 하지만 y는 x를 string 타입으로 단언한 것이므로, 컴파일러는 y가 string 타입이라고 인식하고, string 타입의 메서드나 속성을 사용할 수 있습니다.

타입 단언은 변환(conversion)이 아닙니다. 즉, as 키워드로 변수의 값을 바꾸거나 새로운 값을 만들지 않습니다. 단지 컴파일러에게 변수의 타입을 알려주는 것뿐입니다. 런타임에는 as 키워드가 아무런 영향을 주지 않습니다¹.

타입 단언은 다음과 같은 두 가지 방식으로 사용할 수 있습니다.

// 꺽쇠 괄호(<>)를 사용하는 방식
let a = <string> x;

// as 키워드를 사용하는 방식
let b = x as string;

두 방식은 동일한 기능을 하지만, JSX와 함께 사용할 때는 as 키워드를 사용해야 합니다². JSX는 XML과 비슷한 문법으로, React와 같은 프레임워크에서 UI 컴포넌트를 만들 때 사용합니다³.

타입에러 방지

타입 에러를 방지하기 위해서는 as 키워드를 사용하는 것이 좋지 않은 방법이라고 할 수 있습니다. as 키워드는 컴파일러에게 타입을 강제로 지정하는 것이므로, 실제로 값이 다른 타입일 경우 런타임에 에러가 발생할 수 있습니다. 예를 들어, 다음과 같은 코드가 있습니다.

let x: any = 123;
let y = x as string;
console.log(y.length); // 런타임 에러

여기서 x는 any 타입이므로, y에 string 타입으로 단언하였습니다. 하지만 x의 값은 실제로 숫자이므로, y.length를 실행하면 런타임에 에러가 발생합니다. 이런 경우를 방지하기 위해서는 as 키워드를 사용하지 않고, 타입 가드(type guard)라는 기능을 사용하는 것이 좋습니다¹. 타입 가드는 특정 조건문을 통해 변수의 타입을 좁혀주는 것입니다. 예를 들어, 다음과 같은 코드가 있습니다.

let x: any = 123;
// string이 타입이 아닌 문자열임에 주의하세요. (코멘트 직접 작성)
if (typeof x === "string") {
  console.log(x.length); // 안전하게 실행
}

여기서 typeof x === "string"이라는 조건문은 x가 string 타입일 때만 참이 되므로, 컴파일러는 이 조건문 안에서 x의 타입을 string으로 인식합니다. 따라서 x.length를 안전하게 실행할 수 있습니다.