node.js 프로젝트 시작
npm init -y
타입스크립트 설치
npm i -D typescript
npm i -D typescript@4.6.3 (특정 버전 설치)
설치하는 순간, 프로젝트 폴더아래에
node_modules, package-lock.json 폴더/파일이 생성된다.
index.ts 타입스크립트 파일 생성
src폴더 생성 및 index.ts 파일을 생성한다.
// src/index.ts
const hello = () => console.log("hello");✅ tsconfig.json 파일 생성
VSC에게 해당 프로젝트가 TS로 작성됐음을 알린다.
디렉터리에 tsconfig.json 파일이 있으면
해당 디렉터리가 프로젝트 루트임을 나타낸다.
"include" []: 자바스크립트로 컴파일하고 싶은 경로를 설정한다.
"compilerOptions": { "outDir": "" } : 컴파일된 자바스크립트 파일 경로
✅ TS파일 컴파일 해보기
src/index.ts파일을 생성하고
VSC에게 TS를 자바스크립트로 컴파일하는 스크립트를 설정해보자.
터미널에서 npm run build 명령어로 컴파일할 수 있다.
// package.json
...
"scripts": {
"build": "tsc"
}
...위에서 생성했던 TS가 아래와 같이 자바스크립트로 컴파일되었다.
// /build/index.js
var hello = function () { return console.log("hello"); };
현재까지의 진행상황은 아래와 같다.
┣ 📂build
┃ ┗ 📜index.js
┣📂node_modules
┣ 📂src
┃ ┗ 📜index.ts
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜tsconfig.json✅ 컴파일 할 자바스크립트 버전 설정하기 (target 옵션)
TS는 컴파일 될 자바스크립트의 버전까지도 설정할 수 있다.
기본 버전값은 ES3이다.
"compilerOptions": {
"outDir": "build",
"target": "ES6" // 컴파일 자바스크립트 버전 설정
}✅ 런타임환경 설정하기 (lib 옵션)
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6", "DOM"], // ES6, DOM(브라우저)
}TS에게 어떤 API를 사용하고, 어떤 환경에서 코드가 동작하는 지를 알려준다.
위 내용은 ES6를 지원하는 서버와 브라우저 환경에서 동작한다고 알려준다.
TS에게 DOM에서 동작한다고 알려주면,
TS는 document가 갖고 있는 이벤트와 메소드를 인지하게 된다.
자동완성 기능을 제공한다는 뜻이다!
✅ d.ts 파일에 대해 알아보자
TS에게 우리가 불러올 외부 라이브러리/패키지 자바스크립트 함수의 모양을 설명하려면 타입정의라는게 필요하다. 그게 바로 d.ts파일이다.
d.ts파일에는 call signature만 적는다.
Q) 그렇다면, 타입정의가 없는 라이브러리/패키지에
우리가 수동으로 설정해야 될까?A) 🚀 DefinitelyTyped (거의 모든 npm 패키지들이 있는 깃헙레포)
위대하신 분들이 모여 만들어준 DT(DefinitelyTyped)를 사용하면 된다-!사용방법은
express를 예를 들면,
npm i express로express를 설치한 후,
npm i -D @types/express명령어로 설치할 수 있다.최근에는 npm패키지 설치시,
d.ts파일을 포함하여 설치되는
패키지/라이브러리들이 많아지고 있다.
✅ 자바스크립트를 TS에서 사용하려면? (allowJS, JSDoc)
TS로 정의되지 않은 자바스크립트 라이브러리/패키지/함수를 사용하고 싶다면,
설정파일에서 allowJs 설정을 설정해야 한다.
설정을 하면 TS가 라이브러리/패키지의 인자와 리턴타입을 유추하여 알려준다.
// tsconifg.json
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6", "DOM"],
"allowJs": true, // TS에서 자바스크립트 허용하기
}더 나아가서
기존에 생성한 자바스크립트 함수에 TS가 제공하는 보호장치를 사용하고 싶다면
JSDoc를 사용할 수도 있다.
JSDoc은 주석을 통해 자바스크립트파일에 타입정보를 설정할 수 있다.
프로젝트 루트폴더에 myTest.js 자바스크립트 파일을 생성해보자.
먼저, 자바스크립트 파일 상단에 // @ts-check 주석을 달아준다.
아래는 JSDoc의 예시코드이다.
init함수는 config라는 obj를 인자로 받고 있으며,
그 안에는 isExist, url 데이터가 있고 현재 true를 반환하고 있다.
하지만 JSDoc에서 반환타입을 void라고 설정했기 때문에 에러가 뜨는 것이다.
JSDoc에서 반환타입을 boolean으로 수정해보자.
이제 아래 캡쳐처럼 JSDoc을 통해서 자바스크립트 코드를
TS로 완전히 변환하지 않아도 TS코드에서 사용할 수 있게 됐다.
✅ ts-node를 사용하여 생산성을 높여보자
npm i -D ts-node
우리는 npm run build를 통해 TS를 자바스크립트로 컴파일 했다.
이제 그 자바스크립트를 실행하려면, npm build/index.js와 같이 스크립트 언어를 다시 생성해야 한다. -> 밑에서 npm run start로 구현
이때, 개발단계에서 사용할 수 있는 라이브러리가 바로 ts-node이다.
ts-node는 개발단계에서 TS를 별도의 컴파일 없이
Node환경에서 직접 실행할 수 있도록 도와준다.
// package.json
...
"scripts": {
"build": "tsc",
"start": "npm build/index.js", // 컴파일된 자바스크립트를 실행
"dev": "nodemon --exec ts-node src/index.ts" // 별도의 컴파일 없이 실행
},
...npm run start: TS에서 컴파일된 자바스크립트 코드를 실행한다.
npm run dev: ts-node src/index의 뜻은 TS를 컴파일 없이 직접 실행하는 것이다.
nodemon --exec는
코드를 수정하면 그 즉시 서버를 재시작하여 반영시켜주는 라이브러리 명령어다.
✅ import 에러를 해결해보자
먼저, CommonJS가 무엇인지 대충 살펴보자.
CommonJS 모듈은 원래 nodejs에서 자바스크립트 패키지를 불러올 때 사용하는 근본있는 방식이다. 앞서 이야기 한 것 처럼 현재는 ECMAScript module(이하 esmodule)을 지원하지만, 태초에는 CommonJS 방식만 존재했다.
출처 [CommonJS란 무엇인가?]
// CommonJS 모듈방식
require("aaa");
// ES6 모듈방식
import a from "aaa";어떻게하면 ES6 모듈방식을 사용할 수 있을까?
아래와 같이 설정하면 된다!
// tsconfig.json
{
...
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6"],
"strict": true,
"esModuleInterop": true, // esModule 방식으로 commonJS를 갖고 온다.
}
}또 한가지, 어떤 자바스크립트 모듈을 컴파일 코드에 사용할지도 설정할 수 있다.
바로 module 속성이다.
// tsconfig.json
{
...
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6"],
"strict": true,
"esModuleInterop": true,
"module": "CommonJS", // 컴파일 시, 모듈을 CommonJS로 설정
}
}