面向对象编程具有封装、继承、多态三大特性，而接口是封装实现的最重要的概念之一。接口是在应用程序中定义一种约定的结构，从接口派生的类必须遵循其接口提供的结构。TypeScript 编译器不会将接口转换为 JavaScript，它只用于类型检查。本文将详细介绍 TypeScript 中接口的定义、继承、实现以及与类型别名的区别等内容。

一、基本介绍

1，接口的概念

2，接口的核心特点

二、使用接口声明对象类型

1，基本用法

// 方式一：通过类型别名(type)声明对象类型
type IInfoType = {
  readonly name: string,
  age?: number,
  height: number
}
 
// 方式二：通过接口(interface)声明对象类型
interface IInfoType {
  readonly name: string;  // 只读属性
  age?: number;           // 可选属性
  height: number;         // 必选属性
}
 
// 指定对象的类型
const info: IInfoType = {
  name: "hangge",
  age: 18,
  height: 1.68
};
 
console.log(info.name);  // 输出: hangge
 
// info.name = "123";  // 错误：只读属性不能修改
info.age = 20;  // ok，可以修改可选属性

三、索引类型

1，索引签名

// 用 interface 定义索引类型
interface IndexLanguage {
  [index: number]: string;  // key 是 number 类型，value 是 string 类型
}

const frontLanguage: IndexLanguage = {
  0: "HTML",
  1: "CSS",
  2: "JavaScript",
  3: "Vue"
};

// 用 interface 定义另一个索引类型
interface ILanguageYear {
  [name: string]: number;  // key 是 string 类型，value 是 number 类型
}

const languageYear: ILanguageYear = {
  "C": 1972,
  "Java": 1995,
  "JavaScript": 1996,
  "TypeScript": 2014
};

2，混合使用

interface LanguageBirth {
  [name: string]: number;  // 索引签名
  Java: number;           // Java 属性的类型必须是索引值的子集
}

const language: LanguageBirth = {
  "Java": 1995,
  "JavaScript": 1996,
  "C": 1972
};

四、函数类型

1，定义函数类型

// 方式一：用 type 定义函数类型
// type CalcFn = (n1: number, n2: number) => number

// 方式二：用 interface 定义函数类型
interface CalcFn {
  (n1: number, n2: number): number;
}

// 指定 add 函数的类型
const add: CalcFn = (num1, num2) => {
  return num1 + num2;
};

// 指定参数 calcFn 函数的类型
function calc(num1: number, num2: number, calcFn: CalcFn) {
  return calcFn(num1, num2);
}

calc(20, 30, add);  // 输出: 50

2，混合定义

// 用 interface 定义函数的类型，该函数还有 get 和 post 属性
interface FakeAxiosType {
  (config: any): Promise;   // 函数签名
  get(url: string): string;       // get 方法
  post(url: string): string;      // post 方法
}

const FakeAxios: FakeAxiosType = function(config: any) {
  return Promise.resolve(config);
};

FakeAxios.get = function(url: string): string {
  return 'get response';
};

FakeAxios.post = function(url: string): string {
  return 'post response';
};

console.log(FakeAxios({ url: '/api' }));  // Promise
console.log(FakeAxios.get('/users'));     // 输出: get response
console.log(FakeAxios.post('/users'));    // 输出: post response

五、接口的继承

1，单继承与多继承

interface ISwim {
  swimming: () => void;  // 接口定义的方法
}

interface IFly {
  flying: () => void;
}

// 接口的多继承
interface IAction extends ISwim, IFly {
  // 可以添加新的属性或方法
}

// 必须实现接口中的所有方法
const action: IAction = {
  swimming() {
    console.log("swimming");
  },
  flying() {
    console.log("flying");
  }
};

action.swimming();  // 输出: swimming
action.flying();    // 输出: flying

六、交叉类型

1，交叉类型的概念

// 交叉类型示例：同时满足 number 和 string 类型
// 实际上这种类型是不存在的，是 never 类型
type MyType = number & string;

interface ISwim {
  swimming: () => void;
}

interface IFly {
  flying: () => void;
}

// 联合类型：满足其中一个即可
type MyType1 = ISwim | IFly;

// 交叉类型：必须同时满足两个类型
type MyType2 = ISwim & IFly;

// 联合类型：只需要实现其中一个方法
const obj1: MyType1 = {
  flying() {
    console.log("flying");
  }
};

// 交叉类型：必须实现所有方法
const obj2: MyType2 = {
  swimming() {
    console.log("swimming");
  },
  flying() {
    console.log("flying");
  }
};

七、接口的实现

1，implements 关键字

interface ISwim {
  swimming: () => void;
}

interface IEat {
  eating: () => void;
}

class Animal {}

// 继承(extends): 只能实现单继承
// 实现接口(implements): 类可以实现多个接口
class Fish extends Animal implements ISwim, IEat {
  swimming() {
    console.log("Fish Swimming");
  }
  eating() {
    console.log("Fish Eating");
  }
}

class Person implements ISwim {
  swimming() {
    console.log("Person Swimming");
  }
}

// 编写公共的 API，面向接口编程
// swimAction 函数接收的是 ISwim 接口
function swimAction(swimable: ISwim) {
  swimable.swimming();
}

// 只要实现了 ISwim 接口的类对应的对象，都可以传给 swimAction 函数
swimAction(new Fish());    // 输出: Fish Swimming
swimAction(new Person());  // 输出: Person Swimming

八、字面量赋值

1，额外属性检查

interface IPerson {
  name: string;
}

const info: IPerson = {
  name: "hangge",  // ok
  age: 18       // 报错：Type '{ name: string; age: number; }' is not assignable to type 'IPerson'
};

interface IPerson {
  name: string;
}

// 先定义字面量对象
const info = {
  name: "hangge",  // ok
  age: 18       // ok
};

// 字面量赋值：TypeScript 会擦除(freshness) IPerson 类型之外的类型检查
const p: IPerson = info;

console.log(p.name);  // 输出: hangge

2，函数参数的字面量检查

interface IPerson {
  name: string;
}

function printInfo(person: IPerson) {
  console.log(person.name);
}

// 将字面量对象直接传给函数的参数
printInfo({
  name: "hangge",
  age: 18   // 报错：Object literal may only specify known properties
});

// 对字面量对象的引用，传递给函数参数
const info = {
  name: "hangge",
  age: 18
};

printInfo(info);  // ok，不会报错

附：interface 和 type 的区别

1，主要区别

// interface 可以重复定义
interface IFoo {
  name: string;
}

interface IFoo {
  age: number;
}

// IFoo 类型是上面两个接口的合并
const foo: IFoo = {
  name: "hangge",
  age: 18
};

console.log(foo.name, foo.age);  // 输出: hangge 18

// 类型别名不能重复
type IBar = {
  name: string;
};

// 报错：Duplicate identifier 'IBar'
// type IBar = {
//   age: number;
// };