[TypeScript] TypeScript란 & TypeScript 설치

https://codingapple.com/course/typescript-crash-course/

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다.

---

JavaScript Superset
TypeScript = JavaScript + Type문법

 

JavaScript는 Dynamic Typing을 제공하는 언어이므로 5-'3' 연산이 가능(JS가 알아서 숫자로 바꿔줌)

     ▷ 프로젝트 사이즈가 커질수록 이 점(자유도&유연성이 높은)이 단점으로 작용

 

TypeScript는 타입을 엄격히 검사

→ Type Script는 Error Message 퀄리티가 높다.

---

TypeScript 설치 및 사용

일반 HTML CSS JS 웹개발시 타입스크립트 사용

1. nodejs 설치(최신버전으로)

2. VScode 에디터 준비

3. 터미널 열기 및 명령어 입력

npm install -g typescript

4. 폴더 생성 및 VScode에디터에서 폴더 열기

5. index.ts 파일 생성

6. tsconfig.json 파일 생성 및 작성

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

• es3: 옛날 자바스크립트
• es5: 2010년 이후 자바스크립트 문법
• esnext: 최신 자바스크립트 문법

7. 터미널 오픈 및 명령어 입력

tsc -w

ts파일을 js로 자동으로 변환해줌 → "컴파일 한다"

이런 컴파일 옵션들을 tsconfig.json에 기입

※ .ts파일은 브라우저가 못읽음, js밖에 못읽음 → 고로, ts파일을 js로 변환해야 사용가능

 

 

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