初学TypeScript系列（五）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

之前的初学TypeScript系列文章中简单学习了接口相关的知识，感觉这个知识点学的比较分散，这里先系统总结归纳一下。

TypeScript 中的接口

1. 接口的作用

a. 定义对象的类型
b. 对类(class) 的行为进行抽象（ps: 相关知识可以看这篇文章）
简单来说，接口也是一种类型（如：number,string），使用接口类型进行约束（对象），该对象的属性不能多一个也不能少一个

2. 接口的定义

使用 interface 定义接口, 接口名称一般首字母大写，定义接口的时候，只定义声明即可，不包含具体内容

// 定义一个接口 Person
interface Person {
  name: string;
}
// 定义一个变量(对象)，它的类型是 Person  
let tom: Person = {
  name: 'Tom',
  // age: 25  //报错  实现接口的时候，定义的变量比接口少了或多了属性是不允许的
};

3. 可选属性

使用 ? 代表可选属性, 即该属性可以不存在

interface Person {
  name: string;
  age?: number;  // age是可选属性
}
let tom: Person = {
  name: 'Tom'
}

4. 任意属性

[propName: string]: any;

在接口中添加了如上的任意属性（可以指定属性值的类型），在对象变量中就可以添加未定义的属性。

一个接口中只能定义一个任意属性。一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集。

例如：把下面代码的任意属性any类型替换为string类型[propName: string]: string; 。编译会报错，因为任意属性变为string类型，则Person的所有属性都必须为string类型，而age为number类型

interface Person {
  name: string;
  age?: number;
  [propName: string]: any; // 这里也可以使用联合类型来定义 stirng | number
}
let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

5. 只读属性

使用 readonly代表只读属性, 该属性只能在对象刚刚创建的时候被赋值，一旦赋值后再也不能修改了

interface Person {
  readonly id: number;
  name: string;
}
let person: Person = {
  id: 100,
  name: 'tom',
}
person.id = 90;
// => 编译报错：id为只读, 不可修改

let person2: Person = {
  name: 'Jerry',
}
// => 编译报错：给对象 person2 赋值，未定义只读属性id

6. 函数接口

使用接口来约束函数，限制参数个数、参数类型、返回值类型不变。

interface SumInterface {
    (a:number, b:number):number
}

//实现接口的方法，如果不指定参数类型，TypeScript的类型系统会推断出参数类型
let sum:SumInterface = function (x, y){
    return x + y;
}
let res = sum(10, 20);
console.log(res);