[TS] TypeScript Setting / tsconfig.json

 

 

 

 

---

 

 

 

 

Install

 

 

npm install -g typescript

 

 

에러발생

  1. node 최신버전 설치

  2. 보안에러

sudo npm install -g typescript

 

 

 

 

 

Setting

 

 

1. filename.ts 파일생성

2. js파일로 compile 

tsc filename.ts

 컴파일 이후 자동으로 변경사항 발생시 컴파일되게 하려면 watch mode 실행

tsc -w

 

3. html 파일 등에서 ts 작성코드 사용하려면

<script src='filename.js'></script>

 

 

 

 

 

---

 

 

 

 

tsconfig.json

 

 

 

compile 세부 설정 :  tsconfig.json 파일 생성

tsc --init

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

target : ts파일을 어떤 버전의 js로 바꿀지 지정

module : js파일간 import 문법 구현할 때 어떤 문법 쓸지

                 commonjs는 require문법

                 es2015, esnext는 import문법

 

 

 

> react에서의 ts 설정

{
  "compilerOptions": {
    "target": "es5",
    //default ts library
    "lib": [  //defalut dom type 설정
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,    //타입 엄격하게 설정
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

 

 

 

---

 

 

 

 

 

 

 

React

 

 

React에서 사용할 경우

 

1. 이미 있는 react 프로젝트에 설치

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

   .js 파일을 .ts로 바꿔서 이용가능

 

 

 

2. 새로 react 프로젝트 만들경우

npx create-react-app my-app --template typescript