타입스크립트_설치와 세팅

▶️ 타입스크립트를 쓰는 이유

• 타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는 자바스크립트의 대용품이다.
• JS와 TS 모두 완전 다른 언어는 아니기때문에 타입문법을 업그레이드해서 쓸 수 있다.

5-'3'//JS - Dynamic typing으로 에러발생X

5-'3'//TS -에러발생

• 자바스크립트는 타입에 다소 관대한 측면이 있다. 위처럼 숫자-문자를 연산해도 제지가 없기때문이다.
• 반면 타입스크립트는 이런것을 전부 에러로 잡아준다. 이는 1.긴 코드를 작성할때나 2. 다른사람이 짠 코드를 수정할때 도움이 된다.
• 타입스크립트는 타입룰이 엄격하여 자바스크립트보다 더 직관적이고 정확한 에러메세지를 출력해준다.

▶️ 일반 HTML, CSS, JS 웹개발시 타입스크립트 사용하기

1. Nodejs 최신버전, VScode 에디터를 설치한다.

2. VScode 에디터에서 터미널을 오픈한다. (상단메뉴의 Terminal - New Terminal)

3. 터미널에서 입력한다.

npm install -g typescript

타입스크립트 컴파일러라는걸 설치하는건데 컴퓨터마다 한 번만 하면 됩니다.

4. 코드짤 작업 폴더를 하나 만들고, 작업폴더를 에디터로 오픈한다.

5. 작업 폴더에 .ts 확장자로 끝나는 파일을 만들고 타입스크립트를 사용한다. 다만 웹브라우저에서 ts파일을 인식하지 못하기 때문에 변환하는 과정이 필요하다.

6. js파일로 변환하려면 에디터에서 Terminal을 새로 연 다음.

tsc -w

을 입력하여 .ts파일을 js파일로 변환한다.

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

---

▶️ REACT에서 Typescript 사용하기

1. 이미 작업 폴더 경로가 존재하는 경우

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

yarn add --save typescript @types/node @types/react @types/react-dom @types/jest

yarn 버전에 따라 선택하여 터미널에 입력해준다.

2. 새 프로젝트에 바로 적용하기

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

새 작업폴더에서 에디터와 터미널을 새로 오픈한 다음 입력해준다.

---

▶️ Vue에서 Typescript 사용하기

1.작업 폴더 경로에서 터미널을 오픈해준다.

vue add typescript

입력하면 라이브러리가 실행된다.

2.이렇게 lang 옵션을 켜두고 사용하거나 Vue프로젝트 내부의 tsconfig.json 파일을 만들어 설정도 자유롭게 할 수 있다.

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

---