ts学习-4

快来打我* 2022-12-19 01:20 199阅读 0赞

> 1.ts中的类和类的继承

//ts中的类定义
    class Person{
        name:string;//属性 前面省略了public关键字
        constructor(name:string){
            this.name=name;
        }
        getName():void{
            console.log("类中的获取name的值："+this.name) 
        }
        setName(name:string):void{
            this.name=name
        }
     }
     let p=new Person('怒放的阿旭');
     p.getName();
     p.setName('yangdongxu');
     p.getName();
     class Web extends Person{
         constructor(name:string){
             super(name);/* 初始化父类的构造函数 */
         }
     }
     let w=new Web('web的值：：：');
     w.getName();

> 2.类的修饰符
> 
> 类的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符
> 
>  public ：公有 在类里面、在子类中里面可以访问在外部可以访问
> 
>  protected :保护类型 在类的里面、字类里面可以访问 在外部不可以访问
> 
>  private :私有属性 在类里面可以访问 字类、类的外部没法访问
> 
>  属性如果不加修饰符 默认是公有 (public)

/* 
     类的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符
     public ：公有 在类里面、在子类中里面可以访问在外部可以访问
     protected :保护类型 在类的里面、字类里面可以访问 在外部不可以访问
     private :私有属性 在类里面可以访问 字类、类的外部没法访问
     属性如果不加修饰符 默认是公有 (public)
     */
    class pub{
       public name:string;
    //    private name:string;
    //    protected name:string;
       constructor(name:string){
          this.name=name;
       }
       getName(){
           console.log("pub中的属性："+this.name);
       }
    }
    let outPub=new pub('name');
    outPub.getName();//自己内部调用
    console.log("外部调用："+outPub.name);//外部使用属性
    class sonPub extends pub{
        constructor(name:string){
            super(name)
        }
    }
    let sonP=new sonPub('sonP');
    sonP.getName();//字类访问属性

> 静态的方法和静态的属性的使用

class Han{
        static animal:string='static_prototype';//静态属性的定义
        constructor(name:string){
        }
        static print(){
            console.log("//调用静态的方法",Han.animal);//获取静态的属性
        }
    }
    let H=new Han('Han_name');//
    Han.print();//调用静态的方法

> 多态：父类中定义一个方法，在子类中去实现  每个子类对这个方法都有自己独特的实现的方式 这就是多态

class Han{
        thing:string;
        constructor(name:string){
            this.thing=name;
        }
        eat(){
            console.log("//animal的子类都有吃的方法,每个子类吃的方式不一样",this.thing);//eat的方法
        }
    
    }
    class dog extends Han{
        constructor(name:string){
            super(name)
        }
        eat(){
           console.log('dog类对象吃的方法中的thing:',this.thing); 
        }
    }
    class cat extends Han{
        constructor(name:string){
            super(name)
        }
        eat(){
           console.log('cat类对象吃的方法中的thing:',this.thing); 
        }
    }
    new dog('粮食类').eat();
    new cat('吃老鼠类').eat();

> 抽象的类：1.在抽象类中的类不能实例化 定义的抽象方法不包含具体的实现并且要在子类中实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

abstract class Han{
        thing:string;
        constructor(name:string){
            this.thing=name;
        }
        abstract eat():any;
    
    }
    class dog extends Han{
        constructor(name:string){
            super(name)
        }
        eat(){
           console.log('dog类对象吃的方法中的thing:',this.thing); 
        }
    }
    class cat extends Han{
        constructor(name:string){
            super(name)
        }
        eat(){
           console.log('cat类对象吃的方法中的thing:',this.thing); 
        }
    }
    new dog('粮食类').eat();
    new cat('吃老鼠类').eat();

> 属性的接口：

//属性的接口
    interface FullName {
        firstName:string;
        lastName:string;
    }
    function add(name:FullName):any{
        console.log(`接口中的demo：${name.firstName},${name.lastName}`);
    }
    add({
        firstName:'dongxu',
        lastName:'yang'
    });

> 接口可选参数：

//属性的接口 属性可选 加？  lastName可传递 可不传递
    interface FullName {
        firstName:string;
        lastName?:string;
    }
    function add(name:FullName):any{
        console.log(`接口中的demo：${name.firstName},${name.lastName}`);
    }
    add({
        firstName:'dongxu'
        // lastName:'yang'
    });

> 接口的用途 封装原生的ajax

//接口的用途 封装原生的ajax
    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){
                if(config.dataType=='json'){
                    console.log(JSON.parse(xhr.responseText))
                }else{
                    console.log(xhr.responseText)
                }
            }
        }
    }
    ajax({
        type:'get',
        url:'http://a.itying.com/api/productlist',
        data:'',
        dataType:'json'
    })

> 函数中接口的使用：对方法中的参数和返回数值进行约束

//函数接口的使用
    interface getInfo{
      (name:string,age:number):string
    }
    let getFn:getInfo=function(name:string,age:number):string{
        let a=name+age;
        console.log(a);
       return a
    }
    getFn('yangdongxu=====',2000);

>  可索引的接口 数组/对象的约束 （不常用）

// 数组的规范接口
    interface UserArr{
        [index:number]:string//索引是数字 数值是字符串
    }
    let arr=['zhagsang','lisi'];
    console.log(arr);//["zhagsang", "lisi"]
    //对象接口  
    interface Obj{
        [name:string]:string//对象中的key value都是字符串
    }
    let obj:Obj={
        name:'saa'
    }

> 定义一个类的接口

interface Animal{
        name:string;
        eat(name:string):void
    }
    //实现定义的类的接口的类
    class dog implements Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        eat(name:string){
            console.log(this.name+name)
        }
    }
    let d=new dog('dog_xiaolei');
    d.eat('东西');

>  接口的继承：

//  接口可以继承接口
    interface Animal{
        eat():void
    }
    interface Person extends Animal{
        work():void
    }
    //在类中要实现接口和继承的接口中的方法
    class Web implements Person{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        eat():void{
         console.log(`${this.name}吃好吃的东西`)
        }
        work():void{
            console.log(`${this.name}努力的工作`)
        }
    }
    let pe=new Web('小杨');
    pe.eat();
    pe.work();

> 在类中要实现接口和继承的接口中的方法  并且要实现继承一个类

//  接口可以继承接口
    interface Animal{
        eat():void
    }
    interface Person extends Animal{
        work():void
    }
    //一个要被web继承的父亲类
    class programer{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        codeing(name:string):void{
          console.log(this.name+name)
        }
    }
    
    //在类中要实现接口和继承的接口中的方法  并且要实现继承一个类
    class Web  extends programer implements Person{
        // name:string;
        constructor(name:string){
            // this.name=name;
            super(name)
        }
        eat():void{
         console.log(`${this.name}吃好吃的东西`)
        }
        work():void{
            console.log(`${this.name}努力的工作`)
        }
    }
    
    let WebC=new Web('小杨');
    WebC.eat();
    WebC.work();
    WebC.codeing('写ts代码');

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20221120/c5a9b7bd528548be860b017e214b83db.png