TypeScript 유형 어설션을 사용하는 방법
TypeScript의 유형 어설션은 컴파일러에게 값의 유형에 대해 알고 있는 것보다 더 많이 알고 있다고 알리는 방법입니다. 이는 불확실하거나 광범위한 유형을 가진 값으로 작업할 때 유용할 수 있으며, 더 나은 유형 검사와 코드 가독성을 위해 값을 좁히고자 할 때 유용합니다. 이 문서에서는 TypeScript 유형 어설션을 효과적으로 사용하는 방법을 살펴보겠습니다.
타입 어설션이란?
Type assertion은 TypeScript 컴파일러가 만든 기본 유형 추론을 재정의할 수 있는 TypeScript의 메커니즘입니다. 실제 런타임 유형은 변경하지 않지만 컴파일러가 유형 검사를 위해 변수의 유형을 이해하도록 돕습니다. 유형 어설션은 C# 또는 Java와 같은 다른 언어의 유형 캐스팅과 비슷하지만 런타임에 영향을 미치지 않습니다.
유형 어설션의 구문
TypeScript에서 유형 어설션을 사용하는 방법은 두 가지가 있습니다.
as키워드 사용(권장)- 꺾쇠괄호 사용
<>
as 키워드 사용
유형 어설션을 사용하는 가장 일반적인 방법은 as 키워드를 사용하는 것입니다.
let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;
console.log(strLength); // Output: 17이 예에서 우리는 TypeScript에 someValue가 string 유형임을 알려주고, 이를 통해 length 속성을 사용할 수 있습니다.
각괄호 사용 <>
유형 어설션에 대한 대체 구문은 각괄호를 사용합니다.
let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;
console.log(strLength); // Output: 17이 구문은 as 구문과 동일한 결과를 얻습니다. 그러나 JSX(예: React)가 사용되는 환경에서는 권장되지 않습니다. JSX 요소의 구문과 충돌하기 때문입니다.
유형 어설션에 대한 일반적인 사용 사례
유형 어설션은 일반적으로 여러 시나리오에서 사용됩니다.
unknown유형으로 작업할 때- DOM 요소를 처리할 때
- 노동조합 유형을 좁힐 때
- 유형 정의가 없는 타사 라이브러리와 상호 작용하는 경우
예: unknown 유형으로 유형 어설션하기
unknown 유형은 어떤 유형이든 허용하고 싶지만 사용하기 전에 일부 유형 검사를 해야 할 때 유용합니다. 유형 어설션은 유형을 좁히는 데 도움이 됩니다.
function getLength(value: unknown): number {
if (typeof value === "string") {
return (value as string).length;
} else if (Array.isArray(value)) {
return (value as any[]).length;
}
return 0;
}
console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0이 예제에서 우리는 타입 어설션을 사용하여 TypeScript에 value가 string 또는 any[] 배열임을 알려줍니다.
예: DOM 요소 처리
DOM을 조작할 때 TypeScript는 적절한 속성과 메서드를 제공하기 위해 요소의 특정 유형을 알아야 합니다. 여기서는 유형 어설션이 유용합니다.
const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";여기서는 타입 어설션을 사용하여 TypeScript에 inputElement가 HTMLInputElement라는 것을 알려주고, 이를 통해 value 속성에 직접 액세스할 수 있습니다.
유형 어설션 대 유형 캐스팅
타입 어설션과 타입 캐스팅의 차이를 이해하는 것이 필수적입니다. TypeScript에서 타입 어설션은 런타임에 실제 타입을 변경하지 않고, 컴파일 타임에 타입을 처리하는 방법만 TypeScript 컴파일러에 알려줍니다. 반면, C#이나 Java와 같은 다른 언어의 타입 캐스팅은 런타임에 값을 한 타입에서 다른 타입으로 변환하는 것을 포함할 수 있으며, 이는 성능과 동작에 영향을 미칠 수 있습니다.
유형 어설션 사용 시 주의 사항
유형 단언은 강력할 수 있지만, 오용하면 런타임 오류가 발생할 수 있습니다. 안전하게 사용하기 위한 몇 가지 팁은 다음과 같습니다.
- 호환되지 않는 유형을 강제로 변환하기 위해 어설션을 사용하지 마세요.
- 항상 주의해서 단언을 사용하고 TypeScript의 유형 가드를 사용하여 유형을 좁히는 것을 선호하세요.
- 유형에 대해 확신이 있고 다른 방법으로는 범위를 좁힐 수 없는 경우 단언을 사용합니다.
잘못된 유형 어설션 예제
위험한 유형 어설션의 예는 다음과 같습니다.
let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!
console.log(numValue); // Output: Hello, TypeScript! (incorrect)이 코드는 오류 없이 컴파일되지만 문자열이 숫자로 잘못 처리되기 때문에 런타임에 예기치 않은 동작이 발생합니다.
결론
TypeScript의 유형 어설션은 TypeScript보다 값의 유형에 대해 더 많이 알고 있을 때 추론된 유형을 재정의하는 방법을 제공합니다. 불확실한 유형을 처리하거나, 타사 라이브러리와 상호 작용하거나, DOM 요소로 작업할 때 유용합니다. 그러나 런타임 오류를 피하고 코드에서 유형 안전성을 보장하기 위해 신중하게 사용해야 합니다.
타입 어설션을 마스터하면 더욱 표현력 있고 견고한 TypeScript 코드를 작성할 수 있습니다. 다양한 시나리오에서 이를 사용하여 연습하여 이 강력한 기능에 더 익숙해지세요.