本说明将帮助您了解如何将 typescript 添加到现有的 Create React App 项目并开始在 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)好吧,非redux用户不需要这个文件

使用下一个代码在路径src/@types/react-redux.d.ts下添加文件

import 'react-redux';

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

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

进入全屏模式 退出全屏模式

尽管 AppState 没有在其他任何地方使用,但它允许不要每次都在 useSelector 方法中导入 reducers 应用程序状态,并且该方法始终知道它的参数类型返回值[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 扩展名的文件(你只能在 create-react-app 应用程序创建的应用程序中忽略它)。作为一个缺点,实时重新加载可能会被破坏,您每次都必须手动重新加载页面。

来源

[1] 添加TypeScript

[2]【什么是tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases)

[3] tsconfig.json 基础配置

[4] 的 react typescript 项目中的 react-app-env.d.ts 是什么

[5] TS2339: 属性 'tsReducer' 在类型 'DefaultRootState' 上不存在