TypeScript中使用for...in遍历对象属性会报错的解决办法

540 阅读1分钟

之前有一个用ts写的react项目,在里面使用for…in遍历对象属性时报了个错,类似下面这种:

61046296625743e5934e1de1df3fc629-2.png

当时的解决办法:在 tsconfig.json 文件中加入下面被注释掉的那一行代码,即把 抑制隐式索引错误 置为真

"compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "moduleResolution": "node",
  "resolveJsonModule": true,
  // "suppressImplicitAnyIndexErrors": true,
  "importHelpers": true,
  "jsx": "react-jsx",
  "esModuleInterop": true,
  "sourceMap": true,
  "baseUrl": "./",
  "strict": true,
  "paths": {
  "@/*": ["src/*"],
  "@@/*": ["src/.umi/*"]
},
  "allowSyntheticDefaultImports": true
},

其实产生报错的根本原因是ts无法判断value是什么类型,所以给了any。更好的解决办法:

const obj = {
  name: "wsh",
  age: 19,
};

let key: keyof typeof obj; // "name" | "age"
for (key in obj) {
  // value的类型为 string | number
  let value = obj[key];
}