타입 추론 & 타입 캐스팅

타입 추론

만약 타입 선언을 생략하면 값이 할당되는 과정에서 동적으로 타입이 결정된다. 이를 타입 추론이라 한다.

let foo = 123; // foo는 number 타입

위 코드는 변수 foo에 타입을 선언하지 않았지만 타입 추론에 의해 변수의 타입이 결정된다. 동적 타입 언어는 타입 추론에 의해 변수의 타입이 결정된 후에도 같은 변수에 여러 타입의 값을 교차하여 할당할 수 있다. 하지만 정적ㄷ 타입 언어는 타입이 결정된 후에는 타입을 변경할 수 없다. TypeScript는 정적 타입 언어이므로 타입 추론으로 타입이 결정된 이후, 다른 타입의 값을 할당하면 에러가 발생한다.

let foo = 123; // foo는 number 타입
foo = 'hi'; // Type 'string' is not assignable to type 'number'.

타입 선언을 생략하고 값을 할당하지 않아서 타입을 추론할 수 없으며 any 타입이 된다. any 타입의 변수는 자바스크립트의 var 키워드로 선언된 변수처럼 어떤 타입의 값도 재할당이 가능하다.

let foo = 123; // let foo: any와 동치

foo = 'hello';
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

타입 캐스팅

기존의 타입에서 다른 타입으로 캐스팅하려면 as 키워드를 사용하거나 <>연산자를 사용했다.

const $input = document.querySelector('input["type = "text"]');
// => $input: Element | null

const val = $input.value;
// TS2339: Property 'value' does npt exist on type 'Element'.

document.querySelector 메서드는 Element | null 타입의 값을 반환한다. 따라서 $input은 Element | null 타입이다.

이때 $input.value를 실행하면 Element | null 타입에는 value란 프로퍼티가 존재하지 않으므로 컴파일 에러가 발생한다.

value 프로퍼티는 Element 타입의 하위 타입인 HTMLInputElement 타입에만 존재한다. 따라서 다음과 같이 타입캐스팅이 필요하다.

const $input = document.querySelector('input["type = "text"]') as HTMLInputElement;

const val = $input.value

또는 as 대신 <> 연산자를 사용할 수 있다.

const $input = <HTMLInputElement>document.querySelector('input["type = "text"]');

const val = $input.value