typescript - 使用 typescript 中的变量修改对象属性

标签 typescript

在 js 中,我有一个函数可以根据参数修改包含在对象列表中的对象的属性:

function edit(object, key, property, value){
  object[key][property] = value;
}

我如何设法在 TypeScript 中执行相同的功能?

从现在开始我做了这个:

function edit(object: ObjectList, key: string, property: string, value: number){
  object[key][property] = value;
}

但这不起作用,并给了我一个 Element 隐式地​​具有“any”类型,因为类型“string”的表达式不能用于索引类型“{ name: string;精通:数; parent_skill:数字; access_level:数字;成本:字符串;成本值:数字;背景颜色:数字[];字体颜色:数字[];描述:字符串;所需技能:数字[]; }'。在类型 '{ name: string; 上找不到参数类型为 'string' 的索引签名精通:数; parent_skill:数字; access_level:数字;成本:字符串;成本值:数字;背景颜色:数字[];字体颜色:数字[];描述:字符串;所需技能:数字[]; }'

我希望能够像这样调用函数:

edit(myObject, "first", "oneProperty", "newValue1");

结果将是我在 myObject 中的“第一个”项目的“oneProperty”属性将具有“newValue1”。

更多信息: 我的对象列表

type SkillList = {
  [key: string]: Skill;
};

我的目标

type Skill = {
  name: string;
  mastery: number;
  parent_skill: number;
  access_level: number;
  cost: string;
  cost_value: number;
  background_color: number[];
  font_color: number[];
  description: string;
  required_skills: number[];
};

最佳答案

答案将是一个通用函数:

代码

function edit<O extends ObjectList, K extends keyof O, P extends keyof O[K]>(object: O, key: K, property: P, value: O[K][P]){
  object[key][property] = value;
}

Playground

解释

首先,我们有一个通用类型O,它让我们可以使用输入的对象类型,例如可能缩小 [key: string]: Skill;.

然后我们有泛型类型 K,它引用 O/object 中的所有键。

之后我们有了泛型 P,它引用了 object[key] 中的所有属性。

最后我们有 O[K][P] 告诉 typescript 使用 object[key][property] 的类型。这可能是最有用的部分,因为它防止用 number 覆盖 string,例如 edit(mySkillObject, "first", "name", "newValue1");

关于typescript - 使用 typescript 中的变量修改对象属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63161961/

相关文章:

typescript - 如何在 Angular2 中输入 routeParams?

javascript - Typescript strictNullChecks 跨函数检查

angular - Karma 输入参数单元测试

javascript - 显示来自嵌套路由的组件数据 - Angular

typescript - 使用条件类型作为返回类型无法正常工作

javascript - javascript 中共享排序函数的问题

node.js - 如何在 typescript 和 ts-jest 中调试测试?

javascript - 开 Jest ReferenceError : Cannot access '' before initialization

javascript - 如何使 JSON.stringify 仅序列化 TypeScript getter?

Typescript 变量赋值导致 linting 错误