[TypeScript] 타입스크립트 시작

개발환경

Visual Studio Code

플러그인 설치

1. File Icon Theme - Material Icon Theme
2. Color Theme - Night Owl
3. 문법 체크 - TSLint, ESLint
4. 실습 환경 보조 - Live Server : 라이브 서버를 이용하면 파일 수정 후 저장 시 수정된 내용이 바로 저장된다.
5. Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrain IDE Keymap 등

• 필수설치 : TSLint, ESLint, Live Server

Ctrl + Shift + p (window) / cmd + Shift + p (맥) 단축키로 테마 적용

> color theme > night owl
> file icon theme > material Icon Theme 

타입스크립트란?

자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장된 언어라고 볼 수 있다.

자바스크립트와는 달리 브라우저에서 실행하기 위해서는 파일을 한 번 변환해줘야 하는데 이는 컴파일(compile) 이라 한다. 자바스크립트 파일을 .js로 생성하는 것처럼 타입스크립트는 .ts의 형식으로 생성하면 된다.

왜 타입스크립트를 쓰면 좋을까?

1. 에러를 사전에 방지할 수 있다.

// math.ts 

function sum(a: number, b: number): number {
  return a + b;
}

// Argument of type 'string' is not assignable to parameter of type 'number'. 
// string을 number에 할당할 수 없다.
var result = sum(10, '20'); // (X) 

typescript에서는 변수 result 에 대한 타입이 지정되어 있기 때문에 의도하지 않은 코드의 동작을 사전 예방할 수 있다.

2. 코드가이드 및 자동완성

// math.js 

function sum(a, b) {
  return a + b;
}

var result = sum(10, 20);
result.toLocaleString(); // toLocaleString() : 숫자의 사용 언어에 따른 표현을 포함한 문자열 반환

위는 sum() 함수를 이용하여 두 숫자의 합을 구한다음 toLocaleString() 함수를 사용한 코드이다.

자바스크립트에서는 변수 result 에 대한 타입이 지정되어 있지 않으므로 Number에서 제공하는 내장함수인 toLocalString()을 일일이 작성해야 하며, 오탈자를 미리 방지할 수 있도록 IDE의 도움 또한 받지 못했을 것이다.

반면, 타입스크립트에서는 변수 result에 대한 타입이 지정되어 있어 VSCode의 해당 타입에 대한 내장함수를 미리보기로 띄워서 볼 수 있다.

자바스크립트를 타입스크립트처럼 코딩하기

// @ts-check

/**
 *
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 */

function sum(a, b) {
  return a + b;
}
sum(10, '20');

1. JSDoc 주석을 사용하여 param 타입을 명시해준다.
2. @ts-check 어노테이션을 사용하여 타입 검사를 하도록 한다.

그러나 이러한 방식보다는 타입스크립트를 바로 작성하는 것이 좋다.