코딩 농장/웹 프로그래밍

TypeScript 첫번째

GreenBNN 2022. 8. 12. 16:42

JavaScript 를 쓰다보면 에러에 대한 설명이 많이 불친절한 것을 볼 수 있다.

또한 2 + '3' 을 한다면 동적으로 계산해주는 편리성을 보여주지만 의도한 결과를 내어주진 않는다.

이러한 것들을 C 나 C++ 처럼 조금 strict 하게 더 비동적으로 만들어 프로젝트를 진행할 수 있도록 한 것이 TypeScript 라고 한다.

TypeScript 설치

npm install -g typescript 

위 코드를 이용해 터미널에서 설치해준다.

TypeScript 는 js 를 조금 변형한 언어이다. 확장자는 .ts 인데 우리가 나중에 사용할 때에는 "tsc -w" 로 .ts 파일을 .js 로 바꾸어 주는 과정이 필요하다.

이를 위해 tsconfig.json 파일을 프로젝트에 추가해놓으면 된다.

tsconfig.json

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

프로젝트 파일들

json 파일을 만들어 놓고 tsc-w 명령어로 ts 파일을 js 파일로 바꾸어 준다. 그 후 html 파일에서 js 파일을 쓰겠다고 선언해주면 된다.

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

 


마찬가지로 vue 환경에서 typescript 를 쓰는 방법이다.

명령어를 이용해 설치를 해주고

 script 에 lang="ts" 를 이용해 ts로 쓴다는 것을 적어준다.