typescript - Nesne literal yalnızca bilinen özellikleri belirtebilir. 'CreateSliceOptions' türünde mevcut değil

Şu anda React-Redux'a yaklaşıyorum ve burada bulunan örneği takip ederek: https://redux-toolkit.js.org/usage/usage-with-typescript İhtiyacım olanı kademeli olarak oluşturmaya çalışıyorum. Yepyeni bir infopieceSlice.ts'te bu kodu ekledim :

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 dosyasında nerede :

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;

Bu hataları alıyorum:

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);

Bu, burada önerildiği gibi çalıştırılarak alınan ilgili koddur: 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;
    },
  },
});

Amacım, string[] yani dizi halinde stringleri işleyen bir InfopieceState ve infopieceSlice'a sahip olmaktır.

Bu türleri nasıl düzeltirim?

Cevap #1

You should write initialState: initialInfopieceState yerine initialInfopieceState değil, createSlice içinde.

initialState anahtardır ve eğer sadece initialInfopieceState yazarsanız, bu initialInfopieceState: initialInfopieceState için kısa yoldur ve initialInfopieceState anahtar olarak mevcut değildir.

İlgili makaleler