[TypeScript] TS 시작하기

#0. TypeScript란?

- 자바스크립트에 타입이 추가된 언어

- 자바스크립트에 명시적으로 타입을 선언해주는 언어다.

 

1) 자바스크립트 쓰지 왜 굳이 타입스크립트 씀? 

- 자바스크립트의 유연한 타입 변환이 버그를 일으키는 경우가 종종 있어서 씀

- 자바스크립트는 Dynamic Typing를 제공한다. 그렇다보니, 다음과 같은 상황이 js 에서는 연산이된다. 5는 number type이고, 3은 string type 이지만, 자바스크립트의 Dynamic Typing에 의해 타입 변환이 일어나, 숫자로 연산이 되는거다.

console.log(5 - '3') // 실행결과 >> 2

- 추가적으로 자바스크립트는 실행되는 시점(런타임)에 오류를 확인 할수있다 .(내가 다 만들고 런타임되는 시점에!)

그런데 타입스크립트는 컴파일 시점에,  내가 ts를 컴파일할때(작업할때는 저장할때) 오류가 걸러져서 오류발생을 더 예방할 수 있다. 

 

#1. 셋팅하기

1) node.js 설치

 

2) 터미널에서 다음 명령어 입력

npm install -g typescript

 

3) 작업폴더에 .ts로 끝나는 파일 만들고 타입스크립트 사용

 

4) tsconfig.json 생성 후 다음 내용 작성

- ts를 js로 컴파일 해주는 파일임

<< 멩 왜 변환함? 의문이 든다면 아래를 펴세요

브라우저에서는 .ts파일 그대로 못읽음. 브라우저는 js만 읽을수 있음. 우리는 걍 타입을 명시적으로 정해주기 위해, ts로 파일 만들고,  js 로 컴파일 해서 브라우저에서 읽는거다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

* tsconfig 전체 옵션은 다음 링크에서 확인 가능

https://www.typescriptlang.org/tsconfig

TSConfig Reference - Docs on every TSConfig option

 

5) 터미널에서 tsc -w 입력하면 .ts를 컴파일한 .js 파일이 잘 생성될 것이다. 

- 터미널에서 tsc -w입력시 오류난다면 터미널을 powershell 이 아닌, Command Prompt로 바꿔보자

tsc -w