TIL | Typescript_Setting_초기개발환경세팅

Typescript 왜 써야할까!??

Typescript의 장점은 먼저 type에대해 유연한 Javascript와 다르게
컴파일 단계에서 타입을 체크해주므로
Type의 오류를 실행 전단계에서 미리 점검하고 갈수있는
Type Safe Code 를 작성할수 있는 점이 있다.

---

Typescript 의 특징

객체지향 프로그래밍

• ES6클래스
• Interface 지원 : 클래스와 객체를 구조화
• 클래스 접근제한자 지원(public, protected, private) : 은닉성, 캡슐화와 같은 OOP를 구현하는데에 도움을 줌.

따라서 2020트렌드는 TypeScript라 할 수 있겠다.

---

VSC code에서 Typescript 사용하기

👉 TSlint 설치

---

TypeScrit 시작하기

nvm 버전을 8.x.x 이상으로 설정해준다.

nvm use 14.15.4

yarn 설치

npm install --global yarn

yarn init

typescript 설치

npm install -g typescript

또는

yarn global add typescript

---

파일 tsconfig.json 생성

1. compilerOptions

• target : Typescript를 어떤 버전의 JavaScript로 컨파일되고 싶은지를 알려줌
• SourceMap : source map 처리를 하고 싶은지 알려줌.

2. include : 어떤 파일들이 컴파일 과정에 포함되는지 Typescrip에게 알려줌. 포함할 파일의 배열을 적으면 됨. index.ts파일을 생성하고 include에 추가해줌
3. exclude : 컴파일 과정에 제외시킬 파일들 지정.["node_modules"]

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2015",
        "sourceMap": true    
    },
    "include": ["index.ts"],    
    "exclude": ["node_modules"]
}

tsc 명령어 : index.ts 을 컴파일 하여 index.js와 index.js.map 을 생성해줌

tsc

tsc 명령어대신 yarn start를 사용할 예정이며,tsconfig.json를 아래와 같이 수정해준다.

1. "start" : scripts를 생성해주고 yarn start를 실행할 시 node로 index.js를 실행하게한다.
2. "prestart" : yarn start를 실행하기전에 index.ts를 index.js로 컴파일 하는 과정이 선행되어야 하므로 tsc명령문이 선행되도록 한다.

{
  "name": "TypeScript",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/melody-story/TypeScript.git",
  "license": "MIT",
  "scripts": {
    "start" : "node index.js",
    "prestart": "tsc"
  }
}

---

tsc-watch 설치

1. ⭐️ npm으로 tsc-watch설치하는 방법
2. npm i tsc-watch
3. yarn으로 tsc-watch설치하는 방법

yarn add tsc-watch --dev

왜 tsc-watch를 사용하는 것인가?

원래는 ts코드가 바뀔 때마다 js로 컴파일 한 뒤, node로 실행하는 과정을 반복해야했지만,
tsc-watch를 사용하면 ts코드가 바뀔때마다(save 할때 마다) 자동으로 컴파일 해준 뒤 js로 실행시켜준다.

쉽게 말해 TypeScript버전 nodemon입니다.

---

1. dist, srt폴더 생성

2. package.json 파일을 수정

• "start" : "tsc-watch --onSuccess(컴파일이 성공했을 때) \" 이 명령어를 실행해라 \" "

{
  "name": "TypeScript",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/melody-story/TypeScript.git",
  "license": "MIT",
  "scripts": {
    "start": "tsc-watch --onSuccess \"node dist/index.js\""
  },
  "devDependencies": {
    "tsc-watch": "^4.5.0"
  }
}

3.tsconfig.json 파일을 수정

• "outDir" : "dist" - 컴파일 된 JavaScript 파일이 모일 경로를 설정해 줍니다.
• "include" : ["src/**/*"] - TypeScript 파일이 모여있는 경로를 설정해 줍니다.

//src안의 모든 ts파일을 js로 컴파일 해서 dist폴더 않에 넣겠다는 뜻
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2015",
        "sourceMap": true,
        "outDir": "dist"    
    },
    "include": ["src/**/*"],    
    "exclude": ["node_modules"]
}