기존 react 프로젝트 typescript 프로젝트로 만들기

기본 프로젝트를 typsscript 프로젝트로 바꾸기 위해 GPT에게 물어보았습니다

 

 

이미 프로젝트가 설정되어 있다면, TypeScript, ESLint, Prettier를 추가하는 방법을 설명할게요.

1. TypeScript 설정

먼저, TypeScript와 관련된 패키지를 설치해야 합니다.

npm install --save-dev typescript @types/react @types/react-dom

다음으로, TypeScript 설정 파일을 생성합니다.

npx tsc --init

이 명령어는 기본 tsconfig.json 파일을 생성합니다. 생성된 파일을 열어 프로젝트에 맞게 수정할 수 있습니다. 주요 설정은 다음과 같습니다:

{
  "compilerOptions": {
    "jsx": "react-jsx",
  },
  "include": ["src/**/*"]
}

// vite + typescript를 쓰고 .env를 쓸 것이면 아래와 같이 업데이트를 해주면 좋다
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "include": ["src/**/*"]
}

2. ESLint 설정

ESLint 설정 파일 .eslintrc.js를 생성하고 필요한 패키지를 설치합니다

npx eslint --init

설정 파일에서 TypeScript와 React 관련 규칙을 추가해야 합니다. .eslintrc.js 파일을 다음과 같이 설정할 수 있습니다:
이 설정을 할때 지금 타입스크립트를 사용중이냐라는 질문을 하는데 바로 타입스크립트로 바꿀거면 yes를 누르도록 하자

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'ESNext',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    // 여기에 프로젝트에 맞는 규칙을 추가하세요.
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

3. Prettier 설정

Prettier를 설치하고 설정합니다.

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

프로젝트 루트에 .prettierrc 파일을 생성합니다.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "endOfLine": "auto"
}

ESLint와의 통합을 위해 .eslintrc.js에 다음과 같은 설정을 추가합니다:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // Prettier와 통합
  ],
};

4. 스크립트 업데이트

package.json 파일에 ESLint와 Prettier를 실행할 수 있는 스크립트를 추가합니다.

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write ."
  }
}

이제 npm run lint로 코드 린팅을, npm run format으로 코드를 포맷팅할 수 있습니다.

5. src/custom.d.ts 선언

declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
declare module '*.gif';


declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

 

이미지 파일의 에러를 막아준다

6. TypeScript로 파일 변환

src 폴더의 .js 또는 .jsx 파일들을 .ts 또는 .tsx로 변환합니다. 이후, TypeScript의 타입 체크 기능을 활용해 코드를 개선해 나가면 됩니다.

 

7. src/types/globla.d.ts 생성

이곳에 global type들을 담아주면 된다

8. src/vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  // 다른 환경 변수들에 대한 타입 정의...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

이렇게 설정해 주어야 typescript + vite를 사용할 때 에러가 나오지 않는다