React-Redux配置在接口上出现打字错误

Question

我正在尝试学习如何使用React-Redux设置Typescript，以便将来为了学习起见，我会使用TS进行所有操作。我只想执行一个将生成二维数字数组的操作。所以这就是我在做什么：

我的动作

import { GENERATE_PINS, AppActions } from '../types/actions';
import { generateAllPins } from '../utils/generatePins';
import { AppState } from '../configStore';
import { PinArr } from '../types/pinType';
import { Dispatch } from 'react';
// TypeScript infers that this function is returning SendMessageAction

export const getPin = (pins: PinArr): AppActions => ({
  type: GENERATE_PINS,
  pins
});

export const startGeneratePin = () => {
  return (dispatch: Dispatch<AppActions>, getState: () => AppState) => {
    const pins = generateAllPins();
    return dispatch(
      getPin({
        pins
      })
    );
  };
};

我的减速器

import { PinArr } from '../types/pinType';
import { GENERATE_PINS, PinActionTypes } from '../types/actions';

const initialState: PinArr = {
  pins: []
};

export function pinReducer(
  state = initialState,
  action: PinActionTypes
): PinArr {
  switch (action.type) {
    case GENERATE_PINS:
      return {
        pins: [...state.pins, ...action.pin]
      };
  }
}

我的类型

import { PinArr } from './pinType';

export const GENERATE_PINS = 'GENERATE_PINS';

interface GeneratePin {
  type: typeof GENERATE_PINS;
  pin: PinArr;
}

export type PinActionTypes = GeneratePin;

export type AppActions = PinActionTypes;

和我的数据接口

export interface PinArr {
  pins: Array<Array<number>>;
}

我的密码应为[[1,2,3,4]，[2,3,4,5]，[2,6,4,2] ...]那就是为什么我在做Array>

现在我有两个错误：开针动作

Type '{ type: "GENERATE_PINS"; pins: PinArr; }' is not assignable to type 'GeneratePin'.
  Object literal may only specify known properties, but 'pins' does not exist in type 'GeneratePin'. Did you mean to write 'pin'?

在减速器上

Type 'PinArr' is not an array type.

任何人都可以帮助我吗？我感觉一旦我理解并解决了这种接口类型（这就是为什么我使用TS来逐步发展为一个整体开发人员的原因），我就会对使用带有React的TS感到很舒服。请吗？

Answer 1

您由于命名约定（名称很重要）而感到困惑！您声明为PinsArray的是actually

PinReducer处理的状态片。我认为，如果您这样命名，则在您的代码中更有意义：