TypeScript入门学习（四）：TypeScript 类与接口

ゞ浴缸里的玫瑰 2021-09-30 07:44 436阅读 0赞

# TypeScript 类与接口 #

### 类定义 ###

class使用关键字 class 声明。

class Person {
      name: string;
      constructor(name: string) {    
         this.name = name; 
      }
      run(): void {    
         console.log(this.name);  
      }
    }
    const p = new Person('star');
    p.run(); // star

### 类继承 extends ###

在实现继承时，子类构造函数中必须调用 super 方法。

class Student extends Person {
      constructor(name: string) {   
        // 必须调用    
        super(name);  
      }
    }
    const stu = new Student('king');
    stu.run(); // king

### 类的修饰符 ###

TypeScript 中定义属性时提供了三种修饰符：

*  public：公有的， 在类里面、子类、类外部都可以访问。
 *  protected：受保护的， 在类里面、子类里面可以访问，类外部不可以访问。
 *  private：私有的，只能在类里面访问，子类和类外部不可以访问。  
    属性不加修饰符时，默认就是公有的（public）。

### 类的静态方法和静态属性 ###

class Person {  
      name: string;  
      // 静态属性 
      static sex: string;
      constructor(name: string) {    
        this.name = name;  
      }
      
      run(): void {   
       console.log(this.name);
      }
      
      static work(): void {   
       console.log('静态方法！'); 
      }
    }
    
    Person.work(); // 静态方法！

在静态方法里面无法直接调用类的非静态属性，可以调用类的静态属性。

### 抽象类和多态 ###

TypeScript 中的抽象类是提供其他类继承的基类，不能直接被实例化。使用 `abstract` 关键字定义抽象类和抽象方法，抽象类中的抽象方法不能直接实现并且必须在派生类中实现。抽象方法必须放在抽象类中。  
多态：子类继承父类的方法，并在方法中有不同的表现。

abstract class Animal {  
      // 抽象的方法  
      abstract eat(): void;
    }
    
    class Dog extends Animal {
      eat(): void {    
        console.log('Dog eat'); 
      }
    }

### 接口 ###

接口：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范。在程序设计里，它起到了一种限制和规范的作用。TypeScript 中的接口类似于 Java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

#### 属性接口 ####

属性接口其实是对 JSON 的约束。

interface FullName {  
      firstName: string;  
      secondName: string;
    }
    
    function printNameInfo(fullname: FullName) {  
      console.log(`${fullname.firstName}---${fullname.secondName}`);
    }
    // 正确
    printNameInfo({secondName: 'zheng', firstName: 'star'});
    
    // 错误
    printNameInfo({secondName: 'zheng', firstName: 'star', age: 20});
    
    // 正确
    const obj = {secondName: 'zheng', firstName: 'star', age: 20};
    printNameInfo(obj);

在传入的对象中必须包含 FullName 接口中的属性，参数顺序可以不一样。  
属性接口也可以设置成可选属性接口，只需在属性后面加上 ‘?’：

interface FullName {  
      firstName: string;  
      secondName?: string;
    }
    
    function printNameInfo(fullname: FullName) {  
      console.log(`${fullname.firstName}---${fullname.secondName}`);
    }
    printNameInfo({firstName: 'star'});

#### 函数类型接口 ####

函数类型接口时对函数的传入参数以及返回值进行约束。

interface encrypt {  
      (key: string, value: string): string;
    }
    
    const foo : encrypt = function(key: string, value: string): string {
      return key + '=' + value;
    }
    console.log(foo('name', 'star'));

#### 可索引接口 ####

可索引接口一般用于对数组和对象的约束，但是一般很少用。

// 对数组进行约束
    interface Foo {  
      [index: number]: string;
    }
    const fooArr : Foo = ['ww', 'ee'];
    console.log(fooArr[0]);
    // 对对象的约束
    interface Foo {  
      [index: string]: string;
    }
    const fooObj : Foo = {name: 'star', shortName: 'gg'};
    console.log(fooObj.shortName); // gg

索引签名的名称（如：\{ \[index: string\]: string \} 里的 index ）除了可读性外，并没有任何意义。例如：如果有一个用户名，你可以使用 \{ username: string\}: string \}，这有利于下一个开发者理解你的代码。

#### 类类型接口 ####

类类型接口是对类的约束，它是对属性接口和函数型接口的结合。

interface Animal {  
      name: string;
      eat(food: string): void;
    }
    
    // Dog 类实现 Animal 接口，对 Dog 类进行约束
    class Dog implements Animal {
      name: string;      
      eat(food: string): void {    
        console.log(`Dog eat ${food}`)  
      }
    }
    const dog = new Dog();
    dog.eat('bone'); // Dog eat bone```
    #### 接口扩展
    接口可以继承接口。
    ```ts
    interface Animal {  
      eat(food: string): void;
    }
    
    interface Person extends Animal {  
      work(): void;
    }
    class Worker implements Person {
      work(): void {   
      
      } 
      eat(food: string): void {    
      
      }
    }