TS基础知识（三）

这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

1、接口（Interface）

接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。 接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

接口也可以当成类型声明去使用

• 示例（检查对象类型）：

  • interface Person{
        name: string;
        sayHello():void;
    }
    ​
    function fn(per: Person){
        per.sayHello();
    }
    ​
    fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});
    ​
    复制代码

• 示例（实现）

  • interface Person{
        name: string;
        sayHello():void;
    }
    ​
    class Student implements Person{
        constructor(public name: string) {
        }
    ​
        sayHello() {
            console.log('大家好，我是'+this.name);
        }
    }
    复制代码

2、泛型（Generic）

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

• 举个例子：

  • function test(arg: any): any{
        return arg;
    }
    复制代码

  • 上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型

  • 使用泛型：

  • function test<T>(arg: T): T{
        return arg;
    }
    复制代码

  • 这里的<T>就是泛型，T是我们给这个类型起的名字（不一定非叫T） ，设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。

  • 那么如何使用上边的函数呢？

    • 方式一（直接使用）：

      • test(10)
        复制代码

      • 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

    • 方式二（指定类型）：

      • test<number>(10)
        复制代码

      • 也可以在函数后手动指定泛型

  • 可以同时指定多个泛型，泛型间使用逗号隔开：

    • function test<T, K>(a: T, b: K): K{
          return b;
      }
      ​
      test<number, string>(10, "hello");
      复制代码

    • 使用泛型时，完全可以将泛型当成是一个普通的类去使用

  • 类中同样可以使用泛型：

    • class MyClass<T>{
          prop: T;
      ​
          constructor(prop: T){
              this.prop = prop;
          }
      }
      复制代码

  • 除此之外，也可以对泛型的范围进行约束

    • interface MyInter{
          length: number;
      }
      ​
      function test<T extends MyInter>(arg: T): number{
          return arg.length;
      }
      复制代码

    • 使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用。