타입스크립트 기본 타입 알아보기

타입스크립트는 자바스크립트에 타입이 추가된 자바스크립트의 확장언어이다. 요즘 현업에서 많이 사용할 정도로 인기 있는 언어라고 할 수 있는데 기본 자바스크립트는 일반적인 C언어나 Java처럼 자료형이 존재하지 않아 속성 변경이 쉬우면서 잘못을 인지하는 것이 어렵다는게 특징이다.

그래서 이 문제를 해결하고자 TypeScript가 등장했는데 기본적으로 변수에 타입을 지정해주면서 코드를 추적할 수 있도록 도와준다. 또한 튜토리얼이 잘 정리되어있어 실전프로젝트가 끝나면서 공부를 시작해보고 싶었다.

타입스크립트 기본 타입

타입스크립트에는 Boolean, Number, String, Array, Tuple, Enum, Any, Void, Null, Undefined, Never, Object가 있는데 지금부터 하나하나 알아보려고 한다.

Boolean(불리언)

boolean은 true, false값을 나타낸다. 아래와 같이 : 을 사용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입표기라고 한다.

let isLoggedIn: boolean = false;

Number(숫자)

타입이 숫자이면 아래와 같이 선언한다.

let num: number = 10;

String(문자열)

자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용한다.

let str: string = 'hi';

Array(배열)

타입이 배열인 경우 아래와 같이 선언하면 되는데 두가지 방법이 존재한다.

let arr: number[] = [1,2,3];

let arr: Array<number> = [1,2,3];

Tuple(튜플)

튜플은 배열의 길이가 고정되어 있고 각 요소의 타입이 지정되어있는 배열형식을 의미하는데 만약 정의하지 않은 타입, 인덱스로 접근하게 될 경우 오류가 난다.

let arr: [string, number] = ['hi', 10];

// Error
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와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값들의 집합을 의미한다. 이넘은 인덱스 번호로도 접근할 수 있으며, 만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다.

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 }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

Any

기존에 자바스크립트로 구현되어있는 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입으로 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖는다.

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

Null & Undefined

타입스크립트에서 undefined, null은 각각의 타입을 가진다. 기본적으로 null과 undefined는 모든 타입의 하위 타입이다.

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지니는 타입이다. 즉, 절대 발생할 수 없는 타입을 말한다.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}