Node.js 환경에서 타입스크립트 시작하기
$ npm init -y // package.json 파일 생성
$ npm install -D typescript // 타입스크립트 설치
$ touch tsconfig.json // 타입스크립트 설정 파일 생성 (파일명 변경 불가)
$ npm run build // typescript -> javascript 빌드
$ npm i -D ts-node // 빌드없이 실행 시켜주는 모듈, 개발환경에서만 사용
$ npm i nodemon // 자동으로 커맨드 재 실행
Bash
복사
package.json
{
"name": "typechain",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "tsc",
"dev": "nodemon --exec ts-node src/index.ts",
"start": "node build/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^10.9.1",
"typescript": "^4.9.4"
},
"dependencies": {
"nodemon": "^2.0.20"
}
}
JSON
복사
tsconfig.json
{
"include": ["src"], // 빌드할 디렉터리 지정 (src 디렉터리만 빌드)
"compilerOptions": {
"outDir": "build", // 출력할 디렉터리 지정 (build 디렉터리에 js 파일 생성)
"target": "ES6", // 호한 javascript 버전 선택, ES6가 좋은 선택
"lib": ["ES6", "DOM"], // 어디서 동작할 것인지 지정, 자동완성 기능 제공(DOM은 브라우저 환경)
// 해당하는 definition file 참조
"strict": true, // 더 엄격한 모드로 타입스크립트 보호
"allowJs": true, // typescript에서 javascript 허용
"esModuleInterop": true, // import default 없는 문제 해결해줌,
// 해당 옵션 안쓰면 import * as crypto from "crypto" 이런식으로 사용
"module": "CommonJS" // CommonJS 모듈을 쓰겠다고 선언
}
}
JSON
복사
javascript 모듈을 정의해(타입을 알려주어) typescript 에서 사용하는 법
•
packageName.d.ts 파일(definition file) 에 call signature 작성
myPackage.js
export function init(config) {
return true;
}
export function exit(code) {
return code + 1;
}
JavaScript
복사
myPackage.d.ts
interface Config {
url: string;
}
declare module "myPackage"{
function init(config: Config): boolean;
function exit(code: number): number;
}
TypeScript
복사
index.ts
import {init, exit} from "myPackage"
init({url:"true"});
exit(1);
TypeScript
복사
JavaScript와 TypeScript를 섞어서 사용하되 기존 JavaScript 파일을 수정하지 않고 어느정도 보호받는 법
•
tsconfig.json 에서 allowjs : ture로 설정
•
JavaScript 코드 상단에 //@ts-check 추가
•
JSDoc 사용
myPackage.js
//@ts-check
/**
* Initializes the project
* @param {object} config
* @param {boolean} config.debug
* @param {string} config.url
* @returns {boolean}
*/
export function init(config) {
return true;
}
/**
* Exits the program
* @param {number} code
* @returns {number}
*/
export function exit(code) {
return code + 1;
}
JavaScript
복사
allowJs 허용해주지 않아도, definition file을 직접 정의해 주지 않아도 js 모듈을 사용하는 방법
DefinitelyTyped
•
엄청나게 큰 깃 레퍼지토리, 많은 사람이 사용하고 있음
•
타입 정보만 존재
•
npm i -D @types/node : node 패키지의 정의된 모든 타입을 가져옴