기존 반응 프로젝트에 TypeScript 추가

이 노트는 기존 Create React App 프로젝트에 TypeScript를 추가하는 방법을 이해하고 TypeScript에서 새 파일 작성을 시작하는 데 도움이 됩니다. 나는 패키지 관리자로 npm을 사용하지만 yarn이나 다른 방법을 사용하는 것은 문제가 되지 않습니다.

Redux를 사용하지 않는 경우 1, 2 및 7로 번호가 매겨진 단계만 수행하십시오.

주요 단계

1) 터미널[1]을 통해 필요한 패키지를 설치합시다.

npm i --save typescript @types/node @types/react 
npm i --save @types/react-dom @types/jest
npm install --save-dev @tsconfig/node16
npm i @typescript-eslint/parser

2) 수동으로 또는 터미널 명령을 사용하여 tsconfig.json 파일을 생성하고 파일의 예시로 채웁니다.

tsc --init

{
 "$schema": "https://json.schemastore.org/tsconfig",
 "display": "Node 16",
 "extends": "@tsconfig/node16/tsconfig.json",
 "compilerOptions": {
   "target": "ES2022",
   "lib": [
     "dom",
     "dom.iterable",
     "ES2022"
   ],
   "allowJs": true,
   "skipLibCheck": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "noFallthroughCasesInSwitch": true,
   "module": "es2022",
   "moduleResolution": "node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx",
   "typeRoots": [
     "src/@types"
   ]
 },
 "include": [
   "src"
 ]
}

$schema , display 및 extends는 tsconfig 파일에 아무 것도 설정하지 않습니다. tsconfig.json에 있을 수 있는 값이 있는 온라인 옵션 목록으로만 연결됩니다. 즉, 구성[2][3]을 보고 구성을 추가해야 합니다.

내 IDE는 모듈을 es2022에서 esnext로 변경합니다. IDE의 알림 패널에 표시되더라도 걱정하지 마십시오.
typeRoots에는 기본 useSelector 앱 상태가 있는 파일의 경로가 포함되어 있습니다(나중에 설명 참조). Redux를 사용하지 않는 경우 파일에서 typeRoots를 삭제하십시오.

3) Redux를 사용하지 않는 경우 이 단계를 건너뜁니다.

이제 react-redux 인덱스 파일 이름 확장자를 .js에서 .ts로 변경할 때입니다(파일 이름이 다를 수 있음). 교체 후

export default combineReducers({
   ...yourReducers
});

~와 함께

export const reducers = combineReducers({
   ...yourReducers
})

export type AppState = ReturnType<typeof reducers>;

AppState 목적에 대한 설명은 나중에

4) 이 섹션은 Redux를 사용하는 개발자에게 필요합니다.

파일 수정store.js(구현 파일이 다른 이름을 가질 수 있음). 당신은 교체해야합니다

import reducers from './reducers';

~와 함께

import { reducers } from './reducers/index.ts';

5) redux를 사용하지 않는다면 이 단계를 무시하십시오.

그리고 현재 단계에서 파일 생성이 필요합니다react-app-env.d.ts( src/react-app-env.d.ts )[4]

/// <reference types="react-scripts" />

6) 이 파일은 not-redux 사용자에게는 필요하지 않습니다.

다음 코드로 경로 아래에 파일 추가src/@types/react-redux.d.ts

import 'react-redux';

import { AppState } from '../reducers';

declare module 'react-redux' {
   interface DefaultRootState extends AppState {}
}

AppState가 다른 곳에서는 사용되지 않음에도 불구하고 useSelector 메서드에서 리듀서 앱 상태를 매번 가져올 수 없으며 메서드는 항상 인수 유형 반환 값[5]을 알고 있습니다.

7) 마지막 단계로 ESlint 파일을 수정합니다.

파서 변경

"parser": "@typescript-eslint/parser",

파서 옵션 변경

"parserOptions": {
   "ecmaVersion": "latest",
   ...rest code
}

환경 업데이트

"env": {
   "es2021": true,
   ...rest code
}

사용하지 않는 코드에 대한 경고 또는 오류를 비활성화하기 위한 규칙을 수정하고(선택에 따라) TypeScript 파일 확장자에 대한 실수를 제거하고(코드는 이 규칙 없이 작동하지만 불쾌한 메시지가 표시됨) 기본 소품 부족에 대한 경고를 제거합니다.

"rules": {
   "no-use-before-define": "off",
   "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
   "react/require-default-props": "off"
}

결론

.ts 및 .tsx 확장자를 가진 파일 가져오기는 이제 필수라는 점을 경고해야 합니다(created by create-react-app 애플리케이션에서만 무시할 수 있음). 단점으로 라이브 리로딩이 깨질 수 있고 매번 페이지를 수동으로 리로딩해야 합니다.

출처

[1] Adding TypeScript
[2] What is a tsconfig.json
[3] tsconfig.json base configuration
[4] What is the react-app-env.d.ts in a react typescript project for
[5] TS2339: Property 'tsReducer' does not exist on type 'DefaultRootState'