Блог

Главная - Вопросы по программированию - Как использовать инструментарий redux в проекте SPFX (typescript)?

Как использовать инструментарий redux в проекте SPFX (typescript)?

#typescript #redux #spfx

Вопрос:

Я создаю некоторые компоненты SPFX (на основе typescript webpack).

Я хотел бы включить инструментарий редактирования в проект, но он нарушает компиляцию.

Что я сделал :

  • построил строительные леса для проекта, используя yo
  • установлен redux react-redux и @reduxjs/toolkit (используется pnpm , если это имеет значение)
  • следуя тексту набора инструментов Redux для быстрого запуска, создайте файл 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 относительно вывода типа:

 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 поведению аналогичен (за исключением путей к файлам, показывающих локальную копию файла ts вместо связанной при использовании pnpm)

Ответ №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": { .. }
}

Решение, найденное в посте, Использует различные версии TypeScript в проектах SPFx

Метки: