接口:定义行为动作的规范
属性接口、函数类型接口、可索引接口、类类型接口、
1、属性接口 对JSON的约束
function printLabel(label: string): void {
console.log('printLabel');
}
printLabel('字符串')
function printLabel2(labelInfo: { label: string }): void {
console.log('printLabel2');
}
printLabel2({ name: 'li' }) // 错误写法
printLabel2({ label: 'li' })
对批量方法传入参数进行约束
接口:行为和动作的规范,对批量方法进行约束
interface FullName {
firstName: string; // 注意;结束
secondName: string;
age?: number // 添加问号为可选属性,可传可不传
}
function printName(name: FullName) {
// 必须传入对象,必须包含firstName,secondName字段并且都是字符串
console.log(name.firstName + name.secondName);
}
// 传入的对象必须包含 firstName 和 secondName
const obj = {
firstName: '1',
secondName: '2',
c: 1
}
printName(obj)
封装ajax接口定义
interface Config {
type: string,
url: string,
data?: string,
dataType: string
}
function ajax(config: Config) {
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) {
if (config.dataType == 'json') {
JSON.parse(xhr.responseText)
} else {
console.log('成功', xhr.responseText);
}
}
}
}
ajax({
type: 'get',
data: 'datadatdatatatat',
url: 'http://www.baidu.com',
dataType: 'json'
})
2、函数接口类型 对方法传入的参数以及返回值进行约束
// 加密的函数类型接口
interface encrypt {
(key: string, value: string): string;
}
var md5: encrypt = function (key: string, value: string) {
// 模拟操作
return key + value
}
console.log(md5('name', 'val'));
3、可索引接口 数组、对象的约束(不常用)
// ts定义数组的方式
var arr1: number[] = [1, 2]
var arr2: Array<string> = ['1', '2']
// 可索引接口对数组的约束
interface UseArr {
[index: number]: string
}
var arr3: UseArr = ['1', '2']
// 可索引接口对对象的约束
interface UseObj {
[index: string]: string
}
var obj: UseObj = { name: '20', wof: '50' }
4、类类型接口 对类的约束 和抽象类相似
interface Animal {
name: string;
eat(str: string): void;
}
class Dog implements Animal {
public name: string;
constructor(name: string) {
this.name = name
}
eat() {
console.log(this.name);
}
}
var d = new Dog('小黑')
d.eat()
class Cat implements Animal {
public name: string;
constructor(name: string) {
this.name = name
}
eat(food) {
console.log(this.name + food);
}
}
var c = new Cat('小花')
c.eat('🐟')
5、接口的扩展 接口可以继承接口
interface Animal {
eat(): void;
}
interface Person extends Animal {
work(): void;
}
class Progromer {
constructor(name: string) {
this.name = name
}
coding(code: string) {
console.log(this.name + code);
}
}
class Web extends Progromer implements Person {
constructor(name: string) {
super(name)
}
eat() {
console.log(this.name + '吃');
}
work() {
console.log(this.name + '工作');
}
}
var w = new Web('丧彪')
w.eat()
w.work()
w.coding('ts')