接口

接口可以在面向对象编程中表示行为的抽象,也可以描述对象的形状。 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 (接口中不能含有具体的实现逻辑)

接口可以被实现、被继承, type不能。

type可以写联合类型

接口可以描述对象

  1. interface Obj {
  2. a: number,
  3. b: number
  4. }
  5. const sum = (obj: Obj): number => obj.a + obj.b
  6. sum({a: 1, b:2})
  • 接口一方面可以在面向对象编程中表示为行为的抽象,另外可以用来描述对象的形状
  • 接口就是把一些类中共有的属性和方法抽象出来,可以用来约束实现此接口的类
  • 一个类可以继承另一个类并实现多个接口
  • 接口像插件一样是用来增强类的,而抽象类是具体类的抽象概念
  • 一个类可以实现多个接口,一个接口也可以被多个类实现,但一个类的可以有多个子类,但只能有一个父类

  • interface中可以用分号或者逗号分割每一项,也可以什么都不加

对象的形状

  1. //接口可以用来描述`对象的形状`,少属性或者多属性都会报错
  2. interface Speakable{
  3. speak():void;
  4. name?:string;//?表示可选属性
  5. }
  6. let speakman:Speakable = {
  7. speak(){},//少属性会报错
  8. name,
  9. age//多属性也会报错
  10. }

行为的抽象

  1. //接口可以在面向对象编程中表示为行为的抽象
  2. interface Speakable{
  3. speak():void;
  4. }
  5. interface Eatable{
  6. eat():void
  7. }
  8. //一个类可以实现多个接口
  9. class Person implements Speakable,Eatable{
  10. speak(){
  11. console.log('Person说话');
  12. }
  13. eat(){}
  14. }
  15. class TangDuck implements Speakable{
  16. speak(){
  17. console.log('TangDuck说话');
  18. }
  19. eat(){}
  20. }

同名的接口可以写多个,类型会自动合并:

  1. interface A {
  2. name: string;
  3. }
  4. interface A {
  5. age: number
  6. }
  7. const obj: A = {
  8. name: 'f',
  9. age: 18
  10. };

任意属性

  1. //无法预先知道有哪些新的属性的时候,可以使用 `[propName:string]:any`,propName名字是任意的
  2. interface Person {
  3. readonly id: number;
  4. name: string;
  5. [propName: string]: any;
  6. }
  7. let p1 = {
  8. id:1,
  9. name:'f',
  10. age:10
  11. }

接口的继承

  • 一个接口可以继承自另外一个接口
    1. interface Speakable {
    2. speak(): void
    3. }
    4. interface SpeakChinese extends Speakable {
    5. speakChinese(): void
    6. }
    7. class Person implements SpeakChinese {
    8. speak() {
    9. console.log('Person')
    10. }
    11. speakChinese() {
    12. console.log('speakChinese')
    13. }
    14. }

    readonly

    有时我们只希望对象中的某些属性在创建的时候被赋值,之后就不能再修改了,这个时候我们可以在接口中给这个属性添加 readonly 。用 readonly定义只读属性可以避免由于多人协作或者项目较为复杂等因素造成对象的值被重写。
    1. interface Person{
    2. readonly id:number;
    3. name:string
    4. }
    5. let p:Person = {
    6. id :1,
    7. name:'zhufeng'
    8. }
    9. // 这里会报错,因为 id 属性为只读属性,不能再被修改了
    10. p.id = 1; // error TS2540: Cannot assign to 'id' because it is a read-only property.
    ```typescript interface Person{ readonly id:number; name:string } let p:Person = { name:’zhufeng’ }
  1. <a name="RX2yy"></a>
  2. # 函数类型接口
  3. 对方法传入的参数和返回值进行约束
  4. ```typescript
  5. interface Discount {
  6. (price: number): number
  7. }
  8. const discount: Discount = (price: number): number => price * 0.8;

可索引接口

  • 对数组和对象进行约束
  • userInterface 表示index的类型是 number,值的类型必须是 string
  • UserInterface2 表示:index 的类型是 string,值的类型必须是 string ```typescript interface UserInterface {

}

let arr: UserInterface = [‘1’, ‘2’];

interface UserInterface2 {

} let obj: UserInterface2 = { 1: ‘1’, 2:’2’ };

  1. <a name="sOuG6"></a>
  2. # 类接口
  3. 类接口可以对类的进行约束:
  4. ```typescript
  5. interface Speak {
  6. name: string,
  7. speak(): void
  8. }
  9. class Person implements Speak {
  10. name!: string;
  11. // Class 'Person' incorrectly implements interface 'Speak'.Property 'speak' is missing in type 'Person' but required in type 'Speak'.
  12. speak() { }
  13. eat() {}
  14. }

上面的例子中,如果我们在 Person 类中没有实现 speak 方法会报错。

构造函数的类型

  • 在 TypeScript 中,我们可以用 interface 来描述类
  • 同时也可以使用 interface 里特殊的 new() 关键字来描述类的构造函数类型 ```typescript interface Person { // 不加new是修饰函数的,加new是修饰类的 new(name:string):Person } class Person { constructor(public name:string) {} }

function personFactory(clazz: Person, name: string) { return new clazz(name); }

const p = personFactory(Person, ‘f’); console.log(p); // {name: ‘f’}

  1. 我们写一个类的时候会得到两个类型,一个是构造函数的函数类型,另一个是类的实例类型。
  2. ```typescript
  3. class Person { }
  4. // 实例类型
  5. const p1: Person = new Person();
  6. // 构造函数类型的函数类型
  7. const p2: typeof Person = Person;

注意:上述代码的 typeof 是 TS 中的,不是 JS 中的,我们可以用它来获取一个变量或对象的类型

  1. const obj = {name: 'f', age: 18};
  2. const b: typeof obj = 1;

上述代码会报错,我们把鼠标放到变量 b 上面,从提示框可以看到如下内容:
Snip20220318_445.png
可以看到 b 需要赋值一个具有 name 和 age 属性的 对象。

接口使用,其他常见的情况:

  1. interface A {
  2. // 函数
  3. (name: string): any,
  4. // 这样写,是给函数加一个属性
  5. age: number
  6. }
  7. interface B {
  8. // 对象的一个属性
  9. speak:()=>void
  10. }
  11. const a: A = (name: string) => '';
  12. a.age = 18;
  13. const b: B = {
  14. speak() { }
  15. };

抽象类 VS 接口

  • 不同类之间公有的属性或方法,可以抽象成一个接口(Interfaces)
  • 而抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 抽象类本质是一个无法被实例化的类,其中能够实现方法和初始化属性,而接口仅能够用于描述,既不提供方法的实现,也不为属性进行初始化
  • 一个类可以继承一个类或抽象类,但可以实现(implements)多个接口
  • 抽象类也可以实现接口 ```typescript abstract class Person { name!: string; abstract speak(): void; constructor(name:string) { this.name = name; };

} interface Eat { eat():void }

class F extends Person implements Eat { eat() { console.log(‘eat’) } speak() { console.log(‘speak’) } } const f = new F(‘f’); f.speak(); f.eat(); ```

接口和类型别名的区别

typeScript interface和type区别

不同点:

  • 扩展语法: interface使用extends,type使用‘&’
  • 同名合并:interface 支持,type 不支持。
  • 描述类型:对象、函数两者都适用,但是 type 可以用于基础类型、联合类型、元祖。
  • 计算属性:type 支持计算属性,生成映射类型,;interface 不支持。

相同点:

  • 两者都可以用来描述对象或函数的类型
  • 两者都可以实现继承