介绍

接口：是一种类型，是一种规范，是一种规则，是一个能力，是一种约束。
TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（interface）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。

1
2
3
4
5
interface Idata {
 name: string;
 age: number; 
 email?: string; 
}

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。

1
2
3
4
5
const data: Idata = {
  name: 'zhangsan',
  age: 23,
  // email: '111@qq.com' // 可以没有
}

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly 来指定只读属性。

1
2
3
4
5
interface Idata {
  name: string;
  readonly age: number; // 只读属性
  email?: string; // 可选属性 
}

一旦赋值后再也不能被改变。

1
2
3
4
5
6
const data: Idata = {
  name: 'zhangsan',
  age: 23,
  // email: '111@qq.com' // 可以没有
}
data.age = 20 // Error

readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。

对class类的约束

1、定义接口的时候，只定义声明即可，不包含具体内容

2、实现接口，要实现里面的内容

接口的定义

1
2
3
4
5
6
7
interface Iprinter {
  printing(msg: string): string;
}

interface Imessage {
  getMsg(): string;
}

实现接口

1
2
3
4
5
class ColorPrinter implements Iprinter {
  printing(msg: string): string {
    return `打印${msg}成功！`;
  }
}

实现多个接口

1
2
3
4
5
6
7
8
class ColorPrinter implements Iprinter, Imessage {
  printing(msg: string): string {
    return `打印${msg}成功！`;
  }
  getMsg(): string {
    return "惠普HP10000";
  }
}

对函数的约束

1
2
3
4
5
6
7
8
interface ImaFunction {
  (a: string, b: number): boolean;
}

let fun1: ImaFunction;
fun1 = function (a: string, b: number) {
  return false;
};

对数组的约束

1
2
3
4
5
6
interface IStuArr {
  [index: number]: string;
}
let arr: IStuArr;
arr = ["ssss", "bbbb"];
console.log(arr[0]);

对json的约束

1
2
3
4
5
6
7
8
9
10
interface Idata {
  name: string;
  readonly age: number; // 只读属性 readonly
  email?: string; // 可选属性 ?
}
function showData(n: Idata) {
  // n.age = 12;
  console.log(JSON.stringify(n));
}
showData({ name: "张三", age: 19 });

接口的继承

和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

1
2
3
interface IprinterMessage extends Iprinter, Imessage {

}