关于typeScript中接口的一些理解

迷南。 2022-08-28 07:41 240阅读 0赞

### 文章目录 ###

*  前言
 *  一、文档说明示例及疑问点
 *   *  疑问点：在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。
     *   *  证明：要证明上述理解正确，只需要在Control类内部通过该实例访问其state属性即可
         *  不确定的地方
         *  目前的理解
 *  注

--------------------

# 前言 #

在最近学习TypeScript中接口相关知识的过程中，遇到了一个让我十分困惑的地方。就是 **接口继承类** 这部分。文档上给的例子和他的解释看起来并无关系，在网上又找了好多，大部分都是照搬源文档，cv工程师，属实给我整不会了。在此记录下当前自己的理解吧。

--------------------

# 一、文档说明示例及疑问点 #

> 当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。
> 
> 当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。 这个子类除了继承至基类外与基类没有任何关系。 例：
> 
>     class Control { 
>        private state: any;
>     }
>     
>     interface SelectableControl extends Control { 
>        select(): void;
>     }
>     
>     class Button extends Control implements SelectableControl { 
>        select() {  }
>     }
>     
>     class TextBox extends Control { 
>        select() {  }
>     }
>     
>     // 错误：“Image”类型缺少“state”属性。
>     class Image implements SelectableControl { 
>        select() {  }
>     }
>     
>     class Location { 
>     
>     }
> 
> 在上面的例子里，SelectableControl包含了Control的所有成员，包括私有成员state。 因为 state是私有成员，所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。
> 
> 在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。 实际上， SelectableControl接口和拥有select方法的Control类是一样的。 Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。

## 疑问点：在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。 ##

首先，什么叫做**接口的实例**，按照我个人的理解以及身边后端人员的分析，所谓的接口的实例，就是指通过`new`运算符生成的实现了该接口的实例对象。在上述代码中，等于是`new Button();`

### 证明：要证明上述理解正确，只需要在Control类内部通过该实例访问其state属性即可 ###

class Control { 
      private state: any = "Control"; // 先写死，有助于判断
      fn() { 
        console.log(new Button2().state);
      }
    }
    
    interface SelectableControl extends Control { 
      select(): void;
    }
    
    class Button extends Control implements SelectableControl { 
      select() {  }
    }
    
    new Control().fn() // Control

### 不确定的地方 ###

如下所示，通过继承Control得到的Button2也可以直接访问到Control。并没有实现SelectableControl接口。

class Control { 
      private state: any = "Control"; // 先写死，有助于判断
      fn() { 
        console.log(new Button2().state);
      }
    }
    
    interface SelectableControl extends Control { 
      select(): void;
    }
    
    class Button2 extends Control { 
    }
    
    new Control().fn() // Control

### 目前的理解 ###

接口在Ts中仅仅作为一种检验的规范，就如同文档上说的那样，只注重与外形。所以实现某个接口，和直接将方法写在类中效果是类似的。上面的代码通过`extends`关键字继承得到了父类的私有属性`state`，本质上和`Button`并无差异。区别仅在于`Button`实现了`SelectableControl`接口，满足规范。

# 注 #

如果有不正确的地方，还请指出，因为网上相关的解释比较少，而接口继承类在java中也没有类似的，所以可能缺乏正确的理解。