接口可以用来约束对象、函数、以及类的结构和类型

// 假设我们需要从后端拿取数据，渲染到页面，就可以这么定义接口：
interface List {    //interface定义List接口，包含两个成员
  readonly id: number; //readonly代表只读,不可修改
    name: string;
    // [x: string]: any; 字符串索引签名，用任意的字符串去索引List，可以得到任意的结果
    age?: number; //？表示这个属性可以有，也可以没有(可选属性)
}
interface Result {  // interface定义Result接口
    data: List[]
}
function render(result: Result) { // 定义渲染函数
    result.data.forEach((value) => {
        console.log(value.id, value.name)
        if (value.age) {
            console.log(value.age)
        }
        // value.id++ 声明readonly后，++的话，会报错，说只读属性不许修改
    })
}
let result = {
    data: [
        {id: 1, name: 'A', sex: 'male'},
        {id: 2, name: 'B', age: 10}
    ]
}
render(result)
//如果把result换成data:[]数组的格式传入，就会报错。让编译器绕过类型检查的解决方式：
//1.赋值给变量
//2.render({} as Result)类型断言： 表示明确的告诉编译器，这个对象的类型就是Result
//3.render(<Result>{}) 建议使用第一种，这种方法在react中会产生歧义

当你不确定一个接口中有多少个属性的时候，就可以使用可索引类型的接口。

共有支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。 也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

用数字索引的接口

//注意：数字索引签名的返回值，一定要是字符串索引签名返回值的子类型？js会对类型进行转换，将number转换成string，这样就能保持类型的兼容性
interface StringArray {
  [index: number]: string  //用任意数字去索引StringArray，都会得到一个string。
}
let chars: StringArray = ['a', 'b']

用字符串索引的接口

interface Names {
    [x: string]: any; // 用任意的string去索引Names，得到的结果都是any
    // y: number;
    [z: number]: number; // 数字签名的索引返回值一定要是字符串索引返回值的子类型
}