[TypeScript] JavaScript vs TypeScript 및 TypeScript 설치방법

https://www.udemy.com/course/react-typescript-the-practical-guide/

위 Udemy 강좌에서 배운 내용을 정리하면서, 더 깊은 이해를 위해 내가 따로 조사한 내용도 같이 작성한다.

 

[ JavaScript vs TypeScript]

TypeScript Code

• Browser에서 직접 동작하지 않는다. 
• Extra type-safety를 제공하고 잠재적인 에러를 잡아내므로, 개발할 때 좋다.

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

JavaScript Code

• Browser에서 직접 동작한다.
• Extra type-safety를 제공하지 않으므로 개발용으로 이상적이지 않다. 대신 production 단계에서는 JS가 필요하다.

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

TypeScript 코드를 Broswer에서 동작시키려면 반드시 JavaScript로 먼저 컴파일(compile)해야 한다.

그러므로 TypeScript를 설치해야 하는데, 좀 더 정확하게 말하면, 바로 이 컴파일을 수행하는 TypeScript 컴파일러를 설치해야 한다.

 

[ TypeScript 설치]

1. Per-project 설치

TS의 official website(https://www.typescriptlang.org/)에서 딸 수 있는 아래 커맨드를 사용해서, 특정 project에만 TS compiler가 유효하게 할 수 있다.

# TS는 npm registry의 package "typescript"로 존재한다.
# npm, yarn, pnmp 같은 dependency manager를 사용해서 TS를 project에 다운로드한다.
# npm은 node.js를 설치하면 자동으로 설치된다. node.js는 offical site에 가서 다운받자.
npm install typescript --save-dev

# dependency manager들은 모두 lockfile을 지원하므로 team 단위로 동일 version의 TS를 사용할 수 있다.
# TS compiler를 아래 명령으로 실행한다.
#  npx는 node.js package(의 binary)를 execute하기 위한 tool이다.
#  npx [package]를 실행하면, package(의 binary)를 굳이 global하게 설치하지 않아도 실행할 수 있다.
npx tsc

 

2. Global 설치

# TS를 Global하게 설치한다.
npm install -g typescript

# 그러면 tsc 커맨드를 terminal 내에서 자유롭게 사용 가능하다.
tsc --version