1.TS中的接口
接口的作用:在面向对象的编程中，接口是种规范的定义， 它定义了行为和动作的规范， 在程序设计里面，接口起 到一种限制和规范的作用。接
口定义了某-批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方
法，提供这些方法的类就可以满足实际需要。typescrip中 的接口类似于java,同时还增加了更灵活的接口类型，包括属性、函数、可索引和类
等。
1.1 属性类接口
- 1.1.1 一个入门小实例
//TS定义一个函数
function printLabel():void{
console.log('printLabel')
}
// printLabel();
//约束传入参数为string类型
function printLabel(label:string):void{
console.log('printLabel')
}
printLabel('haha');
/*
TS自定义方法传入参数对json对象进行约束
传入对象labelinfo中必须要有label属性
*/
function printLabel(labelInfo:{
label:string}):void{
console.log('printLabel')
}
printLabel(
{
}
);
// "类型“{}”的参数不能赋给类型“{ label: string; }”的参数
printLabel({
label:'hahah'})
- 1.1.2 属性类接口
//接口：行为和动作的规范，对批量方法进行约束
/**
* 使用这个方法必须传入firstName secondName
*/
interface FullName{
firstName:string;
secondName:string;
}
function printName(name:FullName){
console.log(name.firstName + '---' + name.secondName)
}
//错误写法1
// printName(123)
printName({
firstName:'康',
secondName:'家豪'
})
- 1.1.3 可选属性接口
//接口：行为和动作的规范，对批量方法进行约束
/**
* 原始属性接口
*/
interface FullName {
firstName: string;
secondName: string;
}
function printName(name: FullName) {
console.log(name)
}
//这里我传入的对象必须要有 firstName 属性和 secondName 属性
printName({
firstName: '康',
secondName: '家豪'
})
// {firstName: "康", secondName: "家豪"}
/**
* 可选属性接口 配置可选参数
*/
interface FullName2 {
firstName: string;
secondName?: string;
}
function printName2(name: FullName2) {
console.log(name)
}
//这里secondName就是可传可不传了
printName2({
firstName: '康'
})
// {firstName: "康"}
- 1.1.4 使用ts封装一个ajax
/**
* 使用TS封装一个ajax
*/
interface Config{
type:string;
url:string;
data?:any;
dataType:string;
}
function ajax(config:Config){
let 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'){
console.log(JSON.parse(xhr.responseText))
}else{
console.log(xhr.responseText)
}
}
}
}
//使用
ajax({
type:'get',
url:'localhost:3000',
data:{
name:123},
dataType:'json'
})
1.2 函数类型接口
函数类型接口：对方法传入的参数 以及返回值进行约束
/**
* 加密的函数类型接口
* 对方法传入的参数和返回值进行约束
*/
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
//md5算法过程
return key + value;
}
console.log(md5('name','张三'))
1.3 可索引接口
数组，对象的约束（不常用）
/**
* TS定义数组的方式
*/
// var arr:number[] = [1,2,3,4,5]
/**
* 使用接口来对数组进行约束
*/
interface userArr{
//数组索引为number类型 值为string类型
[index:number]:string
}
var arr:userArr = ['aaa','ccc'];
console.log(arr[0])
/**
* 使用接口来对对象进行约束
*/
interface userObj{
//对象索引为string类型 值为string类型
[index:string]:string
}
var obj:userObj = {
name:'20'}
1.4 类类型接口
对类的约束 和 抽象类有点相似
/**
* 类类型接口
* 对类的约束
*/
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name:string;
constructor(name:string){
this.name = name;
}
eat(food:string){
console.log(this.name +'吃' + food)
}
}
var d = new Dog('小黑');
d.eat('粮食哦')
1.5 接口拓展
接口可以继承接口
/**
* 接口拓展
* 接口的继承
*/
interface Animal{
eat():void
}
interface Person extends Animal{
work():void;
}
class web implements Person{
name:string;
constructor(name:string){
this.name = name;
}
eat(){
console.log(this.name + '喜欢吃馒头')
}
work(){
console.log(this.name + '喜欢打代码')
}
}
var p1 = new web('小李')
p1.eat()
p1.work()