属性接口
首先明确一下什么是接口
接口：行为和动作的规范，对批量方法进行约束，定义接口的时候使用interface。
接口可以重复使用
function printLabel(name:string):any {
console.log('printLabel');
}
printLabel('aaa');
function printLabel1(labelInfo:{label:string}):any {
console.log('printLabel1');
}
printLabel1({label:"lisi"});//正确写法
// printLabel1({name:'wangwu'});//错误写法
//对批量方法传入参数进行约束
// 接口：行为和动作的规范，对批量方法进行约束，使用interface
//这里定义接口Fullname，规定里面必须有firstName和secondName两个参数
interface Fullname{
firstName:string;
secondName:string;
}
//1.定义一个函数printName，里面的参数类型是接口Fullname里面的参数类型
function printName(name:Fullname):any{
//必须传入对象 firstname和secondname
console.log(name.firstName + name.secondName);
}
//这种方法只能包含interface里面定义的两内容 调用函数printName，传递参数
printName({
firstName:'jiakang',
secondName:'wu'
})
//2.再次定义一个printInfo函数，里面的参数类型是接口Fullname里面的参数类型
function printInfo(info:Fullname):any{
//必须传入对象 firstname和secondname
console.log(info.firstName + info.secondName);
}
//这种声明一个对象，可以包含age，age并没有在interface里面进行声明
const obj1 = {
firstName:'san',
secondName:'zhang',
age:12
}
printInfo(obj1)
属性接口可传可不传参数
使用 ？号来表示这个参数是不是必须的，这个函数里面传递参数的方式一致，都是通过？来表示该参数是否是必须的
interface Fullname1{
firstName:string;
secondName?:string;
}
function getName(name:Fullname1):any{
//必须传入对象 firstname和secondname
console.log(name);
}
//这种方法只能包含interface里面定义的内容
getName({
firstName:'jiakang',
secondName:'wu1'
})
案例
/*
$ajax({
type:'get',
url:"test.json",
data:{username:$('#username').val(),content:$('#content').val()
})
*/
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){
console.log('成功');
}
}
}
ajax({
type:'get',
data:'name=zhangsan',
url:'http:www.baidu.com',
dataType:'json'
})
加密型接口
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function (key: string, value: string):
string {
return key+value
}
console.log(md5('name', 'zhangsan'));
var sha1:encrypt=function (key: string, value: string):
string {
return key+value
}
console.log(sha1('name', 'lisi'));
继承
-
接口继承接口使用的是extends。也就是说无论是类继承类还是接口继承接口都是用的是extends
-
而类和类之间的继承使用的是extends和super来完成的；
-
一个类可以同时继承类和接口，当然接口和类都是可以继承多个的
-
接口只要继承了，接口里面的方法必须要有，否则报错
一个类继承一个接口
定义一个Doggs类，继承Animal的接口
interface Animal { //这里定义了一个Animal的接口
name:string;
eat(str:string):void;
}
class Doggs implements Animal { //定义一个Doggs类，继承Animal的接口
name:string;
constructor(name:string){
this.name=name;
}
eat(){ //这里可以没有参数，因为上面已经传了
console.log(this.name + '吃粮食');
}
}
var dog= new Doggs('小黑');
dog.eat();
一个接口继承另一个接口extends，同时使用类继承接口-implements
interface Animal { //Animal接口有eat方法
eat():any;
}
//接口之间的继承使用的是extends
interface People extends Animal { // People接口继承Animal接口，继承了Animal里面的属性和方法，拥有了eat方法和自己本身的方法work方法
work():any;
}
class Wab implements People { //定义Wab类继承People接口，拥有了eat和work方法
public name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name + '喜欢吃馒头');
}
work(){
console.log(this.name + '喜欢工作');
}
}
var wab = new Wab('小丽');
wab.eat();
wab.work();
一个类同时继承另外一个类和多个接口
interface Animal2 { //Animal接口有eat方法
eat():any;
}
interface People2 extends Animal { // People2接口继承Animal2接口，继承了Animal里面的属性和方法，拥有了eat方法和自己本身的方法work方法
work():any;
}
interface People3 extends Animal { // People3接口继承Animal2接口，继承了Animal里面的属性和方法，拥有了eat方法和自己本身的方法sleep方法
sleeping():any;
}
class Man2 { //定义了Man2类
name:string;
constructor(name:string){
this.name = name;
}
conding(code:string){
console.log(this.name + code);
}
}
//继承Man的类，同时继承接口People2和People3
class Wab2 extends Man2 implements People2,People3 {
public name:string;
constructor(name:string){
super(name)
}
eat(){
console.log(this.name + '喜欢吃馒头');
}
work(){
console.log(this.name + '喜欢工作');
}
sleeping(){
console.log(this.name + '喜欢睡觉');
}
}
var wab2 = new Wab2('小丽');
wab2.eat();
wab2.work();
wab2.sleeping();
wab2.conding('写ts代码');
一个类同时继承多个类和多个接口
interface Animal2 { //Animal接口有eat方法
eat():any;
}
interface People2 extends Animal { // People2接口继承Animal2接口，继承了Animal里面的属性和方法，拥有了eat方法和自己本身的方法work方法
work():any;
}
interface People3 extends Animal { // People3接口继承Animal2接口，继承了Animal里面的属性和方法，拥有了eat方法和自己本身的方法sleep方法
sleeping():any;
}
class Man2 { //定义了Man2类
name:string;
constructor(name:string){
this.name = name;
}
conding(code:string){
console.log(this.name + code);
}
}
class Man3 { //定义了Man3类
name:string;
constructor(name:string){
this.name = name;
}
conding(code:string){
console.log(this.name + code);
}
}
//继承Man2和Man3的类，同时继承接口People2和People3
class Wab2 extends Man2,Man3 implements People2,People3 {
public name:string;
constructor(name:string){
super(name)
}
eat(){
console.log(this.name + '喜欢吃馒头');
}
work(){
console.log(this.name + '喜欢工作');
}
sleeping(){
console.log(this.name + '喜欢睡觉');
}
}
var wab2 = new Wab2('小丽');
wab2.eat();
wab2.work();
wab2.sleeping();
wab2.conding('写ts代码');
