TypeScript--接口

Posted 2021-02-18 intelwisd

3.5 ts中的接口

作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内容状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供的某些方法，提供这些方法就可以满足实际需要。typescript中的接口类似java，同时还增加了更灵活的接口类型，包括属性，函数，可索引，类等

相当于定义标准

3.5.1 接口分类：

1.属性类接口：

1.1对json的约束、

function printLabel(labelInfo:{label:string}):void{
console.log(‘printLabel‘);
}

printLabel({label:‘seafwg‘}); // 传入其他类型会报错

1.2可选属性：

interface FullName{
firstName:string,
secondName:string
}
function getName(name:FullName) {
console.log(name);
}
//顺序可以不一样，但一定包含两个字段
getName({
secondName:‘secondName‘;
firstName?:‘firstName‘; // 可选参数
})

demo:

interface Config{
type: string;
url: string;
data?: string;
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) {
   console.log(‘OK‘);
 }else{
   console.log(‘err‘);
 }
}
}

2.函数类型接口：对批量方法传入参数进行约束

2.1 接口：行为和动作的规范，对于批量方法进行约束

interface FullName{
firstName:string;
secondName:string;
}

function printName(name:FullName) {
// 必须传入对象，firstName, secondName, 接口定义了firstName,secondName和类型。
console.log(name.firstName+"--"+name.secondName);
}

printName({firstName:‘seafwg‘,secondName:‘123456‘}); // 必须包含这两个字段，多余字段也会报错
let obj = {
age: 23,
firstName:‘seafwg‘,
secondName:‘assassin‘
}
printName(obj); // 不会报错，在外面定义了对象只要包含字段就可以

2.2 对方传入的参数以及返回值进行约束[可以进行批量约束]

interface encrypt{
(key:string, value:string):string;
// 参数约束，返回值约束
}
var md5:encrypt = function(key:string,value:string):string{
return key+value;
}
console.log(md5(‘name‘,‘seafwg‘));
//nameseafwg

3.可索引接口[数组，对象的约束]

// 数组接口
interface UserArr{
[index:number]:string;
// 索引为number类型，数组元素为string
[index:number]:any;
}
let arr:UserArr = [‘aaa‘, ‘bbb‘];
console.log(arr[0]);

// 对象的约束[不常用]
interface UserObj{
[index:string]:string
}
var obj:UserObj = {
name:‘seafwg‘
}

4.类类型接口【对类的约束，和抽象类有点相似】

interface Animal{
name:string;
eat(str:string):void;
}

class Dog implements Animal{
name:string; // 接口中的name
constructor(name:string) {
 this.name = name;
}
eat() { // 必须实现接口中的eat方法
 console.log(this.name+‘吃骨头‘);
}
}
let d = new Dog(‘小黑‘);
d.eat(); // 小黑吃骨头

class Cat implements Animal{
...
}

5.接口扩展【接口可以继承接口】

interface Animal{
eat():void;
}
interface Person extends Animal{ // Person继承了Animal,这时Person接口也有了父接口中eat()方法
work():void;
}

class Boy implements Person{
public name:string;
constructor(name:string) {
 this.name = name;
}
eat() { 
 console.log(this.name+‘面条‘);
}
work() {
 console.log(this.name+‘写代码‘);
}
}

let b = new Boy();
b.eat();
b.work();

demo:

interface Inter1{
play():void;
}
interface Inter2{
work():void;
}
interface Inter3 extends Inter1, Inter2{
sleep():void;
}

class Seafwg{
public name:string;
constructor(name:string) {
 this.name = name;
}
hobby() {
 console.log(this.name+‘--‘+‘coding‘);
}
}

class SeafwgSun extends Seafwg implements Inter3{
play() {
 console.log(this.name+‘篮球‘);
}
work() {
 console.log(this.name+‘coder‘);
}
sleep() {
 console.log(this.name+‘早睡早起‘);
}
}
let seafwg = new Seafwg(‘seafwg‘);
seafwg.hobby();

let smallSeaf = new SeafwgSun(‘锦旗‘);
smallSeaf.play();
smallSeaf.work();
smallSeaf.sleep();
smallSeaf.hobby();