처음부터 TypeScript 프로젝트 설정

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"
  }
}


에스린트 + 프리티어 설정


  • Eslint는 코드 규칙을 정의합니다
  • .
  • Prettier는 ESLint 규칙에 따라 자동 서식 지정을 수행합니다
  • .

    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에 .eslintrclint 명령을 추가합니다.

    "scripts": {
       "lint": "eslint --ignore-path .gitignore --ext .ts src/",
       "lint:fix": "eslint --ignore-path .gitignore --ext .ts src/ --fix"
    }
    


    8단계: 다음 명령을 실행하여 lint가 코딩 규칙을 수정하는지 확인합니다. lint:fixnpm 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-commitlint .

    코드 예: https://github.com/DarthRevanXX/typescript-project-example

    좋은 웹페이지 즐겨찾기