Reactjs 如何设置TypeScript React应用程序的键/值默认状态

我必须将React应用程序转换为Typescript，但我无法确定如何设置哈希对象的初始状态

原始js

export default class Wizard extends PureComponent {
    constructor(props) {
        super(props);

        this.state = this.initialState();
    }



    /** Setup Steps */
    initialState = () => {
        const state = {
            activeStep: 0,
            hashKeys: {},
        };

        // Set initial classes
        // Get hash only in client side
        const hash = typeof window === 'object' ? this.getHash() : '';
        const children = React.Children.toArray(this.getSteps());
        children.forEach((child, i) => {
            // Create hashKey map
            state.hashKeys[i] = (child.props && child.props.hashKey) || `step${i + 1}`;
            state.hashKeys[state.hashKeys[i]] = i;
        });

        ...

        return state;
    }
...

我失败的尝试

export interface TState {
  activeStep?: number
  hashKeys: {
    [key: number]: string
  }
}

export default class StepWizard extends PureComponent<{},TState> {
   constructor(props: IStepWizardProps) {
       super(props)
       this.state = this.initialState()
   }

   initialState = () => {
    const state = {
      activeStep: 0,
      hashKeys: {},  /* <---- This seems to be the problem */
    }

    // Set initial classes
    // Get hash only in client side
    const hash = typeof window === "object" ? this.getHash() : ""

    const children = React.Children.toArray(this.getSteps())
    children.forEach((child, i) => {
      // Create hashKey map
      // the following give a TS error
      // ERROR: (property) hashKeys: {}
      //           Element implicitly has an 'any' type because expression of type 'number' 
      //           can't be used to index type '{}'.
      //        No index signature with a parameter of type 'number' was found on type '{}'.ts(7053)
      state.hashKeys[i] = (child.props && child.props.hashKey) || `step${i + 1}`
      state.hashKeys[state.hashKeys[i]] = i
    })

   ...

导出接口TState{
活动步骤？：编号
哈希键：{
[键：数字]：字符串
}
}
导出默认类StepWizard扩展PureComponent{
构造函数（props:IStepWizardProps）{
超级（道具）
this.state=this.initialState（）
}
initialState=（）=>{
常量状态={
活动步骤：0，
哈希键：{}，/*{
//创建哈希键映射
//下面给出了一个TS错误
//错误：（属性）哈希键：{}
//元素隐式具有“any”类型，因为表达式的类型为“number”
//无法用于索引类型“{}”。
//在类型{}上找不到具有“number”类型参数的索引签名。ts（7053）
state.hashKeys[i]=（child.props&&child.props.hashKey）| | `步骤${i+1}`
state.hashKeys[state.hashKeys[i]]=i
})
...

我为

state.hasKeys[I]

（属性）hashKeys:{} 元素隐式具有“any”类型，因为“number”类型的表达式不能用于索引类型“{}”。

---

在类型{}上找不到带有参数“number”类型的索引签名。ts（7053）

问题似乎来自哈希键的定义

{}

Typescript不知道键/值的数据类型，但是，您可以告诉它

const hashKeys={}作为记录；
常数x=哈希键[0]；

例如：

const state={
活动步骤：0，
哈希键：{}作为记录，//或任何类型
};

选项1：

导出接口TState{
活动步骤？：编号；
哈希键：{
[键：数字]：字符串
} | {};
}

此语法表示

哈希键

的形状可以是

{[key:number]：string}

或

{}

如果您想提高该联盟的可读性，可以这样做：

类型HashMap={
[键：数字]：字符串；
}
导出接口TState{
活动步骤？：编号；
hashkey:HashMap{}；
}

选项2：（pssst可能不是最优的-见选项3）

Partial

构造一个所有属性都设置为optional的类型，这意味着

{}

同时具有不存在的键和值属性，符合定义

类型HashMap={
[键：数字]：字符串；
}
导出接口TState{
活动步骤？：编号；
哈希键：部分
}

备选案文3： ，这种方法在“正确性和生产力之间取得平衡”方面做得更好

类型HashMap={
[键：数字]：字符串；
}
导出接口TState{
活动步骤？：编号；
hashkey:HashMap；
}
//
常量状态={
活动步骤：0，
哈希键：{}作为哈希映射，
};

const-state:TState={activeStep:0，hashKeys:{}}也能工作吗？@非常感谢。我从你的TS答案中学到了很多东西：D