ts从入门到进阶—3-9接口（二）

青旅半醒 2023-08-17 17:07 48阅读 0赞

### 5.函数类型 ###

## 函数类型
    
    接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。
    
    为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
    
    ```typescript
    interface SearchFunc {
      (source: string, subString: string): boolean
    }
    ```
    
    这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。
    
    ```typescript
    let mySearch: SearchFunc
    mySearch = function(source: string, subString: string): boolean {
      let result = source.search(subString);
      return result > -1
    }
    ```
    
    对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 比如，我们使用下面的代码重写上面的例子：
    
    ```typescript
    let mySearch: SearchFunc
    mySearch = function(src: string, sub: string): boolean {
      let result = src.search(sub);
      return result > -1
    }
    ```
    
    函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。 如果你不想指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了  `SearchFunc` 类型变量。 函数的返回值类型是通过其返回值推断出来的（此例是 `false` 和 `true`）。 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 `SearchFunc` 接口中的定义不匹配。
    
    ```typescript
    let mySearch: SearchFunc
    mySearch = function(src, sub) {
      let result = src.search(sub)
      return result > -1
    }
    ```

### 6.可索引的类型 ###

*  索引的key是number,值是number。

interface StringArray {
      [index: number]: string;
    }
    
    let myArray: StringArray;
    myArray = ["Bob", "Fred"];
    
    let myStr: string = myArray[0];

*  TypeScript支持两种索引签名：字符串和数字
 *  但是数字索引的返回值必须是字符串索引返回值类型的子类型
 *   假如声明了一种类型，那么所有的属性都要遵守这个规则，看下面例子下面的例子里， `name`的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

interface NumberDictionary {
      [index: string]: number;
      length: number;    // 可以，length是number类型
      name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
    }

为了加深记忆，可以回顾一下之前的例子

interface SquareConfig {
        color?: string;
        width?: number;//此处会报错
        [propName: string]: string; //此处之前是[propName: string]: any;
    }
     
    // 以下无任何报错
    function createSquare(config: SquareConfig): { color: string; area: number } {
        let newSquare = { color: "white", area: 100 };
        if (config.colour) {
            newSquare.color = config.colour;
        }
        if (config.width) {
            newSquare.area = config.width * config.width;
        }
        return newSquare;
    }
     
    let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig);

## 可索引的类型
    
    与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如 `a[10]` 或 `ageMap['daniel']`。 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。 让我们看一个例子：
    
    ```typescript
    interface StringArray {
      [index: number]: string
    }
    
    let myArray: StringArray
    myArray = ['Bob', 'Fred']
    
    let myStr: string = myArray[0]
    ```
    
    上面例子里，我们定义了 `StringArray` 接口，它具有索引签名。 这个索引签名表示了当用 `number` 去索引 `StringArray` 时会得到 `string` 类型的返回值。
    
    TypeScript 支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 `number` 来索引时，JavaScript 会将它转换成`string` 然后再去索引对象。 也就是说用 `100`（一个 `number`）去索引等同于使用`'100'`（一个 `string` ）去索引，因此两者需要保持一致。
    
    ```typescript
    class Animal {
      name: string
    }
    class Dog extends Animal {
      breed: string
    }
    
    // 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
    interface NotOkay {
      [x: number]: Animal
      [x: string]: Dog
    }
    ```
    
    字符串索引签名能够很好的描述 `dictionary` 模式，并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 `obj.property` 和 `obj['property']` 两种形式都可以。 下面的例子里， `name` 的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：
    
    ```typescript
    interface NumberDictionary {
      [index: string]: number;
      length: number;    // 可以，length是number类型
      name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
    }
    ```
    
    最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：
    
    ```typescript
    interface ReadonlyStringArray {
      readonly [index: number]: string;
    }
    let myArray: ReadonlyStringArray = ['Alice', 'Bob'];
    myArray[2] = 'Mallory'; // error!
    ```

### 7.类类型  ###

在学习这块内容之前，先回顾一下es6中的相关知识

> 类的所有方法都定义在类的`prototype`属性上面。
> 
> 静态方法（类的方法。加static）
> 
> 静态属性（类的属性，加static）
> 
> 实例属性（实例属性除了定义在`constructor()`方法里面的`this`上面，也可以定义在类的最顶层）

