ts遍历对象

210 阅读1分钟

前提

keyof 得出一个对象的联合类型

const obj2 = {
  name: '小明',
  age: 18,
  manFlag: true
}

let key: keyof obj;
// "name" | "age" | "manFlag"

方法一

修改tsconfig.json对应的配置,取消相关校验

{
  "suppressImplicitAnyIndexErrors": true
}

方法二

对接口声明添加扩展
添加[propName: string]: any;

interface ObjInter {
  name: string;
  age: number;
  manFlag: boolean;
  [propName: string]: any;
}

const obj1 = {
  name: '小明',
  age: 18,
  manFlag: true
}

const obj2 = {
  name: '小花',
  age: 20,
  manFlag: false,
  address: '安徽省',
  email: '123@163.com'
}

for (let key in obj) {
  obj[key] = obj2[key];
}

方法三

利用 extends keyof,具体见示例

// 声明接口类型
interface ObjInter {
  name: string;
  age: number;
  manFlag: boolean;
}

// 目标对象
const obj1 = {
  name: '小明',
  age: 18,
  manFlag: true
}

// 取值对象
const obj2 = {
  name: '小花',
  age: 20,
  manFlag: false,
  address: '安徽省',
  email: '123@163.com'
}

// 循环赋值操作
let key: keyof ObjInter;
for (key in obj) {
  setValue(key, obj2[key]);
}

function setValue<T extends keyof ObjInter>(key: T, value: ObjInter[T]) {
  obj[key] = value;
}

对上面方法进一步封装,输出对象的某个属性值,或者设置对象的某个值

// 属性赋值
function setValue<T extends keyof K, K>(key: T, value: K[T], targetObj: K) {
  targetObj[key] = value;
}
// 获取属性值
function getValue<T extends keyof K, K>(key: T, obj: K) {
  return obj[key];
}