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

Question

我正在構建一些 SPFX 組件（基於 typescript + webpack）。

我想在項目中包含 redux 工具包，但它破壞了編譯。

我做了什么 ：

• 使用 yo 搭建項目的腳手架
• 安裝redux react-redux和@reduxjs/toolkit （使用pnpm如果它的事項）
• 遵循Redux Toolkit TypeScript 快速入門，使用以下內容創建文件store.ts ：

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'來解決。

如何正確設置我的項目？

如果有幫助，這是一個重現錯誤的存儲庫

[編輯] 恢復到經典npm行為類似（除了在使用 pnpm 時顯示 ts 文件的本地副本而不是鏈接的文件路徑）

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": { .. }
}

在 SPFx 項目中使用不同版本的 TypeScript 一文中找到的解決方案