1）可以在接口中描述一个属性或者方法，在类里面实现它。注意接口描述了类的公共部分 。

interface ClockInterface {
        currentTime: Date;
        setTime(d: Date);
    }
    
    class Clock implements ClockInterface {
        currentTime: Date;
        setTime(d: Date) {
            this.currentTime = d;
        }
        constructor(h: number, m: number) { }
    }

2）当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。

interface ClockConstructor {
        new (hour: number, minute: number);
    }
    
    class Clock implements ClockConstructor {
        currentTime: Date;
        constructor(h: number, m: number) { }
    }

3）如何直接操作类的静态部分。看以下的方法

interface ClockConstructor {
        new (hour: number, minute: number): ClockInterface;
    }
    interface ClockInterface {
        tick();
    }
    
    function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
        return new ctor(hour, minute);
    }
    
    class DigitalClock implements ClockInterface {
        constructor(h: number, m: number) { }
        tick() {
            console.log("beep beep");
        }
    }
    class AnalogClock implements ClockInterface {
        constructor(h: number, m: number) { }
        tick() {
            console.log("tick tock");
        }
    }
    
    let digital = createClock(DigitalClock, 12, 17);
    let analog = createClock(AnalogClock, 7, 32);

### 8.继承接口 ###

1）接口可以继承接口。可以更好的将接口分割到可重用的模块里。

interface Shape {
        color: string;
    }
    
    interface Square extends Shape {
        sideLength: number;
    }
    
    let square = <Square>{};
    square.color = "blue";
    square.sideLength = 10;

2）一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
        color: string;
    }
    
    interface PenStroke {
        penWidth: number;
    }
    
    interface Square extends Shape, PenStroke {
        sideLength: number;
    }
    
    let square = <Square>{};
    square.color = "blue";
    square.sideLength = 10;
    square.penWidth = 5.0;

### 9.混合类型 ###

一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

interface Counter {
        (start: number): string;
        interval: number;
        reset(): void;
    }
    
    function getCounter(): Counter {
        let counter = <Counter>function (start: number) { };
        counter.interval = 123;
        counter.reset = function () { };
        return counter;
    }
    
    let c = getCounter();
    c(10);
    c.reset();
    c.interval = 5.0;

### 10.接口继承类 ###

先看下官网

