【TypeScript】类、接口、类与接口

超、凢脫俗 2022-05-28 00:29 390阅读 0赞

转载自：[https://www.jianshu.com/p/277217a8647c][https_www.jianshu.com_p_277217a8647c]

### 1、接口 ###

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。

简单的例子

interface Person {
        name: string;
        age: number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25
    };

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。（多一些属性或少一些属性都是不允许的）

有时我们希望不要完全匹配一个形状，那么可以用**可选属性**：

interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom'
    };

interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25
    };

这时仍然不允许添加未定义的属性：

interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    //   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

**任意属性**

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = { name: 'Tom', gender: 'male' };

使用 \[propName: string\] 定义了任意属性取 string 类型的值。

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性：

interface Person {
        name: string;
        age?: number;
        [propName: string]: string;
    }
    
    let tom: Person = {
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
    // index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    //   Index signatures are incompatible.
    //     Type 'string | number' is not assignable to type 'string'.
    //       Type 'number' is not assignable to type 'string'.

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 \{ name: ‘Tom’, age: 25, gender: ‘male’ \} 的类型被推断成了 \{ \[x: string\]: string | number; name: string; age: number; gender: string; \}，这是联合类型和接口的结合。

### 2、类型断言 ###

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法：<类型>值 或者 值 as 类型

在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。

例子：将一个联合类型的变量指定为一个更加具体的类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number { 
        return something.length;
    }
    
    // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
    // Property 'length' does not exist on type 'number'.

而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，比如：

function getLength(something: string | number): number {
        if (something.length) {
            return something.length;
        } else {
            return something.toString().length;
        }
    }
    
    // index.ts(2,19): error TS2339: Property 'length' does not exist on type 'string | number'.
    //   Property 'length' does not exist on type 'number'.
    // index.ts(3,26): error TS2339: Property 'length' does not exist on type 'string | number'.
    //   Property 'length' does not exist on type 'number'.

上例中，获取 something.length 的时候会报错。

此时可以使用类型断言，将 something 断言成 string：

function getLength(something: string | number): number { 
        if ((<string>something).length) {
            return (<string>something).length;
        } else {
            return something.toString().length;
        }
    }

或

function getLength(something: string | number): number { 
        if ((something as string).length) {
            return (something as string).length;
        } else {
            return something.toString().length;
        }
    }

类型断言的用法如上，在需要断言的变量前加上 即可。

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：

function toBoolean(something: string | number): boolean { 
        return <boolean>something;
    }
    
    // index.ts(2,10): error TS2352: Type 'string | number' cannot be converted to type 'boolean'.
    // Type 'number' is not comparable to type 'boolean'.

### 3、类 与 接口 ###

类实现接口:

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

interface Alarm { 
      alert();
    }
    
    class Door { 
    }
    
    class SecurityDoor extends Door implements Alarm { 
      alert() {
        console.log('SecurityDoor alert');
      }
    }
    
    class Car implements Alarm { 
      alert() {
        console.log('Car alert');
      }
    }

一个类可以实现多个接口：

interface Alarm { 
      alert();
    }
    
    interface Light { 
      lightOn();
      lightOff();
    }
    
    class Car implements Alarm, Light { 
      alert() {
        console.log('Car alert');
      }
      lightOn() {
        console.log('Car light on');
      }
      lightOff() {
        console.log('Car light off');
      }
    }

上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

**接口继承接口**

接口与接口之间可以是继承关系：

interface Alarm { 
      alert();
    }
    
    interface LightableAlarm extends Alarm { 
      lightOn();
      lightOff();
    }

**接口继承类**

接口也可以继承类：

class Point { 
      x: number;
      y: number;
    }
    
    interface Point3d extends Point { 
      z: number;
    }
    
    let point3d: Point3d = {x: 1, y: 2, z: 3};

**混合类型**

使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
      (source: string, subString: string): boolean;
    }
    
    let mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
      return source.search(subString) !== -1;
    }

有时候，一个函数还可以有自己的属性和方法：

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;

[https_www.jianshu.com_p_277217a8647c]: https://www.jianshu.com/p/277217a8647c