타입스크립트 (2) 기본 사용 방법

1. 타입 선언

타입스크립트는 변수 뒤에 타입을 명시할 수 있습니다.

let foo: string = 'hello';

타입과 다른 값이 할당되면 컴파일 시점에 에러가 발생합니다.

let bar: number = true; //error

함수의 경우에는 다음과 같이 매개변수와 반환값의 타입을 지정할 수 있습니다.

// 함수 선언식
function plus(x: number, y: number): number {
  return x + y;
}

// 함수 표현식
const plus = (x: number, y:number): number => x + y;

타입스크립트는 자바스크립트의 타입을 모두 사용할 수 있으며 다음과 같은 추가 타입을 제공합니다.

타입	설명
array	배열
tuple	배열에 고정된 아이템 수를 갖는 경우
enum	열거형. 숫자 집합에 이름을 지정
any	타입 추론을 할 수 없거나 체크가 필요 없어 모든 타입 할당 가능.
void	함수 반환값이 없을 때 사용
never	결코 발생하지 않는 값

정적 타이핑이란 변수를 선언할 때 변수에 할당할 값의 유형을 명시적으로 선언하는 것을 의미합니다.

자바스크립트는 동적 타입(또는 느스한 타입)의 언어여서 동적으로 타입을 추론합니다. 이는 사용성이 좋지만 예상치 못한 오류가 발생할 수도 있습니다.

정적 타이핑을 사용하면 코드 가독성, 예측성, 안전성이 향상되어 대규모 프로젝트에 적합합니다.

타입 추론은 타입스크립트에서 타입을 별도로 명시하지 않을 때 동적으로 타입이 결정되는 것입니다. 아래와 같이 타입을 지정하지 않고 값을 할당할 경우 변수의 타입이 자동으로 결정됩니다.

let foo = 123; //number type
foo = 'Hello'; //error

그러나 이는 타입스크립트의 장점을 없애는 것이기 때문에 사용하지 않는 것이 좋습니다.

기존의 타입에서 다른 타입으로 캐스팅하려면 as 또는 <>를 사용할 수 있습니다.

다음과 같이 querySelector() 메소드를 통해 요소를 선택하는 코드가 있다고 해보겠습니다.

let input = document.querySelector('input["type="text"]');

메소드를 통한 결과값의 유형은 Element 타입이며 따라서 다음 코드는 에러가 발생합니다.

console.log(input.value);

이는 Element 타입에는 value 속성이 없기 때문입니다. 이는 HTMLInputElement 타입에만 존재합니다. 이 때는 다음과 같이 타입캐스팅을 통해 문제를 해결할 수 있습니다.

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

이제 input 변수는 HTMLInputElement 타입이 되어 input.value를 사용할 수 있게 됩니다.

<>를 사용하여 동일하게 타입 캐스팅을 할 수 있습니다.

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

그러나 이와 같은 타입 단언 as Type 보다는 타입 선언 : Type을 사용하는 것이 런타임 오류를 방지할 수 있어 더 좋습니다.

참고 자료

타입스크립트 (1) 타입스크립트란? (0)	2022.12.20
타입스크립트 (3) 클래스 설명 및 사용 방법 (0)	2022.10.13