> 当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的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`类并不是这样的。

然鹅 ，我真的一脸懵逼啊，看不懂。

关于类和接口之间的继承，还是整理一下吧。以下原文链接[聊聊TypeScript中类、接口之间相互继承与实现的那些事儿][TypeScript]

### 11.类和接口的继承总结 ###

**1.类继承类（只能单继承）**

> 子类继承了父类之后，就会将父类中定义的非 private 属性以及方法都继承下来

class Animal {
          public name: string = "Animal";
          public age: number;
    
          sayHello() {
              console.log(`Hello ${ this.name }`);
          }
      }
    
      class Dog extends Animal {
          age: number;
    
          constructor(age) {
              super();
              this.age = age;
          }
      }
    
      const dog = new  Dog(6);
    
      dog.sayHello();

由于 Dog 继承了 Animal 类，所以同时也继承了 Animal 的 name 属性和 sayHello 方法，因此可以直接使用 dog 实例调用 sayHello 方法。 **那么问题来了：如果可以进行多继承，若多个父类中都包含同一个属性，那么子类使用的应该是哪个父类的属性呢？** 因此 TypeScript 中不允许进行类的多继承

**2.接口继承接口**

> 接口与接口之间是可以直接进行多继承的。

先定义两个接口

// 阿里接口
      interface Ali  {
          pay: () => void
      }
    
      // 腾讯接口
      interface Tencent {
          game: string
          play: () => void
      }

在定义一个接口继承 Ali、Tencent 接口

// 自己的接口
      interface Self extends Ali, Tencent {
          name: string
          say: () => void
      }

此时Self 接口就包含了 Ali 和 Tencent 接口中所有的属性和方法

**3.类继承接口**

验证一下用一个类实现 Self 接口，必须要将 Ali、 Tencent、 Self 接口中包含的所有属性和方法都声明了才可以，不然会编译报错

// 使用 Test 类实现 Self 接口
      class Test implements Self {
          game: string;
          name: string;
          pay() {
              console.log('经常用于支付');
          }
      
          play() {
              console.log('可以玩各种游戏');
          }
      
          say() {
              console.log('不知道说点儿什么');
          }
      }

**应用场景**

> 接口只声明成员方法，不做实现。  
> 类声明并实现方法。
> 
> 那么接口有什么用呢？设想如下需求：  
> 要实现一个`print`函数，它将传入的对象打印出来。在实际实现上，它将调用对象的`getContent`方法：
> 
>     function print(obj): void {
>         console.log(obj.getContent());
>     }
> 
> 但是这样书写是有问题的，你知道Typescript当中是有类型检查的，必须要确保obj中存在getContent方法才能让print函数正常工作不报错。
> 
> 比如：
> 
>     class Article {
>         public function getContent(): String {
>             return 'I am an article.';
>         }   
>     }
>     
>     function print(obj: Article): void {
>         console.log(obj.getContent());
>     }
>     
>     let a = new Article();
>     print(a);
> 
> 但是这样的话print函数不就只能打印Article类的对象了吗，如果我想要让它能够打印不止一个类的对象呢？我如何保证他们都有getContent方法？  
> 这时候就可以用到接口，来声明一个getContent方法，这样一来，每个***实现***该接口的类都必须实现getContent方法：
> 
>     interface ContentInterface {
>         getContent(): String;
>     }
>     
>     class Article implements ContentInterface {
>         // 必须实现getContent方法
>         public function getContent(): String {
>             return 'I am an article.';
>         }   
>     }
>     
>     class Passage implements ContentInterface {
>         // 但实现方式可以不同
>         public function getContent(): String {
>             return 'I am a passage.'
>         }
>     }
>     
>     class News implements ContentInterface {
>         // 没有实现getContent方法，编译器会报错
>     }
>     
>     function print(obj: ContentInterface): void {
>         // 实现了ContentInterface的对象是一定有getContent方法的
>         console.log(obj.getContent());
>     }
>     
>     let a = new Article();
>     let p = new Passage();
>     
>     print(a); // "I am an article."
>     print(p); // "I am a passage."
> 
>   
>

**4.接口继承类 **

(呜呜，这个还真不好理解啊！)

*  接口可以反之继承类，会继承类的成员（成员变量和方法）但是不会去实现。（所谓实现就是让其发挥自己的作用！此处文档的解释是“就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样”。也就是说你再怎么继承类，也不能改变你是个接口的事实。所以你还是不能实现。）
 *  接口会继承到类的private和protected成员，不像类继承类只会继承非private成员。
 *  当接口继承了带有private和protected成员的类，这个接口类型只能被这个类或其子类所实现（比如下面的例子，看两处文字‘不会报错’的地方就明白了）
 *  不推荐使用。但是对于其他类属性的抽离和其他类对其属性的复用上来说，有些情况下会很便捷。

class Control {
        private state: any;
    }
    
    interface SelectableControl extends Control {
        select(): void;
    }
    
    class Button extends Control implements SelectableControl {
        select() { }
    }
     
    // 不会报错
    const button = new Button();
    button.state;
    
    class TextBox extends Control {
        select() { }
    }
    
    // 不会报错
    const textBox = new TextBox();
    textBox.state;
    
    // 错误：“Image”类型缺少“state”属性。
    class Image implements SelectableControl {
        select() { }
    }
    
    class Location {
    
    }

>  *  state是类Control的私有成员
>  *  接口SelectableControl继承了类Control。所以也继承到了state属性
>  *  其他类要想实现接口SelectableControl，必须是类Control的子类。比如上面的类Button,类Image就不可以。

其实上面已经把接口继承的类描述清楚了，下来看一下官网的最后一句话

> 在`Control`类内部，是允许通过**`SelectableControl`的实例**来访问私有成员`state`的。 实际上， `SelectableControl`接口和拥有`select`方法的`Control`类是一样的。 `Button`和`TextBox`类是`SelectableControl`的子类（因为它们都继承自`Control`并有`select`方法），但`Image`和`Location`类并不是这样的。

but我想说，接口有自己的实例这一说吗？反正上面我看的还是云里雾里。不知道是描述的有问题还是理解的偏差，以后在回过头看看吧！

[TypeScript]: https://juejin.im/post/5c386a156fb9a049fb43e109#heading-3