2. 타입스크립트 세팅

프로젝트 초기설정

npm init -y

다음과 같은 package.json이 생성된다.

Wrote to /Users/binary/Code/nbc/ts/2/package.json:

{
  "name": "2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

타입스크립트 설치

npm install typescript   <-- 전역설치가 아닌 해당 프로젝트에서만 설치
npm install -g typescript   <-- 전역적으로 타입스크립트를 설치

 

타입스크립트 컴파일러 설치

npx

npm 5.2버전부터, npx가 기본 패키지로 제공되기 시작했습니다. npx도 모듈의 일종입니다. 이 모듈은 npm을 통해 모듈을 로컬에 설치했어야만 실행시킬 수 있었던 기존 문제점의 해결책이 되었습니다. 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 모듈이 돌아가고 있습니다.

npx는 어디에 효과적일까? 

create-react-app같은 보일러 플레이트 모듈에 효과적 입니다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어집니다. 어짜피 최신 버전만을 사용할 테니까요.

 

npx tsc --init

다음과 같은 tsconfig.json이 생성된다.

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해줍니다. 신버전을 원하면 es2016, esnext 이런 것도 입력할 수 있다. 

 

'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳입니다. commonjs는 require 문법

es2015, esnext는 import 문법을 사용합니다. 

 

그래서 어느정도 IE 호환성을 원하시면 es5, commonjs가 국룰이다. 근데 정말 신버전 자바스크립트만 표현가능한 그런 문법들이 있는데 

(예를 들어 BigInt() 이런 함수와 bigint 타입) 그런 것들은 esnext 등으로 버전을 올려줘야 사용가능합니다. 

---

TS Playground

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript