接口的作用
在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范， 在程序设计里面，接口起到了限制和规范的作用
接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，不关心类方法里面实现的细节，它只规定这批类里面必须提供某些方法，
提供这些方法的类就可以满足实际需要
接口的类型： 属性、函数、可索引和类等；
1. 属性接口
interface FName {
fName: string;
sName: string
}
function say(foo:FName):string {
return `我的名字叫 ${foo.fName + foo.sName}`;
}
// 正确的 传入的参数需要符合接口的定义
console.log(say({fName: '胡', sName:'火锅'}));
let bar = {
fName: '胡',
sName:'火锅',
age: 4
}
// 正确的, 定义在外的对象
console.log(say(bar));
// 错误
// console.log(say({firstName: '胡', secondName:'火锅', age: 4}));
可选属性
interface FName {
fName: string;
sName: string;
age?:number; // 可选的属性
}
function SayName(foo:FName):string {
return `我的名字叫 ${foo.fName + foo.sName}`;
}
console.log(SayName({fName: '胡', sName:'火锅', age: 4}));
console.log(SayName({fName: '胡', sName:'火锅'}));
2. 函数接口
对函数传入的参数及返回值进行约束
interface Say {
// 函数的参数 函数的返回值
(fname:string, age: number):string
}
// 正确的
const speak:Say = function (fname:string, age:number):string {
return `我的名字${fname}, 年龄为${age}`;
}
const say:Say = (fname:string, age:number):string => {
return `我的名字${fname}, 年龄为${age}`;
}
// 函数接口中的可选参数
/*
interface Say {
(fname: string, age?: number):string
}
// 如果age 不传值会变成undefined
const speak:Say = function (fname:string, age?:number):string {
return `我的名字${fname}, 年龄为${age}`;
}
const say:Say = (fname:string, age?:number):string => {
return `我的名字${fname}, 年龄为${age}`;
}
*/
3. 可索引接口
对数组、对象的约束
数组的约束
interface ArrIndex {
[index: number]:string
}
let arr:ArrIndex = ['1', '2'];
对象的约束
interface OPropName {
[propName: string]:string
}
let obj:OPropName = {
1: 'a'
}
3. 类类型接口
对类的约束 (类似抽象类)
// 回顾 抽象类
/*
abstract class Animal {
abstract fname:string; // 抽象属性
abstract eat(food:string):void // 抽象方法
}
class Dog extends Animal {
fname:string;
constructor(n:string) {
super();
this.fname = n;
}
eat(food:string) {
console.log(`${this.fname}喜欢吃${food}`)
}
}
*/
// 定义类类型接口
interface Animal {
fname:string;
eat(food:string):void
}
class Dog implements Animal {
fname:string;
constructor(n:string) {
this.fname = n;
}
eat(food:string) {
console.log(`${this.fname}喜欢吃${food}`)
}
}
let dog = new Dog('可乐');
console.log(dog);
dog.eat('胡萝卜');
