TS를 사용하여 express 서버를 작성하려면

1. 앞말
전단 개발자로서 ts는 이미 없어서는 안 될 기술이 되었다. 유형 검사는 우리가 재개발할 때 불필요한 버그를 피하는 데 도움을 줄 수 있고 ts가 지원하는 클래스와 장식기 등 문법도 백엔드 언어에 가깝고 서버 개발에 더욱 적합하다.
본고는 0부터 시작하여ts와eslint 문법 검사를 통합한express 서버를 구축하고자 합니다.
2. express 프레임워크 초기화
우리는 정부에서 제공한 express 생성기를 사용하여 express 프레임워크를 신속하게 생성할 수 있다.
물론,express의 초기화 내용은 복잡하지 않으며, 너도 하나의 앱에서 시작할 수 있다.js는 자신이 좋아하는 프레임워크 모델을 구축하기 시작했다.

#  express express-generator
$ npm install -g express-generator

# --view ，server 
$ express --view ejs server

#  git， git init 
$ git init

초기화가 끝난 후에 우리는 하나를 추가합니다.gitignore 파일

node_modules/
dist/

3. TS 지원 추가
전역 설치 TS
ts 자체는 js의 초집합에 속한다. node와 브라우저는 알지 못한다. 실행하기 전에 js로 컴파일해야 하기 때문에 전역적으로 ts를 설치한 적이 없는 경우 전역적으로 설치해야 한다

$ npm install -g typescript

express 형식 의존 설치
express는 node 환경을 기반으로 하기 때문에 관련api의 형식 힌트를 얻기 위해 두 가지 형식 의존을 설치해야 합니다

$ npm install @types/node --save-dev

$ npm install @types/express --save-dev

tsconfig를 설정합니다.json 파일
프로젝트 루트 디렉터리에 tsconfig를 새로 만듭니다.json 파일, outDir는 패키지 출력 경로를 나타냅니다.

{
 "compilerOptions": {
  "target": "es2016",
  "module": "commonjs",
  "lib": ["es2016","dom"],
  "outDir": "./dist",
 },
 "exclude": ["node_modules"]
}

여기에include나 files 옵션이 포함되어 있으면 모든ts 파일을 기본적으로 컴파일하지 않습니다.
다음은 프로젝트를 js 파일의 접두사로 바꿀 수 있습니다.ts, 명령줄에서 직접 실행

$ tsc

기본적으로 루트 디렉터리의 tsconfig를 찾을 수 있습니다.json 파일, 설정에 따라 컴파일합니다. 컴파일이 완료되면dist 폴더가 모든ts 파일을 js 파일로 컴파일하고 원래의 디렉터리 구조를 유지하는 것을 볼 수 있습니다.
다음에 디렉터리에 있는 다른 자원도dist 폴더에 넣고 실행합니다

$ node ./dist/bin/www

이때 우리의 서비스는 이미 정상적으로 시작할 수 있지만, 개발할 때 실행할 때마다 컴파일->자원 파일을 ->실행 명령으로 옮기는 절차를 진행해야 한다면 그것도 너무 번거롭기 때문에 다음에 제3자 라이브러리 ts-node를 추가합니다.
ts-node를 사용하여 ts 파일을 메모리로 컴파일합니다
ts-node를 사용하기 전에 전역 설치가 필요합니다

$ npm install ts-node -g

#  ts-node ， ts js 
$ ts-node ./bin/www

ts-node는 ts 파일을 직접 실행할 수 있지만 개발이 끝난 후에 생산 환경에 배치할 때 tsc로 포장된 js 파일을 사용하면 더욱 안정적일 것을 추천합니다.
노드몬을 사용하여 핫 업데이트하기
전역 설치 nodemon

$ npm install nodemon -g

#  
$ nodemon -e ts --exec ts-node ./bin/www

-e: 지정된 관찰 목록(Specifying extension watch list)을 나타냅니다.
--exec: 명령행 형식을 나타냅니다.
npm 스크립트 설정

"scripts": {
 "start": "ts-node ./bin/www",
 "dev": "nodemon -e ts --exec ts-node ./bin/www",
 "build": "tsc",
 "server": "node ./dist/bin/www"
}

4. eslint 설정
왜 tslint가 아니에요?
TSLint is deprecated.
See this issue for more details: Roadmap: TSLint → ESLint. If you're interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.
이것은 tslint팀이 제시한 답안입니다. 현재 추천하는 것은typescript-eslint .
프로젝트에 eslint 설정

#  
$ npm install eslint -g

$ eslint --init
√ How would you like to use ESLint? ・ style    
√ What type of modules does your project use? ・ commonjs
√ Which framework does your project use? ・ none
√ Does your project use TypeScript? ・ Yes
√ Where does your code run? ・ node
√ How would you like to define a style for your project? ・ guide
√ Which style guide do you want to follow? ・ standard
√ What format do you want your config file to be in? ・ JavaScript
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=7.11.0 eslint-plugin-import@>=2.22.1 eslint-plugin-node@>=11.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.2 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? ・ Yes

eslint 초기화 절차는 비교적 간단하고 이해하기 쉽다. 여기서 서술을 전개하지 않는다. 관건은 다음과 같다. Does your project use TypeScript?・ Yes
eslint 명령줄을 사용하여 초기화한 항목은ts 관련 문법에 대한 검사를 시작하지 않았습니다. 여기에 필요합니다.eslintrc.js 파일 두 개 설정 추가

extends: [
 'standard',
 'eslint:recommended',
 'plugin:@typescript-eslint/recommended'
]

다음에 우리는ts파일의 한 무더기의 오류를 볼 수 있으며,ts문법을 즐겁게 설치하여 수정할 수 있습니다!
제시:ts는commonjs의 모듈화 문법에 대해 완전한 지원이 없기 때문에require와module를 사용합니다.exports 때 각종 오류를 만나기 쉬워요. 정부도
ES 모듈 가져오기 모드를 사용하는 것이 좋습니다.

{
 "compilerOptions": {
 ...
  "esModuleInterop": true
 }
}

이렇게 하면 프로젝트에서es6의import와export를 사용하여 모듈화할 수 있습니다.ts는 컴파일할 때 환경에 따라 우리의 코드를 호환적으로 컴파일합니다.
5. 매듭
본고는 본인이 자신의express 서버를 구축하고ts개발을 통합할 때 기록한 조작입니다. 잘못된 점이 있으면 많은 조언을 부탁드립니다!
TS를 사용하여 express 서버를 작성하는 방법과 절차에 관한 이 글은 여기까지 소개되었습니다. 더 많은 TypeScript express 서버 관련 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!