타입스크립트 - 초기설정

들어가며

• vite, next, cra와 같은 것들로 리액트를 진행할 때는 커맨드로 쉽게 타입스크립트를 시작할 수 있다. (물론, 타입 환경설정은 내가 필요한 것들로 다 맞춰줘야한다) 하지만 바닐라 자바스크립트를 쓸 때는 초기 세팅을 해줘야한다.
• 타입스크립트 환경을 구성할 때 tsconfig.json에 컴파일러 옵션을 설정해야한다. 이 컴파일러 옵션들이 어떤게 있는지, 자주 쓰이는 옵션까지 함께 알아보자.

---

npm init으로 package.json을 초기화 한 후, 타입스크립트를 설치해볼 수 있다.

npm i @types/node

• node에서 기본적으로 제공하는 타입의 정의를 사용할 수 있다.

sudo npm i typescript -g

• tsc를 실행하기 위해 설치하는데, sudo 와 g 를 통해, 이 섹션 뿐 아니라 다른 여러곳에서도 자동으로 쓸 수 있게 전역 설치 해주었다.
• 이렇게 설치하면 터미널 창에 tsc src/index.ts 와 같이 치면 컴파일 된 자바스크립트 파일을 얻을 수 있는데, (예를 들어 index.ts → 컴파일 되면 index.js가 나온다!) 매번 이렇게 하나하나씩 수정하고 컴파일 다시 해서 index.js 같이 컴파일 된 파일을 들여보는 게 어려우니(컴파일된 index.js 는 node src/index.js 와 같이 터미널에 치면 된다) 아래의 명령어를 쓴다.

sudo npm i ts-node -g

• 이건 알아서 자바스크립트로 컴파일 하고, 그 결과를 바로 터미널 창에 보여주는 친구다. 위의 불편한 일을 한 번에 해결해주는 친구
• 사용은 ts-node src/index.ts 와 같이 터미널창에 입력하면 node src/index.js 와 같은 결과를 얻을 수 있다.

타입스크립트 컴파일러 옵션 설정하기

• 컴파일러 옵션은 얼마나 타입 오류를 엄격하게 검사 할 지, 자바스크립트 코드 버전 어떻게 할 지 등등을 설정할 수 있다.

tsc --init

• 타입스크립트 초기 설정 파일을 만들어준다. tsconfig.json 파일이 생성됨.

옵션 알아보기

"include" : []

• "include" : ["src"]
  src 폴더 안에 있는 모든 타입스크립트 파일을 컴파일 할 수 있다.
• 기존에는 tsc src/index.ts 이렇게 하면 index.ts 가 index.js로 컴파일 됐다.
• 그런데 파일이 한 100개 있으면? 일일이 치는건 바보같은 일.
• include로 설정하고 터미널에 tsc 만 입력해도 src 안에 모든 ts 파일이 js로 컴파일 되는 걸 볼 수 있다.

"target" : "ES5 (설정)"

• 타겟 옵션은 생성되는 js 파일의 버전을 설정해줄 수 있다. 이게 왜 필요할까?
  • 예전 서버 환경같은곳에서는 최신 문법을 사용 못하니 예전 버전을 설정해줘야 할 때가 은근 있기때문
• include와는 달리 compilerOptions 라는 객체 안에 작성하는데, 이유는 타입스크립를 변환하는 과정이나, 타입 검사등의 상세한 설정을 할 때에는 compilerOptions 안에 작성한다.

//예시 tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext"
  },
  "include": ["src"]
}

"module" : "ESNext"(설정)

• target과 유사하다. 우리가 만들 프로젝트가 이전 문법을 지원하는 프로젝트라면 module 시스템이 CommonJS로 , 아니면 ESNext 등으로 설정할 수 있다.

"outDir" : "dist (설정할 폴더 위치)"

• 컴파일 된 js 파일이 어디에 있으면 좋겠다 싶을 때 설정하는 옵션. 기존에는 원래 ts 파일 위치에 생성되니 보기 별로인데, outDir을 통해 깔끔하게 유지할 수 있다.

"strict" : true

• 얼마나 엄격하게 검사할 것인지에 대한 옵션이다. 보통 true를 놓고 작업하지만 가끔 js로 된 프로젝트를 ts로 마이그레이션 할 때 true가 되어 있으면 빨간줄이 너————-무 많이 뜨기 때문에 그럴때는 끄고 하는 경우도 있다고 한다.

"moduleDetection": "force”

• hello.ts 에 const a 를 정의하고 index.ts 에 const a 를 정의하면 타입 에러가 발생한다. 왜? 타입은 전체를 전역 모듈로 바라보기 때문에 둘 다 같은 공간에 있다고 인식하기 때문이다. 이를 해결하기 위해서는 2가지 방법이 있는데,

1. 첫번째로는 index.ts나 hello.ts에 export {} 를 넣어주는 것이다. 그렇게 되면 해당 파일을 독립된 개별 모듈로 봐서 에러가 사라지게 된다.
2. 두번째로는 tsconfig.json을 설정해주는 방법이다.

• 위 옵션을 넣어줬는데도 빨간줄이 있다면, cmd + shift + p ⇒ restart 검색해서 타입스크립트 restart를 해보자.

  

• 어떻게 옵션에 저걸 넣으면 오류가 사라질까? tsc 를 입력하여 컴파일된 자바스크립트 파일을 보면 알 수 있다.

  

  우리가 첫 번째 해결방법으로 봤던 export{} 넣는걸 자동으로 추가해주는 옵션인 것 !

  만약 options에서 module이 CommonJS라면 export가 아닌 CommonJS 시스템으로 변환된다.
  

ts-node

ts-node를 쓸 때는 package.json에 “type” : “module” 설정을 해줘야한다. node에서 esModule을 쓰기 위해서 필요한 사항.

//package.json
// ~중략
"description": "",
  "main": "index.js",
  "type": "module",

ts-node도 기본적으로 commonJS 를 사용하기 때문에, 아래의 설정을 tsconfig.json에 해줘야한다.

//tsconfig.json
"ts-node": {
    "esm": true
  },

strictNullChecks

• null 이 아닌 변수에 null을 담아놔야 할 때, 오류가 발생하는 걸 strictNullChecks = false 를 넣어줌으로써 막을 수 있다.

//tsconfig.json
"compilerOptions": {
    "strictNullChecks": false
  },

• 이렇게 false로 꺼두면, let numA : number = null; number 타입으로 설정된 numA가 null 로 지정해도 에러를 피할 수 있다. 기본은 true이다.

설정한대로 잘 작성되었는지 확인하기

0. src - index.ts 파일 생성 후 console.log(”hello”) 작성
1. 터미널에 tsc 입력해서 dist 폴더안에 index.js가 생겼는지 확인
2. 터미널에 node dist/index.js 입력하여 index.ts에서 적은 console값이 잘 나왔는지 확인
3. 터미널에 ts-node src/index.ts 입력해서 console값이 잘 나왔는지 확인

• 이렇게 확인했을 때 이상이 없다면, 이제 타입스크립트를 진행해도 좋다