Typescript에 관한 기초 정리 - (1)

개인적으로 공부한 타입스크립트에 대한 정리입니다.

최소한으로 보기 위한 예제만 정리해서 자세한 사용법은 공식 문서를 참조하시는 게 도움이 됩니다.

Typescript?

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다.

대규모 애플리케이션을 개발하는 데에 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 MS사에서 개발한 언어로, ES5 문법을 그대로 가져다 사용할 수 있습니다.

뿐만 아니라 ES6 문법을 위한 Babel과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6 문법을 사용할 수 있습니다.

 

Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.

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

Enum

특정 값(상수)들의 집합을 의미합니다. 인덱스 번호로도 접근이 가능합니다.

enum Avengers { Capt, IronMan, Thor }
let hero : Avengers = Avengers[0];

Any

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

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

Void

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

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

Never

절대 발생할 수 없는 타입을 나타냅니다. 함수에 실행할 시 마지막에 도달할 수 없습니다.

function neverEnd() : never {
	while(true){
	}
}

Union Type

유니온 타입이란 자바스크립트의 OR(||)연산자와 같이 A이거나 B이다라는 의미의 타입입니다.

function logText(text : string | number) {
// ...
}

위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입 모두 올 수 있습니다.

 

다만 논리적으로 본다면 유니온 타입은 OR이 아닙니다. 코드를 보면 더 쉽게 이해할 수 있겠죠?

interface Person {
  name : string;
  age : number;
}

interface Developer {
  name : string;
  age : string;
}

function introduce(someone: Person | Developer) {
  someone.name; // O
  someone.age ; // X type error
  someone.skill; // X type error
}

introduce 함수의 매개변수 someone에 person과 developer 유니온 타입을 정의했습니다. 

유니온 타입이 생각하는 OR이 맞다면 age와 skill은 number와 string 두 가지의 타입을 가진다고 생각하겠죠.

 

하지만 아닙니다.

타입스크립트의 관점에서는 introduce함수를 호출하는 시점에 Person타입이 올지, Developer 타입이 올 지 알 수 없습니다. 

따라서 어느 타입이 들어오든 간에 오류가 안나는 방향으로 타입을 선언하게 됩니다.

결과적으로 someone 파라미터엔 Person과 Developer의 두 타입에 공통적으로 들어있는 속성인 name에만 접근할 수 있게 됩니다.

 

따라서 유니온 타입을 만들 때에는 정확히 어떤 타입인지를 검사해야 합니다. 이것을 타입 가드라고 합니다. 타입 가드는 특정 범위 안에서 런타임 검사를 수행하는 표현식입니다.

 

function introduce(someone : Person | Developer) {
	if("name" in someone) { //객체 내부에 특정한 프로퍼티가 있는지 확인
		console.log(name);
	}
}

//someone의 타입이 developer인지 확인하는 user-defined type guard 함수
function isDeveloper(someone : Person | Developer ) : someone is Developer {
	return ( someone as Developer ).skill !== undefined
}

if(isDeveloper(Olive)) {
	console.log(Olive.skill);
} else {
	console.log(Olive.age);
}

타입 가드는 컴파일러가 타입을 좁혀서 원하는 타입을 보장할 수 있게 합니다.

자바스크립트에 이미 존재하는 typeof, instanceof 등을 통해서 type guard를 만들 수도 있죠.

isDeveloper 같은 함수를 user defined type guard라고 하는데, 이건 나중에 좀 더 심화과정으로 알아보도록 하겠습니다.