界面中的Typescript界面

Question

我需要你的帮助与接口，这是包装在第二个接口。我有这样的减速器：

import { createSlice } from '@reduxjs/toolkit';

export interface IStep {
  id: number;
  label: string;
  value: string;
  placeholder: string;
}

export interface InitialState {
  activeStep: number;
  steps: IStep[];
}

const initialState: InitialState = {
  activeStep: 0,
  steps: [
    {
      id: 0,
      label: 'First Name',
      value: '',
      placeholder: 'First Name',
    },
   ......
  ],
};

export const slice = createSlice({
  name: 'multiStepForm',
  initialState,
  reducers: {
   ......
  },
});

我想在名为Step的组件中使用接口InitialState，如下所示。

import React from 'react';
import { IStep } from 'redux/reducers/multiStepForm';

interface IPropsStep {
  activeStep: number;
  steps: IStep[];
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const Step = ({ activeStep, steps, handleChange }: IPropsStep): JSX.Element => {
  return (
    <input
      id={steps[activeStep].id}
      type="text"
      onChange={handleChange}
      placeholder={steps[activeStep].placeholder}
      value={steps[activeStep].value}
    />
  );
};

export default Step;

很容易看出，activeStep和步骤属于InitialState，但我不知道如何实现它们。

我一直在尝试这样做：

interface IPropsStep extends InitialState {
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const Step = ({ handleChange }: IPropsStep): JSX.Element => {
  return (
    <input
      id={steps[activeStep].id}
      type="text"
      onChange={handleChange}
      placeholder={steps[activeStep].placeholder}
      value={steps[activeStep].value}
    />
  );
};

但是我有错误，因为steps和activeStep在这里是未知的。我该如何处理这个问题呢？

Answer 1

如果我正确理解了您的问题，您应该能够像使用object一样从interface访问密钥。

interface IPropsStep {
  activeStep: InitialState['activeStep'];
  steps: InitialState['steps'];
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

这样，您就可以直接引用InitialState接口。