[TypeScript] 타입스크립트 기본 설치와 환경 세팅

타입스크립트 기본 설치와 환경 세팅에 대해 알아보자.

 

Typescript 설치/세팅

 

Node.js 최선버전을 설치하기.

 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

최신버전 아니면 TS 컴파일러 설치하는데 에러가 날 수 있다.

 

 

에디터 터미널에 다음과 같이 입력한다.

npm install -g typescript

 

*전역(global) 설치 하는 거라 컴퓨터에 한 번만 설치하면 된다.

 

 

이제 작업폴더에 .ts 파일을 생성해 코드를 짤 수 있다.

 

근데 웹 브라우저는 js 파일만 읽을 수 있기 때문에

컴파일 작업 (타입스크립트 -> 자바스크립트 변환 작업)이 필요하다.

 

tsconfig.ts라는 파일을 하나 만들어서 다음과 같이 코드를 적어준다.

js로 컴파일 할때의 옵션을 설정하는 코드이다.

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

 

 

 

ts파일을 js파일로 컴파일(변환) 하기 위해선 다음과 같이 입력한다.

tsc -w

 

계속 켜두는 동안 자동으로 js 파일로 컴파일 해준다.

html 같은데서는 무조건 js 파일을 사용해야 코드가 읽힐 수 있다.

<script src="index.js"></script>

 

 

React 에서 Typescript 사용하기

 

새로 React 프로젝트 만들때

새로운 작업폴더를 열고 에디터 터미널에 다음과 같이 입력해 주면 된다.

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

 

기존의 React 프로젝트에 설치할때

작업폴더 경로 터미널에 다음과 같이 입력해준다.

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

 

코드 안정성과 편리성을 생각한다면 처음부터 typescript 기능을 넣고 react 프로젝트를 생성하는 것을 권장한다.

 

 

 

Vue 프로젝트에서 Typescript 사용할 경우

 

작업폴더 경로 터미널에 다음과 같이 입력해준다. (typescript 라이브러리 설치)

vue add typescript

 

아래 코드처럼 vue 파일에서도 typescript를 쓸 수 있다.

<script lang="ts">

</script>