[개발환경] TypeScript 타입

자바스크립트는 자바와 달리 자료형이 엄격하지 않다. 

자바는 코드를 작성할 때 자료형을 엄격하게 관리한다. 

예를 들어 int one = "one"; 이라고 하면 컴파일 단계에서 이미 에러가 나서 실행이 되지않는다. 

반면에 자바스크립트는 컴파일 단계가 없다. 

만약에 const str = "String" 이라고 해놓고 Math.log(str)과 같은 넘버형 연산을 하면 

NaN을 출력한다. 

 

그런데 개발규모가 큰 프로젝트에서 개발단계에서 저걸 못잡는다면 

실행단계에서 하나고치고 실행하고 하나고치고 

하는 아주 슬픈 일이 일어난다. 

이를 방지하기 위해 타입체크를 하고자 하여 나온 도구가 TypeScript나 flow같은 아이들이다. 

TypeScript는 타입이 정의된 javascript이다. 

타입스크립트언어로 코드를 쓸수도 있지만 

타입스크립트를 사용해서 javascript코드의 타입체크를 할 수도 있다. 

 

1. VS코드에서 javascript를 위한 TypeScript 설치 및 사용하기

1) javascript를 위한 typescript 설치하기 

VS코드에 npm을 이용해 TypeScript를 깔아보자 

터미널에 아래 명령어와 옵션을 입력한다. 

npm install --save-dev typescript   

typescript를 설치하고 개발용 devdependencies에만 의존성을 저장한다.

설치를 하고 package.json파일을 보면 

 

 devDependencies에 typescript가 추가된것을 확인할 수 잇따.

 

2. javscript에서 TypeScript 사용

 

사용전_타입에러가 나지 않는다.

코드 상단에 아래의 코드를 한 줄 추가하면  위 사진과 같이 type에러를 체크할 수 있다.

// @ts-check

이 때, 에러메세지의 ts(2345)는 typescript에러라는 것을 표시한다. 

 

2.. node개발환경에서 typescript 설치 및 사용

1) node를 위한 typescript설치하기

node에서 자주 쓰이는 데이터 타입, 객체들을 위한 typescript

@types/node

npm install --save-dev @types/node

위의 명령어로 node를 위한 typescript를 설치하면 devDependencies에 @types/node가 추가된 걸 확인할 수 있다.