12接口
# 接口(interface)
TypeScript的核心原则之一是对值所具有的结构进行类型检查,它有时被称做“鸭式辨型法”或“结构性子类型化”。- 在
TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
==注意:接口只能作用于对象类型。==
# 1、接口的使用
- 比如,定义了一个
fn函数,函数里面传一个对象,然后返回对象里面的属性。这个时候就会报错
const fn = (obj)=>obj.name
1
应该这样使用,使用接口去描述这个类型
interface Obj{
name:string
age:number
sex:string
}
const fn = (obj:Obj)=>obj.name
1
2
3
4
5
6
7
2
3
4
5
6
7
//函数写法
interface Fn{
(num1:number,num2:number):number
}
let fn:Fn=function(num1:number,num2:number):number{
return num1+num2
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2、可选属性
- 在使用接口去描述一个创建对象的时候,会发现,对象的属性必须跟接口一模一样,多了或少了都不行
interface Obj{
name:string
age:number
sex:string
}
let o:Obj = {
name:"小明",
age:18,
sex:"男"
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
但有时候需要某个值为可选属性【这里加?就有可选功能】
interface Obj{
name:string
age:number
sex?:string//这里的sex是指即可以是字符串,也可以是undefined
}
let o:Obj = {
name:"小明",
age:18,
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
==这样,o对象没有sex属性也不会报错。==
# 3、只读属性
- 添加只读属性后,无法修改
interface Obj{
name:string
readonly age:number
}
let o:Obj = {
name:"小明",
age:18,
}
o.age = "18"//无法分配到"age",因为它是只读属性
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 4、函数类型
- 接口可以用来描述函数类型。函数属于对象类型。
interface Fn{
(arg:string):string
}
let fn:Fn = (arg:string):string=>{
return arg
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 5、可索引类型
- 可索引类型是指一个对象里面的字段可以索引,一般用于描述对象和数组类型
//描述数组类型,idx代表索引的意思,可改成任意变量。左边的number代表索引类型是数字类型。右边的number代表值为number类型。
interface Arr{
[idx:number]:number
}
let arr:Arr = [1,2,3]
//描述对象类型,对象也是可以用索引描述的类型。左边的string代表key的类型是字符串,在这里为name。右边的string代表值为string类型。
interface Obj{
[key:string]:string
}
let obj:Obj = {name:"小明"}
//复用性 可以用于多个对象的属性复用
interface Obj{
name:string;
age:number;
sex:string;
[key:string]:string|number;
}
let obj:Obj = {
name:"小明",
age:18,
sex:"男",
hobby:"篮球",
address:"黄村",
height:180
}
let obj2:Obj = {
name:"小红",
age:19,
sex:"女",
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//练习
//数组字符串接口
interface Arr{
[idx:number]:number|string//复用性 可以用于多个对象的属性复用
}
let arr:Arr=[1,2,3,4,"5"]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 6、继承接口
interface Animal{
name:string
call:()=>void
}
interface Person extends Animal{
age:number
sex:string
}
let p:Person = {
name:"小明",
age:18,
sex:"男",
call:()=>console.log("呵呵")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//练习
//接口继承
interface Animal{
name:string
}
interface Cat extends Animal{
age:number
}
let c:Cat={
name:"张三"
age:18
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 7、类继承接口
interface Animal{
name:string;
}
class Person implements Animal{
//name!:string; //加【!】就不用谢构造函数
name:string;
constructor(name:string){
this.name = name
}
}
let c = new Cat("张三")
console.log
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
上次更新: 2023/08/06, 00:38:41