定义接口
interface 类型名称 {
属性名: 类型名称,
}
在定义接口类型或者是定义类时,建议使用大驼峰命名,使用变量建议使用小驼峰命名,
UserInfo: 大驼峰
userName: 小驼峰
定义接口如下:
// 定义一个用户信息类型的接口
interface UserInfo {
name: string,
age: number,
gender: string
}
此时已经定义好一个接口,使用接口类型需要注意,接口类型中的属性必须在要实现它的变量中使用,如下所示:
const user: UserInfo = {
name: '张三',
age: 24
gender: '男'
}
接口中定义了三个属性,则使用接口时必须实现三个属性,否则会提示缺少参数的错误提示;但在实际开发中,有的属性不是必须的,比如gender
,那我们可以将gender
单独设置为可选属性,只要在gender
后添加?
即可,代码如下:
interface UserInfo {
name:string,
age: number,
// 加上?后就会变为可选属性了
gender?: string
}
const user: UserInfo = {
name: '张三',
age: 24
// 此时不写gender属性也不会在提示错误信息
}
以上是简单的接口调用,但实际中可能会遇到更加复杂的调用情况,比如,接口调用自身接口属性,代码如下所示:
interface UserInfo {
name: string,
age: number,
gender?: string,
// 此时引用了自身接口作为数组类型
studentList: UserInfo[]
}
// 接口使用
const user: UserInfo = {
name: '张三',
age: 22,
gender: '男',//可写可不写
studentList:[
{
name: '张三一',
age: 15,
studentList:[]
},
{
name: '张三二',
age: 16,
studentList:[]
}
]
}
调用自身接口,可以省去多次定义相同的接口;
接口的继承
有时候接口中定义的一些属性不能够满足我们的需要,比如,在特定用户下添加个管理权限,那我们就可以通过继承来实现,代码如下;
interface UserInfo {
name: string,
age: number,
gender?: string,
studentList: UserInfo[]
}
interface Admin extends UserInfo{
authorityLevel: number
}
// 定义一个变量admin,继承Admin接口,此时Admin继承了UserInfo,那么相当于变量admin继承了Admin也继承了UserInfo
const admin extends Admin = {
name: '李四',
age: 16,
gender: '男',
authorityLevel: 1,// 这是Admin中定义的新属性
studentList:[
{
name: '李四一',
age:15,
studentList:[]
}
]
}
对于小的改动,除了使用接口继承还可以使用其他的方法来实现,代码如下:
// 通过Omit方法移除掉不想要的属性,参数释义: UserInfo为目标对象,age和studentList表示要移除的属性,多个属性,中间需要添加 | 分割;
interface Admin1 extends Omit<UserInfo,'age' | 'studentList'> {
authorityLevel:number;
}
const admin1: Admin1 = {
name: 'Tom',
gender:'男',//可写可不写
authorityLevel:1,
}