처음부터 TypeScript 프로젝트 설정
22346 단어 programmingtutorialtypescriptwebdev
Typescript 컴파일러 설정
1단계: 프로젝트를 위한 빈 폴더 생성
mkdir typescript-project
2단계: 폴더로 이동
cd typescript-porject
3단계:
package.json
명령을 사용하여 npm init -y
를 초기화합니다.4단계: 다음 명령을 사용하여 src 폴더에
index.ts
파일 생성: mkdir typescript-project && touch typescript-project/index.js
5단계: 다음 명령을 사용하여 typescript 빠른 컴파일러를 dev 종속성으로 설치합니다.
npm i -D @swc/cli @swc/core
6단계:
.swcrc
폴더에 swc
에 대한 구성 파일typescript-project
을 만들고 이 구성을 추가합니다.{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"dynamicImport": true,
"decorators": true
},
"transform": {
"legacyDecorator": true,
"decoratorMetadata": true
},
"target": "es2017",
"externalHelpers": false,
"keepClassNames": true,
"loose": false,
"minify": {
"compress": false,
"mangle": false
},
"baseUrl": "src"
},
"module": {
"type": "commonjs"
}
}
7단계: 익스프레스
npm i express
및 익스프레스용 유형npm i --save-dev @types/express
을 설치하고 아래 코드를 src/index.ts
에 추가합니다.import express from 'express';
const app = express();
app.get('/', (_req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
8단계: 스크립트 아래에
build
명령을 package.json
"build": "swc src -d dist --source-maps"
에 추가하고 명령 시작
"start": "npm run build && node dist/index.js
9단계: npm run start
명령을 실행하여 앱이 작동하는지 테스트합니다. 다음이 출력되어야 합니다.10단계: 변경할 때마다 TypeScript 컴파일러를 실행하는 것은 지루할 수 있습니다. 이 문제를 해결하려면
Server started on port 3000
를 설치하고 npm i ts-node-dev
명령을 dev
에 추가합니다. 명령: package.json
"dev": "ts-node-dev --respawn --transpile-only --ignore-watch node_modules src/index.ts
는 다음과 같아야 합니다.{
"name": "setup-project-ts",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"start": "npm run build && node dist/index.js",
"dev": "ts-node-dev --respawn --transpile-only --ignore-watch node_modules src/index.ts",
"build": "swc src -d dist --source-maps"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@swc/cli": "^0.1.57",
"@swc/core": "^1.3.8",
"@types/express": "^4.17.14",
"ts-node-dev": "^2.0.0"
},
"dependencies": {
"express": "^4.18.2"
}
}
에스린트 + 프리티어 설정
1단계: 필요한 eslint 및 더 예쁜 종속 항목 추가:
package.json
2단계:
npm i eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
에 내용이 포함된 파일.prettierrc
을 생성합니다.{
"printWidth": 150,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"semi": true,
"arrowParens": "avoid"
}
3단계:
typescript-project
명령을 prettier-format
에 추가: package.json
4단계: 다음을 실행하여 더 예쁘게 테스트:
"prettier-format": "prettier --config .prettierrc src/**/*.ts --write"
5단계: 내용이 포함된 파일
npm run prettier-format
생성:/dist
코드 규칙을 확인할 때 dist 폴더를 무시하십시오.
6단계: 콘텐츠가 포함된 파일 생성
.eslintignore
:{
"parser": "@typescript-eslint/parser",
"extends": ["prettier", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/no-parameter-properties": 0,
"@typescript-eslint/interface-name-prefix": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-var-requires": "off"
}
}
7단계: package.json에
.eslintrc
및 lint
명령을 추가합니다."scripts": {
"lint": "eslint --ignore-path .gitignore --ext .ts src/",
"lint:fix": "eslint --ignore-path .gitignore --ext .ts src/ --fix"
}
8단계: 다음 명령을 실행하여 lint가 코딩 규칙을 수정하는지 확인합니다.
lint:fix
npm run lint:fix
는 다음과 같아야 합니다.{
"name": "setup-project-ts",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"start": "npm run build && node dist/index.js",
"dev": "ts-node-dev --respawn --transpile-only --ignore-watch node_modules src/index.ts",
"build": "swc src -d dist --source-maps",
"lint": "eslint --ignore-path .gitignore --ext .ts src/",
"lint:fix": "eslint --ignore-path .gitignore --ext .ts src/ --fix",
"prettier-format": "prettier --config .prettierrc src/**/*.ts --write"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@swc/cli": "^0.1.57",
"@swc/core": "^1.3.8",
"@types/express": "^4.17.14",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@typescript-eslint/parser": "^5.40.0",
"eslint": "^8.25.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"ts-node-dev": "^2.0.0"
},
"dependencies": {
"express": "^4.18.2"
}
}
사전 커밋 후크
1단계: 종속성 추가:
package.json
2단계: package.json에
npm run --save-dev pre-commit
배열을 추가합니다.{
"scripts": {
"start": "npm run build && node dist/index.js",
},
"pre-commit": [
"lint",
"prettier-format"
],
}
각 커밋이 실행되기 전에
pre-commit
및 lint
.코드 예: https://github.com/DarthRevanXX/typescript-project-example
Reference
이 문제에 관하여(처음부터 TypeScript 프로젝트 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/darthrevanxx/set-up-ts-project-from-scratch-34m1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)