이제 자바스크립트를 넘어 타입스크립트를 배워야할 시기라고 생각..하지는 않지만, 배우고 싶기도 하고 좀 더 빠르게 익혀서 나쁠 건 없다고 생각했다.
바로 시작하자!
타입스크립트 핸드북(타입스크립트 핸드북)을 보고 공부한 것을 정리한 글입니다.
기본적인 JS 지식은 가진 상태라고 가정합니다.
타입스크립트 기본 타입
타입스크립트는 자바스크립트에 타입이 추가된 언어라고 생각하면 편하다. 타입스크립트의 기본 타입에는 다음 12가지가 존재한다.
- Boolean
- Number
- String
- Object
- Array
- Tuple
- Enum
- Any
- Void
- Null
- Undefined
- Never
우리는 다음과 같은 방법으로 이러한 타입에 대한 정보를 타입스크립트에게 전달해줄 수 있다.
let num: number = 10;이렇게 타입이 명시되며 선언된 변수는 해당 타입의 값만 할당할 수 있다.
배열 같은 경우도 선언할 때 담길 변수의 타입을 명시할 수 있다.
let arr: number[] = [1, 2, 3];기존에 js에서 보기 어려웠던 Tuple, Enum, Any, Void, Never 타입도 존재한다.
Tuple
튜플은 배열의 크기가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.
let arr: [string, number] = ["hi", 10];여기서 만일 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생한다.
arr[1].concat("!"); // Error, 'number' does not have 'concat'
arr[5] = "hello"; // Error, Property '5' does not exist on type '[string, number]'.Enum
이넘은 기존의 C, Java에서는 흔히 쓰이는 타입이지만, JS에서는 없던 타입이다. 그렇다고 인터프리터 언어에는 없고 컴파일 언어에만 있는 타입이라는 건 아닌듯 하다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;이넘은 인덱스 번호로도 접근 가능하다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];특이한 점은 이넘의 인덱스를 변경이 가능하다는 것이다.
enum Avengers { Capt = 2, IronMan, Thor }
// 캡틴 아메리카 인덱스가 2 가 되었다. 자동으로 뒤는 밀린다!
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // ThorAny
기존 자바스크립트에서 타입스크립트로 코드 마이그레이션을 진행할 때 유용할 타입이다. 모든 타입에 대해서 허용한다는 의미를 가진다.
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];Void
C와 같은 언어에서는 매우 익숙한 언어이다.
변수의 타입인 경우 undefined와 null만 할당 가능해지고, 함수의 경우 반환값을 설정하지 않도록 하는 타입이다.
let unuseful: void = undefined;
function notuse(): void {
console.log('sth');
}Never
함수의 끝까지 도달할 일이 없음을 의미하는 타입이다.
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
while (true) {
}
}다음에는 함수에 대한 내용을 다뤄보자.
