1. Visual Studio 설치

• VSC 다운로드 후 Extension에서 ‘prettier’, ‘eslint(코드 품질 검사)’, ‘lath Intellisense(파일 참조)’, ‘bracket Pair Colorizer(괄호끼리 색 맞춤)’, ‘Material Icon Theme(아이콘)’ 등을 설치하는 것을 추천한다.

2. 타입 스크립트 설치

• typescript 설치하기

  JavaScript With Syntax For Types.

  • Try TypeScript now → On your computer 클릭한다.

• npm을 설치

  • NPM : Node Package Manager

    • 타입 스크립트를 설치하기 위한 도구이다.

  • NPm을 설치하기 위해서는 Node.js를 설치해야 한다.

    • Node.js란?

      • 브라우저 밖에서 자바스크립트를 실행할 수 있는 runtime 환경

        다운로드 | Node.js

    • Node.js 설치 후 TypeScript를 설치해준다.

      npm install -g typescript
      

  • 이제 컴파일러를 다운 했기 때문에 tsc 명령어를 사용해서 타입스크립트를 자바스크립트로 변환 가능하다.

3. 타입 스크립트 파일 만들기

• newFile → app.ts → 코드를 입력한다.
  • 확장명이 ts이다.
• 코드를 컴파일한다.

  • 컴파일 한다.

    tsc app.ts
    

  • 이제 js를 run한다.

    node app.js
    

  • 자동으로 ts파일을 js 파일로 근처에 변환

    tsc -w
    

4**. React 프로젝트에서 Typescript 사용할 경우**

1. 이미 있는 React 프로젝트에 설치
   • npm install --save typescript @types/node @types/react @types/react-dom @types/jest
2. React 프로젝트를 새로 만들기
   • npx create-react-app my-app --template typescript

5. +추가 내용

• Duplicate function implementation.ts 에러 메시지가 뜬다면?

  • typescript configuration 파일을 추가해준다.

    tsc --init
    

  • 타입스크립트 파일 내에 변동 사항이 생길 때마다 자바스크립트에도 업데이트 해준다.

    tsc -w app.tx
    

• tsc

  • 타입 스크립트 컴파일러다.