如何区分打字稿索引签名和JS计算的属性名称

Question

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

What does 'changes: {[propName: string]: SimpleChange}' do? I'm a little confused between when it is an indexable object or Computed Property Names.

Answer 1

{[propName: string]: SimpleChange} is just an index signature, it does not have anything to do with computed properties.

Computed properties occur in object literals and, depending on the computed property, typescript will either infer a computed property (if the property is a literal type) or an index signature (if the property is a property key base type):

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

You can also declare an object type with a computed property explicitly, but the property must be a string, number or symbol literal type:

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