如何在 SPFX (typescript) 项目中使用 redux 工具包？

Question

我正在构建一些 SPFX 组件（基于 typescript + webpack）。

我想在项目中包含 redux 工具包，但它会破坏编译。

我做了什么：

使用 yo
已安装 redux react-redux 和 @reduxjs/toolkit（如果重要，请使用 pnpm）
通过创建包含以下内容的文件 store.ts 跟随 Redux Toolkit TypeScript Quick Start :

import { configureStore } from '@reduxjs/toolkit'
// ...

const store = configureStore({
  reducer: {
  
  }
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

当我尝试构建项目 gulp build 时，它因一堆错误而失败：

[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,143): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,57): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,70): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,54): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/createAction.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/createAction.d.ts(1,29): error TS1005: ';' expected.
... dozens of similar lines removed ...

我还收到有关类型推断的 VS Code 投诉：

The inferred type of 'store' cannot be named without a reference to '.pnpm/redux-thunk@2.3.0/node_modules/redux-thunk'. This is likely not portable. A type annotation is necessary.

后来的错误似乎可以通过安装 redux-thunk 并在文件开头添加 import 'redux-thunk' 来解决。

如何正确设置我的项目？

如果有帮助，这里是repository that reproduce the error

[编辑] 恢复到经典 npm 行为类似（除了文件路径显示 ts 文件的本地副本而不是使用 pnpm 时链接的文件）

Answer 1

我找到了解决方案。

根本原因是 react redux 中使用的语法需要 typescript 3.8 或更高版本。

具体来说，import type 之前是不允许的。

SPFX 项目的脚手架依赖于 typescript 3.7。

解决方案就是升级SPFX项目的构建工具：

npm remove @microsoft/rush-stack-compiler-3.7
npm install @microsoft/rush-stack-compiler-3.9 --save-dev

此外，必须更新 tsconfig.json 文件以修复正确构建工具版本的路径：

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
  "compilerOptions": { .. }
}

在 post Use Different Versions of TypeScript in SPFx projects

中找到解决方案

如何在 SPFX (typescript) 项目中使用 redux 工具包？

How to use redux toolkit in SPFX (typescript) project?

typescript

redux

spfx