[TypeScript] 타입스크립트 사용하기 (for JS, React, Vue)

타입스크립트 사용 이유

자바스크립트의 경우 타입에 대해 관대하다. 때문에 대형 프로젝트에서 남이 짜던 스크립트를 수정해야할 경우 오류가 발생하면 애매모호한 오류 메시지로 인해 오류를 찾아내기 힘들 수 있다. 생각보다 타입과 관련된 버그가 많이 발생한다고 한다.

반면 타입스크립트를 사용하면 타입 룰이 엄격해진다. 타입스크립트가 내보내는 오류 메시지는 상세하고 친절하기 때문에 오류의 원인을 찾아내기 쉽다.

타입스크립트 설치하기

📌 타입스크립트 설치 전 반드시 최신 Node.js를 설치한다.

JavaScript 환경

1) npm을 이용해 타입스크립트 컴파일러를 컴퓨터에 설치한다.

npm install -g typescript

React 환경

1) 리액트 작업 폴더 경로에 npm을 이용해 TypeScript를 설치한다.

✏️ 새로 리액트 설치 시 타입스크립트도 같이 설치하는 경우 :

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

✏️ 이미 리액트 작업 폴더가 있는 경우 :

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

• 작업폴더에 tsconfig.json 파일 생성

• tsconfig.json 파일 생성 후 아래와 같이 작성하여 세팅

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "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"
  ]
}

Vue 환경

1) 뷰 작업 폴더 경로에 npm을 이용해 TypeScript를 설치한다.
vue add typescript

2) script 태그에 lang 옵션을 타입스크립트로 설정한다.

<script lang="ts">
  ...
</script>