对象字面量只能指定已知属性。 'CreateSliceOptions' 类型中不存在

Question

我刚刚接近React-Redux，并且按照此处找到的示例：https://redux-toolkit.js.org/usage/usage-with-typescript 我正在尝试逐步构建我需要的东西。在一个全新的 infopieceSlice.ts 中，我添加了以下代码：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk, RootState } from '../../store/store';

interface InfopieceState {
  content: string[];
}

const initialInfopieceState: InfopieceState = {
  content: [],
};

export const infopieceSlice = createSlice({
  name: 'infopiece',
  initialInfopieceState,
  reducers: {
    add: (InfopieceState, action: PayloadAction<string>) => {
      InfopieceState.content.push(action.payload);
    },

  },
});

在 /store/store.ts 中的位置：

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import logger from 'redux-logger';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware()
    .concat(logger)
});

export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;
export type AppDispatch = typeof store.dispatch; 

我得到这个错误：

src/features/counter/infopieceSlice.ts:19:3 - error TS2345: Argument of type '{ name: 
string; initialInfopieceState: InfopieceState; reducers: { add: (InfopieceState: unknown,  
action: { payload: string; type: string; }) => void; }; }' is not assignable to parameter of 
type 'CreateSliceOptions<unknown, SliceCaseReducers<unknown>, string>'.
  Object literal may only specify known properties, and 'initialInfopieceState' does not   
exist in type 'CreateSliceOptions<unknown, SliceCaseReducers<unknown>, string>'.

19   initialInfopieceState,
     ~~~~~~~~~~~~~~~~~~~~~

src/features/counter/infopieceSlice.ts:22:7 - error TS2571: Object is of type 'unknown'.

22       InfopieceState.content.push(action.payload);

这是执行所采用的相应代码，如下所示：https://redux-toolkit.js.org/introduction/getting-started，

npx create-react-app my-app --template redux-typescript：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk, RootState } from '../../store/store';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  // `createSlice` will infer the state type from the    
// `initialCounterState` argument
  initialState,
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in 
reducers.
      // It doesn't actually mutate the state because it uses the 
Immer library,
      // which detects changes to a "draft state" and produces a brand
new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    // Use the PayloadAction type to declare the contents of    
//`action.payload`
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});  

我的目标是有一个 InfopieceState 和 infopieceSlice 来处理 string[] ，字符串数组。

如何修复这些类型？

Answer 1

你应该写initialState: initialInfopieceState，而不是createSlice中的initialInfopieceState。

initialState 是 key，如果你只写 initialInfopieceState 那是 initialInfopieceState: initialInfopieceState 的简写，initialInfopieceState 因为 key 不存在。