Typescript中的类 和 Typescript中的接口

于 2021-07-01 20:04:31 发布
阅读量204 收藏
点赞数
分类专栏： TypeScript 文章标签： 面向对象编程 接口 封装 多态 抽象类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chen4565/article/details/118396362
版权
本文详细介绍了TypeScript中的类定义、继承、类修饰符（public、protected、private）的使用，以及静态属性和方法。同时，还探讨了抽象类、接口的概念和应用，包括属性类接口、函数类型接口、可索引接口和类类型接口，并通过实例展示了如何实现多态。文章最后讨论了接口的扩展和在实际编程中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

TypeScript

TypeScript中的类

1)类的定义 2)类的继承 3)类里面的修饰符 4)静态属性 静态方法 5)抽象类 继承 多态

类的定义
1.ts中类的定义  
es5:
function Person(name){
    this.name = name;
    this.run = function(){
        console.log(this.name);
    }
}
var a = new Person('张三');
console.log(a.run);

ts中定义类：
class Person{
    name:string; // 属性  前面省略了public关键词
    constructor(name:string){ // 构造函数  实例化类的时候触发的方法
        this.name = name;
    }
    run():void{
        alert(this.name)
    }
}
var a = new Person('张三')
console.log(a.name)
console.log(a.run())

class Person{
    name:string;
    constructor(name:string){ // 构造函数  实例化类的时候触发的方法
        this.name = name;
    }
    getName():string{
        return this.name;
    }
    setName(name:string){
        this.name = name;
    }
}
var a = new Person('张三')
alert(a.getName())
a.setName('李四')
alert(a.getName())
类的继承
2.ts中实现继承 extends super
class Person{
    name:string;

    constructor(name:string){
        this.name = name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
var a = new Person('张三');
alert(a.run())

class ts extends Person{
    constructor(name:string){
        super(name) // 初始化父类的构造函数
    }
}
var b = new ts('李四')
console.log(b.run()) 


ts中继承的探讨  父类的方法和子类的方法一致
class Person{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
// var a = new Person('张三');
// alert(a.run())

class ts extends Person{
    constructor(name:string){
        super(name);  // 初始化父类的构造函数
    }
    run():string{
        return `${this.name}在运动-子类`
    }
    work(){
        alert(`${this.name}在工作`)
    }
}
var b = new ts('李四');
// alert(b.run());
// b.work();
alert(b.run());
类里面的修饰符

类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符

public:公有 在当前类里面 子类 类外面都可以访问

protected:保护类型 在当前类里面 子类里面可以访问 在类外部没法访问

private:私有 在当前类里面可以访问 子类 类外部都没法访问

注意:属性如果不加修饰符 默认就是 公有(public)

public:公有  在当前类里面  子类  类外面都可以访问
 class Person{
    public name:string;  // 公有属性
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
// var a = new Person('张三');
// alert(a.run())

 class ts extends Person{
     constructor(name:string){
         super(name);  // 初始化父类的构造函数
     }
     run():string{
         return `${this.name}在运动-子类`
     }
    work(){
        alert(`${this.name}在工作`)
    }
}
var b = new ts('李四');
console.log(b.run())
console.log(b.work())

类外部访问公有属性
class Person{
    public name:string;  // 公有属性
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
var  a = new Person('哈哈哈');
alert(a.name);
--------------------------------------------------------------------------------

protected:保护类型  在类里面  子类里面可以访问  在类外部没法访问
class Person{
    protected name:string;  // 保护类型

    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
var a = new Person('王五');
alert(a.run())

class ts extends Person{
    constructor(name:string){
        super(name);
    }                  
    work(){
        alert(`${this.name}在工作`)
    }
}
var b = new ts('李四11');
b.work();
alert( b.run());

类外外部没法访问保护类型的属性
class Person{
    protected name:string;  // 保护类型
    constructor(name:string){
        this.name = name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
var a= new Person('哈哈哈');
alert(a.name);
--------------------------------------------------------------------------------

private:私有  在当前类里面可以访问  子类  类外部都没法访问
class Person{
    private name:string;  // 私有
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}

class ts extends Person{
    constructor(name:string){
        super(name)
    }
    work(){
        console.log(`${this.name}在工作`)
    }
}

class Person{
    private name:string;  // 私有
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
var a = new Person('哈哈哈');
alert(a.run());
静态属性 静态方法
静态属性 静态方法
function Person(){
    this.run1=function(){

    }
}
Person.name='哈哈哈';
Person.run2=function(){  // 静态方法

}
var p = new Person();
Person.run2(); // 静态方法的调用

class Per{
    public name:string; 
    public age:number=20;

    static sex="男"; // 静态属性
    constructor(name:string) {
        this.name=name;
    }
    run(){  // 实例方法
        alert(`${this.name}在运动`)
    }
    work(){
        alert(`${this.name}在工作`)
    }
    static print(){  // 静态方法  里面没法直接调用类里面的属性
        alert('print方法'+Per.sex);
    }
}
var p=new Per('张三');
p.run();
Per.print();
alert(Per.sex);
抽象类 继承 多态
多态:父类定义一个方法不去实现  让继承它的子类去实现  每一个子类有不同的表现, 多态属于继承
class Animal {
    name:string;
    constructor(name:string) {
        this.name=name;
    }
    eat(){ // 具体吃什么 不知道 具体吃什么?继承它的子类去实现,每一个子类的表现不一样
        console.log('吃的方法')
    }
}

class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃粮食'
    }
}
var dog = new Dog('小狗');
console.log(dog.eat());

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃老鼠'
    }
}
var cat = new Cat('小猫');
console.log(cat.eat());
--------------------------------------------------------------------------------

typescript中的抽象类:它是提供其他类继承的基类，不能直接被实例化
用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
abstract抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准,标准：Animal 这个类要求它的子类必须包含eat方法

abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  // 抽象方法不包含具体实现并且必须在派生类中实现。
    run(){
        console.log('其他方法可以不实现')
    }
}
// var a=new Animal() /*错误的写法*/
 
class Dog extends Animal{
    // 抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}
var dog = new Dog('小花花');
dog.eat()

class Cat extends Animal{
    // 抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    run(){   }
    eat(){
        console.log(this.name+'吃老鼠')
    }
}
var cat = new Cat('小花猫');
cat.eat();

TypeScript中的接口

1)属性类接口 2)函数类型接口 3)可索引接口 4)类类型接口 5)接口扩展

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，

