TypeScript中接口和抽象类

接口和抽象类的出现主要是为了添加参数的限制,来规范代码

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
鸭式辨型法

大体是:这里有这只鸟,它拥有和鸭子类似或者相同的方法或者属性,然后它就是个鸭子

关键词interface
和抽象类有一定的相似之处

interface Eg {
	a: number; // 必须参数
	b?: string; // 可选参数
    readonly c?: string; // 只读的可选参数
    [prop:number]:boolean // 意思是索引值的类型要为number类型,值为布尔值
}
var data: Eg = { a: 1 ,b:"2",c:"3",1:true}
console.log(data)

在这里插入图片描述
接口中规定函数

interface Eg {
    (x:string,y:string): string // 规定函数
}
let eg: Eg;
eg = function (x:string,y:string):string {
    return "eg"
}

接口继承接口
关键字:extends

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{}; 
let square:Square = {} // error 
// 上述两者意思都是使用Square这个接口
// 区别是一个需要声明后立即赋值 另一个不需要

抽象类

为了规定类中的一些属性和方法
写出来就是为了被继承的
也只能被继承
抽象类无法实列化
抽象类中也可以拥有一些抽象的属性和方法
和接口的主要区别是接口中无法实现方法
而抽象类的可以
关键字abstract

abstract class Human {
    abstract move(x: number): any;
    constructor (readonly name:string) {}
    eat() {
         
     }
}
class Student extends Human {
    move(x:number) {
        // 从抽象类中继承来的抽象方法必须在派生类中实现
    }
    constructor (name:string) {
        super(name)
    }
}
abstract class Human<T> {
    abstract move(x: number):T;
    constructor (readonly name:string) {}
    eat() {
         
     }
}

也是可以使用范类来实现

接口继承类:

class Man {
    job: string;
    constructor (readonly name: string) {}
    earnMoney () {
        console.log(`earning money`)
    }
}
 
interface HumanRule extends Man{
    nose: string;
    mouth: string;
    ear: string;
    eye: string;
    eyebrow: string
}

当我们要使用这个接口的时候也要继承Man否则就是确实一个name属性
类继承接口使用关键字implements
implements也可以实现类的多继承

class a extends Man implements HumanRule{
    nose: string;
    mouth: string;
    ear: string;
    eye: string;
    eyebrow: string;
    constructor (name) {
    	super(name)
    }
}

意思是当一个接口继承了类的属性或者方法之后,使用这个接口是也要继承那个类

混合类型

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值