TS 对象类型接口学习一

1.对象类型接口（多余参数）

1.1 变量赋值

  interface List {
    id: number;
    name: string;
  }

  interface Result {
    data: List []
  }

  function render(result: Result) {
    result.data.forEach( v => console.log(v.id,v.name))
  }

  const result = {
    data: [
      {id:1,name: "neal",sex: "male"},
      {id:2,name: "mozzie"}
    ]
  }

  render(result)

1.2 索引签名

  interface List {
    id: number;
    name: string;
    [propName: string]: any
  }

  interface Result {
    data: List []
  }

  function render(result: Result) {
    result.data.forEach( v => console.log(v.id,v.name))
  }


  render({
    data: [
      {id:1,name: "neal",sex: "male"},
      {id:2,name: "mozzie"}
    ]
  })

1.3 类型断言

  interface List {
    id: number;
    name: string;
  }

  interface Result {
    data: List []
  }

  function render(result: Result) {
    result.data.forEach( v => console.log(v.id,v.name))
  }



  render({
    data: [
      {id:1,name: "neal",sex: "male"},
      {id:2,name: "mozzie"}
    ]
  } as Result)
  //or
  render(<Result>{
    data: [
      {id:1,name: "neal",sex: "male"},
      {id:2,name: "mozzie"}
    ]
  })

当result中data中字段有额外的字段时，解决TS报错的三种方法。

1. render前变量赋值，render中为变量(对象字面量赋值变量)
2. 采用索引签名
3. 采用类型断言