在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，

接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，

它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。

typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

属性类接口
1.属性接口  对json的约束
ts中定义方法
function printLabel():void {
    console.log('printLabel');
}
printLabel();

ts中定义方法传入参数
function printLabel(label:string):void {
    console.log('printLabel');
}
printLabel('hahah');

ts中自定义方法传入参数,对json进行约束
function printLabel(labelInfo:{label:string}):void {
    console.log('printLabel');
}
printLabel('hahah'); //错误写法
printLabel({name:'张三'});  //错误的写法
printLabel({label:'张三'});  //正确的写法



对批量方法传入参数进行约束,接口：行为和动作的规范，对批量方法进行约束
就是传入对象的约束  属性接口
interface FullName{
    firstName:string; // 注意:结束
    secondName:string;
}

function printName(name:FullName){
    // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}
// printName('1213');  //错误

var obj={   // 传入的参数必须包含 firstName  secondName 
    age:20,
    firstName:'张',
    secondName:'三'
};
printName(obj)


接口:行为和动作的规范，对批量方法进行约束
interface FullName{
    firstName:string;   //注意:结束
    secondName:string;
}

function printName(name:FullName){
    // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}

function printInfo(info:FullName){
    // 必须传入对象  firstName  secondName
    console.log(info.firstName+info.secondName);
}

var obj={   // 传入的参数必须包含 firstName  secondName 
    age:20,
    firstName:'张',
    secondName:'三'
};
printName(obj);
printInfo({
    firstName:'李',
    secondName:'四'
})



接口:可选属性
interface FullName{
    firstName:string;
    secondName:string;
}

function getName(name:FullName){
    console.log(name)
}
// 参数的顺序可以不一样
getName({        
    secondName:'secondName',
    firstName:'firstName'
})

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

function getName(name:FullName){
    console.log(name)
}  
getName({               
     firstName:'firstName'
})
小案例
// 原生js封装的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){
            console.log('chengong');
            if(config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText)
            }
        }
   }
}

// 调用
ajax({
    type:'get',
    data:'name=zhangsan',
    url:'http://a.itying.com/api/productlist', //api
    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'));
可索引接口
可索引接口:数组 对象的约束 (不常用)

ts定义数组的方式
var arr:number[]=[2342,235325]
var arr1:Array<string>=['111','222']

可索引接口 对数组的约束
interface UserArr{
    [index:number]:string
}
var arr:UserArr=['aaa','bbb'];
console.log(arr[0]);
var arr:UserArr=[123,'bbb'];  /*错误*/
console.log(arr[0]);        


可索引接口 对对象的约束
interface UserObj{
    [index:string]:string
}
var arr:UserObj={name:'张三'};
console.log(arr)
类类型接口
类类型接口:对类的约束  和   抽象类抽象有点相似    
interface Animal{
    name:string;
    eat(str:string):void;
}

class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小黑');
d.eat();

class Cat implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(food:string){
        console.log(this.name+'吃'+food);
    }
}
var c=new Cat('小花');
c.eat('老鼠');
接口扩展
接口扩展：接口可以继承接口   
interface Animal{
    eat():void;
}
interface Person extends Animal{
    work():void;
}

class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){
        console.log(this.name+'喜欢吃馒头')
    }
    work(){
        console.log(this.name+'写代码');
    }
}
var w=new Web('小李');
w.work();
w.eat();


interface Animal{
    eat():void;
}
interface Person extends Animal{
    work():void;
}

class Programmer{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    coding(code:string){
        console.log(this.name+code)
    }
}

class Web extends Programmer 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代码');

注意

1.属性如果不加修饰符 默认就是 公有(public)

2.类里面的三种修饰符:public(公有) protected(保护类型) private(私有)

总结

本篇文章主要介绍了 Typescript中的类 和 Typescript中的接口, 本篇文章只是作者给自己写的笔记, 如有任何疑问请移步官网

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值