(三)typescript之接口

1.什么是接口

用于约束类、对象、函数的标准

 

2.接口的使用

（1）约束对象

interface IFullName {
    firstName:string,
    lastName:string
}
const fullName = ({firstName,lastName}:IFullName):string =>{
    return firstName + lastName
}

对象接口可以用来描述对象的形状结构

interface IVegetables {
    readonly color:string,
    size:string
}
interface IVegetables{
    age?:number, // ？标识的属性为可选属性
    taste:'sour'|'sweet'
}
const tomato:IVegetables = {
    color:'red',
    size:'10',
    taste:'sour'
}
tomato.color = 'green'; // 仅读属性不能进行修改

 

（2）约束函数

interface IFullName {
    firstName:string,
    lastName:string
}
// 接口约束函数
interface IFn {
    (obj:IFullName):string
}
const fullName:IFn = ({firstName,lastName})=>{
    return firstName + lastName
}

 

（3）约束类

interface Speakable {
    name:string;
    speak():void;
}
interface ChineseSpeakable{
    speakChinese():void
}
// 接口实现类 需要用到implements关键字
class Speak implements Speakable,ChineseSpeakable{
    name!:string
    speak(){}
    speakChinese(){}
}

 

3.接口和类型别名的区别

// 约束对象和函数时，也可以使用类型别名来实现

type IFullName = {

　　firstName: string;

　　lastName: string;

};

type IFn = (obj: IFullName) => string;

const fullName: IFn = ({ firstName, lastName }) => {

　　return firstName + lastName;

};

 

那它们之间有什么区别呢？

共同点：

都不会出现在编译结果中

不同点：

1.类型别名不能约束类，接口可以约束类

2.类型别名不能继承，接口可以实现继承

interface Speakable {
    speak():void
}
interface SpeakChinese extends Speakable{
    speakChinese():void
}
class Speak implements SpeakChinese{
    speakChinese(): void {
        throw new Error("Method not implemented.");
    }
    speak(): void {
        throw new Error("Method not implemented.");
    }
}