TypeScript系列(三)接口详解

接口在TypeScript中是一个很重要的概念，使用得非常多，基本且重要。本文就让我们详细的来扒一扒这个接口。

什么是接口

当工厂制作一个商品时，肯定会先定好商品的制作规范，大小，形状，颜色等等。
在TypeScript中也有这种规范。简单理解，接口就是用来描述对象或者类的具体结构，约束他们的行为。这也是TypeScript的核心原则之一：对结构进行类型检查。在实际代码设计中也很有好处，增强了系统的可拓展性和可维护性。大家可以在工作或者学习中慢慢体会。

如何定义

和其他语言类似， TypeScript中接口也是使用interface关键字来定义的：

普通定义一个接口Person，申明一个对象类型为person。遵照约定，那么person就必须有name和age属性。

// 接口描述一个对象
interface Person {
	name: string;
	age: number;
}

// person必须有name和age属性，不然会报错
const person: Person = {
	name: 'Tom',
	age: 21  //必须为number类型，不然会报错
}

接口中定义函数,表示约定函数的参数必须为Person实例，返回值为string。

// 接口中定义函数
interface PersonFun {
	(person: Person): string;
}

let showPerson: PersonFun
// 具体实现
showPerson = function(person: Person) {
	return `hello!  ${person.name}.`;
}

为了灵活的使用接口，接口的属性是可以定义为可选的。定义时在属性值后面加个?号就代表这个属性是可选的。

// 定义可选属性
interface Student {
	name: string;
	age?: number;
}

// age 属性可选
const stu: Student = { name: 'Amy' }

TypeScript还支持定义只读属性，在属性前用readonly指定就行。

interface Person {
	name: string;
	readonly age: number;
}

const person: Person = {
	name: 'Tom',
	age: 21
}

person.age = 22; // 报错： Cannot assign to 'age' because it is a read-only property

这里有人可能会问这个readonly和const的区别了。const是在定义变量的时候使用，而readonly则是定义属性的时候使用。

接口的实际使用

1，可索引类型
我们可以使用接口来描述可索引类型，索引签名只支持string和数字类型，然后通过索引来访问对象，就像这样：person['name'], stringArray[0]其实当使用number来索引时，JavaScript也是先转成string之后再去索引对象。

// 数字索引类型
interface ColorArray {
	[index: number]: string;
}

let color: ColorArray;
color = ['Red', 'Blue', 'Green'];

// 字符串索引类型
interface ColorMap {
	[index: string]: string;
}

let colorMap: ColorMap;
colorMap = {
	a: 'Red',
	b: 'Blue',
	c: 'Green'
};

console.log(colorMap.a);
console.log(colorMap['a']);

值得注意的是，在同时使用两种类型的索引的时候，数字索引的返回值必须是字符串索引返回值类型的子类型。

interface Names {
	[x: string]: string;
	// 值必须是string,否则会报错
	[i: number]: number; // Error: Numeric index type 'number' is not assignable to string index type 'string'.
}

2，混合接口
当你有这样一个需求，想要一个对象又能作为函数使用，又能作为对象使用，并且有自己的属性。这个时候就可以用混合接口来实现。

interface People{
	(): void;
	name: string;
	age: number;
	sayHi(): void;
}

// 这边需要用到类型断言 as 或者 <> 
function getPeople(): People{
	let people: People = (() => {}) as People; 
	people.name = 'James';
	people.age = 23;
	people.sayHi = () => { console.log('Hi!') }
}

let p = getPeople();
p();
p.age = 24;

混合接口一般用在第三方类库的声明文件，用混合接口声明函数和用接口声明的区别就在于，接口不能声明类的构造函数，但混合接口可以，其他都一样。

3，接口继承
接口继承使用extends关键字，可以让我们更方便灵活的复用。

interface People{
	name: string;
}

interface Student extends People{
	age: string;
}

let stu: Student = {name: '小明', age: 12 };

// 一个接口可以继承多个接口， 使用 ，分隔
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

4， 接口实现
实现接口使用implement关键字

interface Foo {
	name: string;
	age: number;
	sayHello(): void;
}

class Bar implements Foo {
	name: string;
	age: number;
	sayHello(): void {
		console.log('Hello');
	}
}

是不是已经开始觉得TS很有趣了，继续学习吧，会更有趣的！