时间戳

首页 > 解决方案 > 如何区分 typescript 索引签名和 JS 计算属性名称

javascript - 如何区分 typescript 索引签名和 JS 计算属性名称

问题描述

ngOnChanges(changes: {[propName: string]: SimpleChange}): void {
    console.log('Changes', changes);
  }

'changes: {[propName: string]: SimpleChange}' 有什么作用？当它是可索引对象或计算属性名称时，我有点困惑。

标签： javascripttypescript

解决方案

{[propName: string]: SimpleChange}只是一个索引签名，它与计算属性没有任何关系。

计算属性出现在对象文字中，并且根据计算属性，打字稿将推断计算属性（如果属性是文字类型）或索引签名（如果属性是属性键基类型）：

let propName = "a"; // string 
let o = { [propName] : 10 } // {[x: string]: number;}
o["A"] // ok

const constPropName = "a"; // "a"
let o2 = { [constPropName] : 10 } // {[constPropName]: number;}
o2["A"] //err

您还可以显式声明具有计算属性的对象类型，但该属性必须是字符串、数字或符号字面量类型：

const constPropName = "a"; // "a"
type computed = { [constPropName] : number }

推荐阅读