[Typescript] TS, 다시 처음부터 읽기 (2)

그렇다면 자바스크립트를 타입스크립트처럼 쓸 수는 없을까? 

물론 있다. 

 

JS Doc을 이용해서 타입을 지정할 수 있다. 

그럼 자바스크립트만 써도 되겠네?! 

정답은 NO. 타입스크립트와의 차이점이 아직도 있다. 

 

그 이유는 TS를 먼저 보면 

문자열 시 오류 출력

But 자바스크립트는?

오류가 뭐예요? 먹는거예요?

문자열이 들어가도 오냐오냐 받아준다. 

 

 

단, 이때 주석처리를 한 다음에 ts-check라는 기능을 주게 되면, 

그제서야 문자열을 지적해준다.

즉, JS Doc과 ts-check를 이용해서 어느정도 자바스크립트의 타입을 어느정도 보완할 수는 있다. 

그러나 이는 오히려 손이 더 많이 가고, 재활용 등의 부분은 어렵기에.... 

그냥 타입스크립트를 쓰는게 가독성 및 시간 활용에 더욱 좋다! 

---

타입스크립트를 시작하기 : 

 

그런데 타입스크립트를 아직은 브라우저에서 바로 읽어올 수는 없기 때문에, 컴파일의 과정을 거쳐야한다. 

컴파일? 그게뭔데? 

 ts파일을 js파일로 변환하는 작업 (보통 컴파일링이란 고수준 언어를 저수준 언어로 변환하는 과정을 의미한다.)

 

 

우선 간단한 ts 파일을 만들자.

1.  index.ts 

function sum2(a: number, b: number): number {
  return a + b;
}

sum2(10, 20);

 

2. 터미널을 켜서 변환해보자

2-1. 그 전에 node가 설치되어 있는지 확인한다. (없다면 설치)

node -v

2-2. 타입스크립트 글로벌 설치 

(npm , yarn , pnpm 다 가능할 듯 하지만, 가장 무난한 npm으로 설치.)

npm i typescript -g

 

* npm에 대한 소개 (출처)

NPM Module Install | 웹팩 핸드북

NPM 전역 설치

NPM 전역 설치는 위와 같이 프로젝트에서 사용할 라이브러리를 불러올 때 사용하는 것이 아니라 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용합니다.

npm install gulp --global

라이브러리가 설치되고 나면 이제 명령어 실행 창에 해당 라이브러리 이름을 입력했을 때 명령어를 인식합니다.

gulp

전역 설치 명령어 옵션 --global 대신 -g를 사용해도 됩니다.

 

 

3. tsc [내가만든파일].ts 

tsc index.ts

tsc를 마치고 나면, 똑같은 이름의 js파일이 생성되면 성공! 

 

그런데 이렇게 매번 ts파일을 js로 컴파일 하는 것? 반복적이고 귀찮다...

 

이런 일을 개발자들이 가만히 두었을 리 없기 때문에 

 

우린 이미 만들어진 webpack같은, 즉 web task 매니저들을 활용하면 된다. 

 

Documentation - tsc CLI Options

 

또한, tsc를 할 때 단순 컴파일 뿐 아니라 여러 옵션들을 설정할 수 있는데, 

이를 tsconfig.json에 지정해두면 된다. (json이니까, 키밸류 형태로 지정)

== 프로젝트를 타입스크립트가 어떻게 이해할 지 정의

//  tsconfig.json
1. allowjs : js파일 허용하겠다
2. checkjs : ts-check같이 타입검사 기능을 js에 녹여내겠다 
3. noImplicitAny : any타입이라도 넣어놓게 만들겠다 (최소한의 타입 지정이 필요)

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  }
}

 

여기서 또 오류가 발생할 수 있다 (내 얘기)

json schema for the typescript compiler's configuration file error

 

[너 또 오류나? tsconfing.json 오류] json schema for the typescript compiler's configuration file error

위의 링크를 따라가서 간단히 해결 (outDir)

 

 

추가 tsc 설정을 하고싶다면?