接口定义
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"];
用字符串索引的接口:
扫描二维码关注公众号,回复:
17154021 查看本文章
interface Names {
[x: string]: string;
// y: number // 类型“number”的属性“y”不能赋给“string”索引类型“string”。
// 混用
[y: number]: string;
}