接口定义
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;
}