TypeScript学习笔记（三）

TypeScript的interface接口

1、interface的基本使用

interface可以作为类型注解：

  interface Girl {
    name: string,
    age: number
  }

  let girl: Girl = {
    name: "小红",
    age: 18
  }

接口可以继承接口：

  interface Teacher extends Girl { // Teacher接口继承Girl接口
    teach(): string;
  }

  let teacher: Teacher = { // teacher必须实现Teacher接口及其继承的接口的所有属性和方法
    name: "衣老师",
    age: 18,
    teach(){
      return "我是衣老师！"
    }
  }

class类可以实现接口：

  class Student implements Girl  {
    name: string;
    age: number;
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
  }

2、接口的可选值和任意值

如上述例子，接口的属性都是固定必须有的，不够灵活，如果想让一个值成为可选值该怎么做呢？TypeScript为我们准备好了相应的办法，就是在:号前加一个?

  interface Girl {
    name: string,
    age: number,
    tel?: string // tel属性为可选值，可有可无
  }

  let girl1 = { // 有tel属性
    name: "有电话",
    age: 10,
    tel: "12345678900"
  }

  let girl2 = { // 没有tel属性
    name: "没有电话",
    age: 10
  }

但这样还有不够灵活，如果希望有一个自定义的属性名该怎么做呢？TypeScript也为我们提供了方法：

  interface Girl {
    name: string,
    age: number,
    [myprop: string]: any //属性名为string类型的任意值，属性值为任意类型
  }

  let girl3 = {
    name: "自定义",
    age: 18,
    money: 888  // 任意值也是可选值，可有可无
  }

3、接口里的方法

接口里不仅可以存属性，还可以存方法：

  interface Girl {
    name: string,
    age: number,
    tel?: string,
    [myprop: string]: any,
    say(): string   // 方法名为say，返回值为string类型
  }

  let girl = {
    name: "Jack",
    age: 38,
    say() {
      return "我叫" + this.name + ", 今年" + this.age + "岁";
    }
  }

注：接口当作变量的类型注解时，变量必须完全符合接口定义的规范，不得增加或减少；而当类实现接口时，可以在其基础上增加属性和方法，但不可减少。