른록노트

[Javascript] Typescript 적용하기 본문

Programming/[Javascript]

[Javascript] Typescript 적용하기

른록 2021. 12. 13. 21:15

1. Typescript란

공식 사이트
한글 번역 사이트

1.1. Javascript and more

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

Typesciprt는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다.
당신의 ide에서 초기에 오류를 포착하세요.

1.2. A Result You Can Trust

TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

TypeScript 코드는 Javascript가 실행되는 모든곳에서 실행되는 Javascript로 변환됩니다. 브라우저, Node.js 또는 Deno 및 apps

1.3. Safety at Scale

TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

TypeScript는 Javascript를 이해하고 type 추론을 추가 코드 없이도 훌륭한 도구를 제공합니다.

2. 설치

npm install typescript --save-dev

(설치버전 4.5.3)

2.1. migrating-from-javascript

저는 js로 작성된 noder express serverfmf ts로 전환하려고합니다.
먼저 js로 작성된 프로젝트 최상위에서 tsconfig.json 파일을 생성합니다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./built",
    "allowJs": true,
    "target": "es2017",
    "moduleResolution": "Node",
    "esModuleInterop": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

moduleResolution 설명

commonjs 방식일경우 "moduleResolution": "node"을 넣어줘야하고
import방식은 default라서 moduleResolution 이 옵션이 없어도 된다.

2.2. tsc를 자동으로 하고 여부를 확인해주는 라이브러리 설치

npm install tsc-watch --save-dev (파일을 저장할 때마다 다시 ts파일을 빌드하고 실행시켜주는 라이브러리)
npm install nodemon --save-dev (파일을 변경, 저장할 때마다 재 실행없이 다시 node를 실행시켜주는 라이브러리)

2.3. package.json 수정

{"sciprts":  {
  "tsc": "tsc", // ts확장자 파일을 js 파일로 빌드해주는 명령어  
  "ts-dev": "tsc-watch --onSuccess "nodemon built/app.js""  
  ...  
  }
}

2.4. 기존 src에 있는 js파일을 ts파일로 변경

3. 실행

npm run tsc
npm run ts-dev

4. 추가

참고사이트
참고해서 express 타입 추가하고 import 방식으로 변경하기

[https://millo-l.github.io/Typescript-mongodb-method-statics-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/]
User model typescript

반응형
Comments