[TypeScript] 타입스크립트 시작하기!

TypeScript

타입스크립트를 사용하는 이유

간단하게 말하면 안정성을 올려주기 때문입니다.
코드에 타입을 지정해줌으로 인하여 버그가 발생할 일을 낮추고,
런타임에러의 발생을 미리 방지해주며, 생산성을 올려주기 위해서 입니다.

타입스크립트 설치

💻 일반 HTML CSS JS 웹개발 시

0. node.js 및 VScode 에디터 설치

우선 node.js가 설치가 되어있어야 합니다. (최신버전)

1. 터미널 오픈 후 Type Script 설치

> npm i -g typescript

2. 폴더 및 파일 생성

코드를 짤 폴더를 만들고, 폴더에 .ts로 끝나는 파일을 만들어줍니다.
그리고 .ts파일에 코드를 작성해주면 됩니다.

3. tsconfig.json 생성

여기서 웹브라우저는 .ts 파일 자체는 알지 못하기 때문에 tsconfig.json 파일을 생성하여 .js파일로 변환해야합니다.

> tsc --init // 터미널에 코드 입력으로 tsconfig.json 생성 가능

// tsconfig.json
{
  "compilerOptions" : {
    "target": "es6",
    "module": "commonjs", 
  }
}

4. 내용 변환

터미널을 열고 tsc -w를 입력하면 자동으로 변환해줍니다.

> tsc -w

5. 타입스크립트 파일 사용

HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 .ts가 아니라 변환된 .js 파일을 사용하면 된다.

<script src="변환된파일.js"></script>

💻 React 프로젝트에서 Typescript 사용 시

1. 이미 있는 React 프로젝트에 설치하는 경우

작업폴더의 경로에서 터미널을 열고 코드입력

> npm i --save typescript @types/node @types/react @types/react-dom @types/jest

2. 새로운 React 프로젝트에 설치하는 경우

새로 작업할 폴더를 하나 만들고 해당경로에서 터미널을 오픈 후 코드 입력

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

참고

Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) - https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/
[TS] TypeScript 시작하기 - https://velog.io/@altjsvnf/TS-TypeScript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0