个人笔记-TypeScript中的对象类型接口

对象类型接口

用TS的interface去描述使用的那个接口所的返回的数据类型和结构

传入对象

interface List {
  id: number,
  name: string
}

interface Result {
  data: List[]  //定义data是一个List数组 即数组中的每一项都是一个List
}

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

let res1 = {
  data: [
    {id: 1, name: 'a'},
    {id: 2, name: 'b'}
  ]
}

let res2 = {
  data: [
    {id: 1, name: 'a', sex: 'male'}, // 不会报错 只要满足必要的字段就可以，有多余字段也没有问题
    {id: 2, name: 'b'}
  ]
}

render(res1) // 1 "a"  2 "b"
render(res2) // 1 "a"  2 "b" // 传入对象 不会报错

直接传入对象字面量

render({
  data: [
    {id: 1, name: 'a', sex:"male"}, // 在直接传字面量对象的情况下多传sex属性，TS报错
    {id: 2, name: 'b'}
  ]
})

类型断言

使用类型断言 as, 这样就可以绕过TS的类型检查 避免直接传入字面量对象后报错

render({
  data: [
    {id: 1, name: 'a', sex:"male"}, // 不报错
    {id: 2, name: 'b'}
  ]
} as Result); // 使用类型断言明确的告诉TS我们知道这个对象的类型就是Result 这样就不会报错了、

字符串索引签名

//改造上面的List接口
interface List {
  id: number,
  name: string,
  [x: string]: any // 可以使用任意的字符串索引得到任意的值 这样List就可以支持多个属性了
}
// 现在直接用传入上边会报错的那个字面量对象，会发现不报错了
render({
  data: [
    {id: 1, name: 'a', sex:"male"}, // 现在就不会报错了
    {id: 2, name: 'b'}
  ]
})

可选属性

// 如果要判断List中有没有age这个属性呢,你直接去判断的话，会报错说List上没有age这个属性，那这个时候就要用到可选属性了
interface List {
  id: number,
  name: string，
  age?: number // 直接在键名后边加上一个问号就可以了 表示这个属性可以有也可以没有
}
let res3 = {
  data: [
    {id: 1, name: 'a', sex: 'male'},
    {id: 2, name: 'b'，age；17}
  ]
}
function render(result: Result) {
  result.data.forEach(element => {
   console.log(element.id, element.name)
   if (element.age) {  //这时候就不会报错了
      console.log(element.age)   // 17
   }
 })
}
render(res3)

只读属性

interface List {
  readonly id: number, // 在属性名前面加上readonly表述这是一个只读，不允许修改，尝试修改会报错
  name: string
}

可索引类型接口

在不确定一个接口中有哪些属性的时候就可以使用索引类型接口

数字索引

interface StringArray {  // 相当于定义了一个字符串类型的数组
    [index: number]: string
}
let chars: StringArray = ['A', 'B']

字符串索引

interface names {  // 等于定义了一个对象接口
    [index: string]: string
}
let chars: names = {'A': 'wang', 'B': 'li'}