react+typescript实例：实现上下一步流程图

做项目遇到一个需求，有5步，每一步都有权限控制，并且第一步和第二步需要数据缓存，之前只有两三步可以写死然后各种判断，但是这次加了5步之后，还那样，是要死的节奏啊。之前的代码是去年刚毕业写的，现在看，真是惨不忍睹，这次要优化下。

先看实例图吧，没写什么样式，大致功能是这样：

项目连接

1、遇到的问题

1) 声明变量定义类型

在循环中获取定义变量对象的值，然后报错，当时未声明变量的类型；
Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type；


搜索了一下，在tsconfig.json里添加 "noImplicitAny": false；

后面又具体看了下给的提示，”没有索引签名“，那就给step变量声明个类型：
这个索引签名表示了当用 string去索引stepType时会得到boolean类型的返回值。

type stepType = {
  [index: string]: boolean,
}
const step:commonType =  {
      step1: true,
      step2: true,
      step3: true,
      step4: true,
};

2）foreach退出循环

用return和break只能退出本次循环，终止循环只能使用throw

const {type} = this.state
// 代表从接口获取到的值
const step:commonType =  {
  step1: false,
  step2: true,
  step3: true,
  step4: true,
};
try {
  Object.keys(step).forEach(key => {
    // 找到第一个显示的流程，改变头部颜色
    if(step[key]){
      type[key] = 'active'
      throw new Error()
    }
  })
} catch (e) {}

3) 类型“ObjectConstructor”上不存在属性“assign”。