接口
理解接口
就是定义标准，相比抽象类更强大，能规范属性、函数，类。在面向对象编程中，接口的意义在于定义了一种行为和动作的规范，起到限制和规范的作用。ts的接口类型，包括属性，函数，可索引和类，接口扩展等等。
其实说白了，接口就是用代码描述一个对象必须有什么属性（包括方法），至于对象有没有其他属性就不管了，只要接口定义的有就行，没有就报错！
看个简单的例子：
// 传入参数必须是对象，对象属性有类型约束
function printLabel(label: {label: string, size: number}) {
console.log(`${label.label}${label.size}`);
}
var labelJson = {label: 'amoy', size: 99} // 这个对象满足约束条件，没有报错
printLabel(labelJson) // amoy99
复杂一些的例子，其实我们可以把interface理解为要求
// 要求Human的类型和属性
interface Shape {
head: string;
body: string;
}
interface Human {
readonly name: string;
age: number;
shape: Shape;
say(word: string): void; // 属性是个函数
likedgame?: Array<string>; // 喜欢或者什么都不喜欢，可选属性
}
let isaacgao: Human = {
name: 'isaac',
age: 24,
shape: {
head: "⭕️",
body: "正方形"
},
say(word: string) {
console.log(this.name + ' 说 ' + word) // isaac 说 hello world
},
likedgame: ['pokemon', 'monster hunter']
}
isaacgao.say('hello world')
isaacgao.name = 'gao' // Cannot assign to 'name' because it is a read-only property.
还有一个有意思的地方，如果你声明一个interface作为参数，你是通过一个变量传入的，你是可以传递多余interface规定的属性的。但是你不通过变量直接传则会报错。
属性接口
interface fullName { // 对函数传参进行约束，
firstName: string; // 注意 分号结束
lastName: string;
age?: number // 可选属性
}
function printName(name: fullName): string {
return `你的全名是：${name.firstName}${name.lastName}`
}
var parameter = { firstName: '尼古拉斯', lastName: '赵四', age: 25 } // 传参必须包含firstName、lastName，顺序无所谓
console.log(printName(parameter)); // 你的全名是：尼古拉斯赵四
// $.ajax例子
interface ajaxConfig {
type: string;
url: string;
data?: string|null;
dataType: string
}
function ajax(config: ajaxConfig): void {
var xhr = new XMLHttpRequest()
xhr.open(`${config.type}`, config.url, true)
xhr.send(config.data)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304) {
console.log('success');
if (config.type === 'json') {
return JSON.parse(xhr.responseText)
} else {
xhr.responseText
}
}
}
}
ajax({
type: 'GET',
url: 'http://a.itying.com/api/productlist',
dataType: 'json',
data: 'name=zhaosi'
})
函数接口
// 注意写法 同样支持批量约束
interface encrypt {
(key: string, val: string): string;
}
var md5: encrypt = function (key: string, val: string): string {
return key+val
}
console.log(md5('isaac', 'kao')); //isaackao
可索引接口(不常用)
可以约束属性和值的类型
// ts中定义数组的方式
var arr1: number[] = [1,23,4,5]
var arr2: Array<number> = [122,33,4,24,23,5423,4]
// 对数组约束
interface userArr {
[index: number]:string // 约束索引类型与值类型
}
var arr: userArr = ['123', 'isaac', 'kao']
console.log(arr[1])
// 对对象约束
interface userObj {
[index: string]: string
// [propName: string]: number // 对象一般这么写
}
var obj: userObj = {name: 'isaac', age: '25'}
class类型接口
和抽象类有点相似，父类定义一个标准，子类实现接口标准
// 有点像属性和方法接口整合到一起
interface Animal {
name: string;
eat(str: string): void;
}
class Horse implements Animal {
public name: string;
constructor(name: string) {
this.name = name
}
eat() { // 可以不传参数，但是方法必须要遵循类接口的定义
console.log(this.name + '吃粮食');
}
}
var d = new Horse('战马')
console.log(d.eat()); //战马吃粮食
class Tiger implements Animal {
public name: string;
constructor(name: string) {
this.name = name
}
eat(food: string) { // 可以不传参数，但是方法必须要遵循类接口的定义
console.log(this.name + food);
}
}
var t = new Tiger('猛虎')
console.log(t.eat('吃人!')); //猛虎吃人!
接口继承
一个interface可以批量继承多个interface，你还可以继承一个已经继承其他interfce的interface（比如Mamel继承了Animal，Human再继承Mamel）
注意，如果继承（包括多重继承）的两个interface有相冲突的属性或类型，会报错！
interface Animal {
move(): void;
}
interface Mamel {
fur: boolean;
pregnancy: boolean;
intelligent: boolean
}
interface Human extends Animal, Mamel { // 人类继承了动物的move方法
name: string;
age: number;
}
let gao: Human {
name: 'hang',
age: 24,
move() {
console.log('在动!')
},
fur: true;
pregnancy: true;
intelligent: true
}
gao.move()
接口扩展
接口可以继承接口
- 接口可以相互继承
- 类不仅可以继承父类，还可以实现接口
{
interface Animal {
eat(): void;
}
interface Person extends Animal { // 接口继承
work(): void;
}
// web 实现Person接口，Person继承了Animal，所以内部有两个方法
class Web implements Person {
public name: string
constructor(name: string) {
this.name = name
}
eat() {
console.log(this.name + '喜欢吃粽子');
}
work() {
console.log(this.name + '在上班！');
}
}
var w = new Web('韩梅梅')
w.work() //韩梅梅在上班！
// 稍微复杂的例子
class programmer {
public name: string
constructor(name: string) {
this.name = name
}
coding(code: string) {
console.log(this.name + '写' + code);
}
}
// web开发者继承程序员 并且 实现Person类的规范（必须有eat和work方法）
class Weber extends programmer implements Person {
constructor(name: string) {
super(name)
}
eat() {
console.log(this.name + '喜欢吃粽子');
}
work() {
console.log(this.name + '在上班！');
}
}
var ww = new Weber('程序员小高')
ww.coding('echo hello world') // 程序员小高写echo hello world
}