Typescript的接口详解

1.介绍

TypeScript作为JavaScript的超集,其各类前端框架应用之广(angular,react,vue三大框架都已经应用上了),以及社区的活跃度,以及成为前端必学的知识之一。而接口是TypeScript的核心原则之一,必须要熟练掌握。接口作用是为你的代码或者第三方代码定义类型,定义契约。

例如:

1
2
3
4
5
6
7
8
9
interface personConfig{
age:number,
eat:string
}
function person(personObj: personConfig) {
console.log(personObj.eat);
}
let jessi = { age: 10, eat: "bread" };
person(jessi);

2.属性

2.1可选属性

上面person函数需要传两个参数,但是有时我们可能其中一个参数不是必须带的,属性是可选择的,只需要在可选属性后面添加一个?, 例如age:

1
2
3
4
interface personConfig{
age?:number,
eat:string
}

2.2只读属性

某些对象属性只允许在一开始设置,不允许修改,只需要在属性前添加readonly。例如age:

1
2
3
4
interface personConfig{
readonly age:number,
eat:string
}

2.3属性检查

当你的需要检查某个传入的参数或者变量的类型时,我们可以用类型断言判断,例如:

1
person({ name: 10, eat: "bread" } as personConfig)

当检查到name不是age的时候会报error。

3.类型

3.1.属性类接口:对传入对象进行约束

1
2
3
4
interface personConfig{
age:number,
eat:string
}

上面例子里,我们定义了personConfig接口,接口定义了对象的类型。

3.2. 函数类型接口:对方法传入的参数以及返回值进行约束 

1
2
3
4
5
6
7
8
9
interface functionConfig{
(name:string,age:number):string
}

function person({name:string,age:number}):functionConfig{
return name;
}

person({'lily',10})

上面例子里,我们定义了functionConfig接口,接口定义函数要传人参数的类型以及函数应该返回的类型。

3.3.可索引接口:对数组和对象的约束

1
2
3
4
5
6
interface personArray {
[index: number]: string;
}
let familyArray: personArray;
familyArray= ["Bob", "Fred"];
let person: string = familyArray[0];

上面例子里,我们定义了personArray 接口,它具有索引签名。 这个索引签名表示了当用number去索引familyArray时会得到string类型的返回值。 值得注意的是TypeScript支持两种索引签名:字符串和数字。 可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用number来索引时,JavaScript会将它转换成string然后再去索引对象。

3.4.类类型接口:强制一个类去符合某种契约

1
2
3
4
5
6
7
interface human{
name: string;
}
class person implements human {
name: string;
constructor(age: number, eat: tring) { }
}

与Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。