Vue3 从入门到入土(TypeScript接口)
前言
在上一章, 我们就写过简单的接口, 本章更深入的了解接口
接口是对象的状态(属性)和行为(方法)的抽象(描述)
接口
以例子来了解, 我们有这样的需求
定义一个对象存放用户信息, 有四种属性
- id 是 number 类型, 必须有, 并且只读
- age 是 number 类型, 必须有
- name 是 string 类型, 必须有
- sex 是 string 类型, 可以没有
可选/只读属性
(()=>{
// 接口是一种类型/规范/规则/能力/约束
// 定义一个接口 IUser
// 接口一般以 I 开头
interface IUser{
readonly id: number, // 在定义时, 指定 readonly 代表这个属性是只读的
name: string,
age: number,
sex?: string, // 在定义时, 指定 ? 代表这个属性是可为空的, 不指定默认必须存在
}
// 定义一个对象
const u1:IUser={
id: 1,
name: "u1",
age: 18,
}
const u2:IUser={
id: 2,
name: "u2",
age: 19,
sex: "男",
}
// u2.id = 3 // 在实例化后, 无法对只读属性进行重新赋值
})()
函数类型
上面的接口都是作为对象使用, 其实他也可以作为函数的类型使用
(()=>{
// 接口是一种类型/规范/规则/能力/约束
// 定义一个接口 SearchFunc, 作为函数约束使用
interface SearchFunc{
// 传入两个参数, 都是字符串, 返回 bool
(source: string, subString: string): boolean
}
// 定义一个函数, mySearch, 遵守接口 SearchFunc
const mySearch: SearchFunc = function(source: string, sub: string): boolean{
return source.search(sub) > -1
}
console.log(mySearch("abcd", "bc"))
})()
类实现接口
(()=>{
// 接口是一种类型/规范/规则/能力/约束
// 一个类可以实现多个接口
// 一个接口可以继承多个接口
// 定义接口 Alarm
interface Alarm{
// 实现 alert 方法
alert(): any;
}
// 定义接口 Light
interface Light{
// 实现 lightOn 方法
lightOn(): void;
// 实现 lightOff 方法
lightOff(): void;
}
// 定义类 Car, 实现接口 Alarm
// implements 关键字, 指定继承接口 Alarm
class Car implements Alarm{
// 继承后必须实现接口定义的方法
alert() {
console.log("alert");
}
}
// 定义类 Car1, 实现接口 Alarm 和 Light
class Car1 implements Alarm, Light{
// 必须同时实现接口 Alarm 和 Light 的方法
alert() {
console.log("alert");
}
lightOff(): void {
console.log("off");
}
lightOn(): void {
console.log("on");
}
}
})()
接口继承接口
(()=>{
// 接口是一种类型/规范/规则/能力/约束
// 接口继承接口
// 定义接口 Alarm
interface Alarm{
// 实现 alert 方法
alert(): any;
}
// 定义接口 Light
interface Light{
// 实现 lightOn 方法
lightOn(): void;
// 实现 lightOff 方法
lightOff(): void;
}
// 接口 LightAlarm 继承 Alarm 和 Light
interface LightAlarm extends Alarm, Light{
simple(): void;
}
// 定义类 Car1, 实现接口 LightAlarm
class Car1 implements LightAlarm{
// 必须同时实现接口 Alarm 和 Light 和 LightAlarm 的方法
alert() {
console.log("alert");
}
lightOff(): void {
console.log("off");
}
lightOn(): void {
console.log("on");
}
simple(): void{
console.log("simple")
}
}
})()