Search

설정

대분류
언어
소분류
TypeScript
유형
pachage
tsconfig
최종 편집 일시
2024/10/30 02:17
생성 일시
2024/02/08 00:56
15 more properties

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 패키지의 정의된 모든 타입을 가져옴