我正在构建一些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'来解决。
如何正确设置我的项目?
如果有帮助，这里有一个重现错误的存储库
[Edit]恢复到经典的npm行为类似(除了文件路径显示ts文件的本地副本，而不是使用pnpm时链接的文件)
我找到解决办法了。
根本原因是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