接口的作用：
在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
1. 属性类接口
interface FullName {
firstName:string; // 注意;结束
secondName:string;
}
function printName(name:FullName) {
// 必须传入对象 firstName secondName
console.log(`${name.firstName}---${name.secondName}`)
}
var obj = {
firstName: ‘许‘,
secondName: ‘三多‘
}
printName(obj); // 传入的参数必须包含 firstName、secondName
function printInfo(name:FullName) {
console.log(`${name.firstName}===${name.secondName}`)
}
var obj1 = {
firstName: ‘王‘,
secondName: ‘里‘
}
printInfo(obj1)
可选属性
interface FullName {
firstName:string;
secondName?:string;
}
function getName(name:FullName) {
console.log(name);
}
var obj = {
firstName: ‘firstName‘,
}
getName(obj)
原生封装ajax
// 原生封装ajax interface Config { type:string; url:string; data?:string; dataType:string; } function ajax(config:Config) { let xhr = new XMLHttpRequest(); xhr.open(config.url, config.url, true); xhr.send(config.data); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { console.log(‘成功‘) if (config.dataType == ‘json‘) { console.log(JSON.parse(xhr.responseText)) } else { console.log(xhr.responseText) } } } } ajax({ type:‘get‘, url:‘http://s.iting.com‘, data:‘name=zhangsan‘, dataType:‘json‘, })
2. 函数类接口：对方法传入的参数以及返回值进行约束
// 加密的函数类型接口
interface encrypt {
(key:string,value:string):string; // 参数必须是 key value，返回值必须是string
}
var md5:encrypt = function(key:string,value:string):string{
return key+value;
}
console.log(md5(‘name‘,‘张三‘));
3. 可索引接口：数组、对象的约束
数组的约束：
interface UserArr{
[index:number]:string; // 数组的 index 是 number, 值是string
}
var arr:UserArr = [‘aaa‘, ‘bbb‘];
console.log(arr[0])
对 对象的约束：
interface UserObj {
[index:string]:string;
}
var obj:UserObj = {name: ‘张三‘}
console.log(obj)
4. 类类型接口：对类的约束，和抽象类有点类似
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal {
name:string;
constructor(name:string) {
this.name = name;
}
eat() {
console.log(this.name + ‘吃狗粮‘)
}
}
var dog = new Dog(‘萨摩‘)
dog.eat()
5. 接口扩展：接口可以继承接口
interface Animal{
eat():void;
}
interface Person extends Animal {
work():void;
}
class Programmer {
public name:string;
constructor(name:string) {
this.name = name;
}
coding() {
console.log(this.name + ‘写代码‘)
}
}
class Web extends Programmer implements Person {
constructor(name:string) {
super(name);
}
eat() {
console.log(this.name + ‘吃土‘)
}
work() {
console.log(this.name + ‘搬砖‘)
}
coding() {
console.log(this.name + ‘写ts代码‘)
}
}
var w = new Web(‘贝贝‘)
w.eat()
w.work()
w.coding()