接口定义
interface List { id: number; name: string; } interface Result { data: List[]; } function render(result: Result) { result.data.forEach(value => { console.log(value.id, value.name); }) } let result = { data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] }; render(result);
如果传入对象字面量的话，ts 会对额外的字段进行类型检查，sex 就会报错
render({ data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] })
绕过这种检查的方法一共有三种
第一种：就是上面赋值给一个变量，然后传入
第二种：使用类型断言（明确告诉编译器我们的类型就是 Result，这样编译器就会绕过检查）
render({ data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] } as Result);
或者使用 <Result>，建议使用 as，这种在 react 中会产生歧义
render(<Result>{ data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] });
第三种：使用字符串索引签名：用任意的字符串去索引 List
interface List { id: number; name: string; [x: string]: any; }
接口成员属性
可选属性
interface List { id: number; name: string; // [x: string]: any; age?: number; } 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); } }) } let result = { data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] }; render(result);
只读属性：不容许修改
interface List { readonly id: number; name: string; // [x: string]: any; age?: number; } 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++; // 无法为“id”赋值，因为它是只读属性。 }) } let result = { data: [ { id: 1, name: 'a' , sex: "male"}, { id: 2, name: 'b' }, { id: 3, name: 'c' }, ] }; render(result);
不确定一个接口中有多少属性时，就可以使用可索引类型的接口，可以用数字跟字符串去索引。
用数字索引的接口：
interface StringArray { [index: number]: string; } let chars: StringArray = ["A", "B"];
用字符串索引的接口：
interface Names { [x: string]: string; // y: number // 类型“number”的属性“y”不能赋给“string”索引类型“string”。 // 混用 [y: number]: string; }
