타입스크립트 시작하기

https://aerocode.net/303
vscode에서 타입스크립트 프로젝트 생성하기

https://www.samsungsds.com/kr/insights/TypeScript.html
타입스크립트 특징, vscode 설정, 기본 문법

https://typescript-kr.github.io/
타입스크립트 공식 웹사이트의 한글 번역

https://darrengwon.tistory.com/116
tsc-watch 사용하기

https://geonlee.tistory.com/214
tsconfig.json 컴파일 옵션 정리

 

 

npm i -g typescript

npm으로 타입스크립트 전역 설치

 

 

vscode 마켓플레이스에서 typescript extension pack 설치

 

작업할 프로젝트 폴더에서

 

npm init -y

npm 이니셜라이즈

 

tsc --init

tsconfig.json이 생성된다

매우 많은 옵션들이 주석처리 되어있는데 필요한 옵션들은 주석 해제 후 설정하면 된다

타입스크립트로 작업을 하여 .ts 파일로 만들면 이걸 그대로 쓰는게 아니라 자바스크립트 파일인 .js로 컴파일 과정이 이루어지도록 해야한다

그리고 ts파일과 js파일들이 서로를 인식하게 .map 파일도 생성되게 해야한다

 

"rootDir": "./src"
"sourceMap": true,
"outDir": "./dist",
"removeComments": true, // ts에서 작성된 주석들이 js로 컴파일될때 제거됨

"strictNullChecks": false,
// "개체가 'null' 또는 'undefined'인 것 같습니다." 라는 엄격한 타입 체크 오류가 뜨는 경우가 있는데,
// 이런 엄격함을 풀어준다

 

 

src 폴더에 ts 파일을 만들고 작업 후, 터미널에서

tsc

tsc 명령어를 입력하여 실행하면 js파일과 map 파일이 생성된다

 

npm i tsc-watch -D

tsc-watch는 타입스크립트를 위한 nodemon이다

ts-node 사용을 권장

 

  "scripts": {
    "start": "tsc-watch --onSuccess \"nodemon ./dist/index.js\"",
  },

package.json의 scripts 수정

tsc-watch보단 ts-node 사용을 권장한다. tsc-watch에선 절대경로 사용을 하기가 매우 어렵다.

 

npm i @types/node tsconfig-paths

npm i -g ts-node

라이브러리 설치. @types/node는 설치 안해도 되긴 한다. 어디에 쓰이는지는 잘모르겠다.

 

  "scripts": {
    "dev": "nodemon --exec ts-node -r tsconfig-paths/register ./src/index.ts",
    "build": "tsc -p tsconfig.json",
    "start": "ts-node -r tsconfig-paths/register dist/index.js",
  },

package.json 수정.

 

주의사항이 하나가 있다.

// before
const loadedTypes = loadFilesSync(`${__dirname}/**/*.typeDefs.js`);
const loadedResolvers = loadFilesSync(`${__dirname}/**/*.resolvers.js`);

// after
const loadedTypes = loadFilesSync(`${__dirname}/**/*.typeDefs.*`);
const loadedResolvers = loadFilesSync(`${__dirname}/**/*.resolvers.*`);

tsc-watch로 할 때는 js 파일로 컴파일하여 실행하였기에

코드 상에서 ts로 작성된 다른 파일을 불러올때 확장자를 js로 하였다.

ts-node는 컴파일없이, nodejs에서 타입스크립트를 직접 실행시키는 구조이다보니, js가 아닌 ts로 불러와야하지만, 배포환경에선 컴파일된 js파일을 불러오는 것이기에 이에 대한 대처가 필요하다.

배열 형태로 해서 ["/**/*.something.js", "/**/*.something.ts"]으로 해도 되고, 디렉토리 구조가 확실하다면 "/**/*.something.*"으로 하면 될듯 하다.

 

tsconfig.json에 include, exclude 추가

{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "uploads"],
  "compilerOptions": {
  ...