게시판만들기 타입스크립트 마이그레이션 01

최수진·2022년 8월 28일
0

게시판 만들기를 타입스크립트 마이그레이션

설치

npm init -y
npm i -D typescript nodemon ts-node
npx tsc --init

추가 원하는 패키지는 npm 공식사이트로 가서 TS용으로 설치

게시판 만들기에 필요한 TS용 패키지를 설치해주었다.

package.json

  "devDependencies": {
      "@babel/core": "^7.18.10",
      "@babel/preset-env": "^7.18.10",
      "@types/cors": "^2.8.12",
      "@types/eslint": "^8.4.5",
      "@types/eslint-config-prettier": "^6.11.0",
      "@types/express": "^4.17.13",
      "@types/node": "^18.6.5",
      "@types/nodemon": "^1.19.2",
      "@types/swagger-jsdoc": "^6.0.1",
      "@types/swagger-ui-express": "^4.1.3",
      "@types/yamljs": "^0.2.31",
      "babel-jest": "^28.1.3",
      "dotenv": "^16.0.1",
      "nodemon": "^2.0.19",
      "prisma": "^4.2.1",
      "swagger-jsdoc": "^6.2.2",
      "swagger-ui-express": "^4.5.0",
      "ts-node": "^10.9.1",
      "tslib": "^2.4.0",
      "typescript": "^4.7.4"
  }

tsconfig.json

npx tsc --init 까지하게 되면 tsconfig.json 파일이 생성이 된다.
생성된 tsconfig.json 에서 원하는 options을 정한다.

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES6",
    "lib": ["ES6"],
    "module": "commonjs",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module" // TS로 하기 위해 작성
  },
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "singleQuote": true,
        "parser": "flow"
      }
    ]
  }
}
profile
Frontend 개발자이며, Full Stack 꿈나무

0개의 댓글