TypeScript学习3接口

什么是接口

TypeScript 的核心就是类型检查，接口就是用于声明类型，给内部或第三方使用者提供类型声明和约束。

使用场景

• 数据类型声明和约束

// 声明数据类型
interface CustomerInfo {
  customerCode: string;
  customerName: string;
}

// 使用数据类型
function helloCustomer(customerInfo: CustomerInfo) {console.log(`Hello, ${customerInfo.customerName}!`);
}

helloCustomer({customerCode: '1001', customerName: 'Jee'}); // ok
helloCustomer({customerName: 'Jee'}); // error, Property 'customerCode' is missing

• 面向对象编程

这里和面向对象语言类似，用于定义对象接口，声明对象的结构，定义类时可以实现接口，满足这个接口定义的功能。

// 接口声明
interface Animal {name: string;}

// 接口继承
interface Mammal extends Animal {
  legNum: number;
  sound(): string;}

// 类实现
class Bull implements Mammal {
  name: string;
  legNum: number;
  
  constructor(name: string) {
    this.name = name;
    this.legNum = 4;
  }

  sound() {return 'moo';}
}

// 实例
let bull1 = new Bull('bull1');
console.log(bull1.sound()); // moo

可变接口属性

有两种方式可以实现可变属性，属性明确时，推荐第一种。不明确时可以用第二种。

• 可选属性，定义可以选传的属性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
}

• 索引类型，支持 string，number 索引属性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
  [key: string]: any; // 其他任意名称，任意类型的属性
}

这里说明一下，因为 JavaScript 对象中，数字索引是会转换成 string 来取值的。如果一个接口里面，同时有 number、string 索引属性时，number 索引属性的类型，必须时 string 索引属性的子类型。 也就是，number 索引的属性类型，必须能被 string 索引的属性类型覆盖；用 number 索引去取值，取到的值也是 string 索引属性的类型。

静态属性和只读属性

• 静态类型，即类属性，static 修饰
• 只读属性，初始化后不能修改，readonly 修饰

interface CustomerInfo {
  static greeting = 'Hello'; // 静态属性
  static readonly standardGreeting = 'Hello'; // 只读静态属性
  readonly customerCode: string; // 只读属性
  customerName: string; // 普通属性
}

const vs readonly，变量用 const，属性用 readonly

函数类型

接口除了能描述对象类型，还能描述函数类型（这个和面向对象语言有点不一样，需要理解一下）。

interface SearchFunc {(content: string, key: string): boolean;
}

// 这里参数名可以不一样，类型也可以省略
let mySearchFunc: SearchFunc = (c, k) => {return c.search(k) > -1;
}

后续

会再写一遍类的学习，一篇接口与类的结合使用。