TypeScript에서 유형 캐스팅

경우에 따라 TypeScript에서 TypeScript가 특정 유형을 식별할 수 없는 유형unknown이 있는 항목이 있습니다. 가장 기본적으로 이것은 변수에 단순히 unknown 유형이 지정될 때 발생할 수 있습니다. 예를 들어:

let text:unknown = "String Goes Here";

위 콘텐츠의 유형이 string 인 것을 볼 수 있지만 유형이 unknown 지정되었으므로 TypeScript는 그것이 어떤 유형인지 모릅니다. 따라서 문자열에 특정한 메소드를 실행하려고 하면 작동하지 않습니다. 예를 들어 이 문자열의 길이를 얻고 싶다고 가정해 보겠습니다.

let text:unknown = "string";
let value = text.length;

TypeScript에서 캐스팅이 작동하는 방식

위의 코드는 실제로 Object is of type 'unknown'. 오류를 발생시킵니다. 이 문제를 해결하려면 TypeScript 캐스팅을 사용해야 합니다. TypeScript에서 무언가를 캐스팅하려면 as 키워드를 사용합니다. 이 예제에서는 text 변수를 문자열로 변환해야 하므로 TypeScript에서 length를 사용할 수 있습니다.

let text:unknown = "string";
let value = (text as string).length;

이제 TypeScript는 유형을 string로 변환하고 length를 사용할 수 있습니다. 이 코드가 작성되는 방식은 실제 세계에서 발생할 가능성이 낮지만 알 수 없는 유형의 API 응답을 수신하고 유형을 준수해야 하는 경우 발생할 수 있습니다.

이런 일이 발생하는 또 다른 일반적인 장소는 선택자입니다. 예를 들어 입력을 선택하고 value 속성을 통해 값을 찾을 수 있을 것으로 기대하는 것은 매우 일반적입니다.

let input = document.querySelector('input');
let inputValue = input.value;

TypeScript에서는 Object is possibly 'null'. 때문에 오류가 발생합니다. TypeScript에는 쿼리 선택기 출력에 대해 미리 정의된 여러 유형이 있지만 입력이 가능하기 때문에 let input:HTMLInputElement = ...도 쓸 수 없습니다 null . 따라서 값을 얻으려면 입력을 HTMLInputElement로 변환해야 합니다.

let input = document.querySelector('input') as HTMLInputElement;
let inputValue = input.value;

결론

이 튜토리얼을 즐겼기를 바랍니다. 일부 상황, 특히 querySelector 를 사용할 때 TypeScript 캐스팅이 필요합니다. API의 출력 또는 unknown 유형의 변수에 특정 유형 제한을 적용하는 유용한 방법입니다.