[TS] 타입스크립트 환경설정

 

오픈 API를 가져와서 hacker news라는 사이트를 만들어 보았다.

 

📰 https://cool-tartufo-8224ab.netlify.app/

HN client

 

바닐라자바스크립트로 작성한 코드에 타입스크립트를 적용해보도록 하자.

 

 

타입스크립트 적용방법

타입스크립트를 사용하려면 환경설정을 해주어야 한다.

간단하게 app.js로 되어있던 파일을 app.ts로 바꿔준다.

그다음 tsconfig.json이라는 설정 파일을 만들어준다.

타입스크립트는 실제로 트랜스 파일러여서 브라우저에서 실행시키려하면 

자바스크립트로 변환을 시켜줘야한다. 자바스크립트로 변환하는 과정에서 여러가지 옵션을 줄 수가 있는데

이과정을 컴파일이라고하고, 여러가지 옵션들을 줘서 타입스크립트의 기능이 어떻게 활성화되고

어떤 것들은 비활성화할지를 설정해놓고 사용할 수 있다.

 

 

https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options

Documentation - tsc CLI Options

 

공식문서를 살펴보면 굉장히 많은 속성들을 제공하고 있다. 추후에 디테일한 조정이 필요하면 그땐,

공식문서를 깊이있게 공부하면 좋을 것 같다.

 

 

tsconfig.json 옵션 설정

{
  "compilerOptions": {
    //여러가지 옵션을 줄 수가 있음
    "strict": true, //타입스크립트의 기능을 얼마나 엄격하게 적용해서 변환시킬 것인가
    "target": "ES5", //자바스크립트 버전 몇의 문법 체계를 쓸지 옵션, 에크마스크립트5
    "module": "CommonJS", 
    "alwaysStrict": true,
    "noImplicitAny": true, //명확하게 이 타입이 어떤거다라고 기술해주는 기능
    "noImplicitThis": true,
    "sourceMap": true,
    "downlevelIteration": true
  }
}

 

마지막으로 tsconfig.json 옵션으로 설정했던 'sourecMap'이라는 설정을 알아보자.

브라우저에서 앱을 실행했을때 브라우저는 자바스크립트 언어밖에 알지못하기때문에

타입스크립트 파일은 브라우저가 알지못하는 파일이다.

우리는 코드를 타입스크립트로 작성하고 실제 실행은 자바스크립트로 하게 되는데

만약에 타입스크립트 코드에 오류가 생겼다면?  타입스크립트로 작성한 파일에서 문제를 발견하기는

쉽지않을 것이다. (타입스크립트=> 자바스크립트로 컴파일 해놨기때문)

그럴 때 실제 브라우저에서 우리가 작성했던 원본코드(타입스크립트)를 보여주면서 문제점을 찾을 수 있게

도와주는 기능이다.  (소스의 지도같은 것)

 

실제로 개발자도구를 열어보면?

 

소스에 app.ts 파일이 보인다. 

타입스크립트 코드가 온전히 드러나며

이 상태에서 문제점을 발견하고 확인할 수 있게하는 기능이다.

개발 환경과 실행 환경을 일치시켜주는 설정이다.