美文网首页
TypeScript基础语法 - 类的基本使用(三)

TypeScript基础语法 - 类的基本使用(三)

作者: __Nancy | 来源:发表于2021-04-01 14:14 被阅读0次

    TypeScript 中类的概念和使用

    • 类的基本使用
    class Lady {
      content = "Hi";
      sayHello() {
        return this.content;
      }
    }
    
    const goddess = new Lady();
    console.log(goddess.sayHello());
    
    • 类的继承
    class Lady {
      content = "Hello";
      sayHello() {
        return this.content;
      }
    }
    class XiaoJieJie extends Lady {
      sayHi() {
        return "Hi";
      }
    }
    
    const goddess = new XiaoJieJie();
    console.log(goddess.sayHello());
    console.log(goddess.sayLove());
    
    • 类的重写
    class XiaoJieJie extends Lady {
      sayHello() {
        return "Hello";
      }
      sayHi() {
        return "Hi!";
      }
    }
    
    • super 关键字的使用
    class XiaoJieJie extends Lady {
      sayHi() {
        return "Hi!";
      }
      sayHello() {
        return super.sayHello() + "。你好!";
      }
    }
    

    TypeScript 中类的访问类型

    类中的访问类型:privateprotectedpublic

    • 简单的类
    class Person {
      name: string;
    }
    
    const person = new Person();
    person.name = "Nancy";
    
    console.log(person.name);
    
    • public 访问属性
    class Person {
        name:string;
    }
    
    //等价于
    class Person {
        public name:string;
    }
    

    public从英文字面的解释就是公共的或者说是公众的,在程序里的意思就是允许在类的内部和外部被调用.

    比如我们在类内调用,我们在写一个sayHello的方法,代码如下:

    class Person {
        public name:string;
        public sayHello(){
            console.log(this.name + ' say Hello')//属于内部调用 
        }
    }
    

    类的外部

    class Person {
        public name:string;
        public sayHello(){
            console.log(this.name + 'say Hello')
        }
    }
    //-------以下属于类的外部--------
    const person = new Person()
    person.name = 'Nancy'
    person.sayHello()
    console.log(person.name)
    
    • private 访问属性

    private 访问属性的意思是,只允许再类的内部被调用,外部不允许调用

    class Person {
        private name:string;
        public sayHello(){
            console.log(this.name + 'say Hello')  //此处不报错
        }
    }
    //-------以下属于类的外部--------
    const person = new Person()
    person.name = 'Nancy'    //此处报错
    person.sayHello()
    console.log(person.name)  //此处报错
    
    • protected 访问属性

    protected 允许在类内及继承的子类中使用

    class Person {
        protected name:string;
        public sayHello(){
            console.log(this.name + 'say Hello')  //此处不报错
        }
    }
    
    class Teacher extends Person{
        public sayBye(){
            this.name;
        }
    }
    

    这时候在子类中使用this.name是不报错的。

    TypeScript 类的构造函数

    • 类的构造函数

    构造函数的关键字是constructor

    class Person{
        public name :string ;
        constructor(name:string){
            this.name=name
        }
    
    }
    
    const person= new Person('Nancy')
    console.log(person.name)
    

    更简单的写法

    class Person{
        constructor(public name:string){
        }
    }
    
    const person= new Person('Nancy')
    console.log(person.name)
    
    • 类继承中的构造器写法

    在子类中使用构造函数需要用super()调用父类的构造函数。

    class Person{
        constructor(public name:string){}
    }
    
    class Teacher extends Person{
        constructor(public age:number){
            super('Nancy')
        }
    }
    
    const teacher = new Teacher(20)
    console.log(teacher.age)
    console.log(teacher.name)
    

    这就是子类继承父类并有构造函数的原则,就是在子类里写构造函数时,必须用super()调用父类的构造函数,如果需要传值,也必须进行传值操作。就是在父类没有构造函数,子类也要使用super()进行调用,否则就会报错。

    class Person{}
    
    class Teacher extends Person{
        constructor(public age:number){
            super()
        }
    }
    
    const teacher = new Teacher(18)
    console.log(teacher.age)
    

    TypeScript 类的 Getter、Setter 和 static 使用

    • 类的 GetterSetter

    要使用访问类型private

    class Xiaojiejie {
      constructor(private _age:number){}
    }
    

    如果外面想要获取age ,就必须通过getter属性知道

    class Xiaojiejie {
      constructor(private _age:number){}
      get age(){
          return this._age//此处的_age可以单独再进行处理 例如: return this._age - 10 
      }
    }
    
    const xjj = new Xiaojiejie(28)
    
    console.log(xjj.getAge)
    

    类的外部就没办法改变,所以这时候可以用setter属性进行改变

    class Xiaojiejie {
      constructor(private _age:number){}
      get age(){
          return this._age-10
      }
      set age(age:number){
        this._age=age
      }
    }
    
    const xjj = new Xiaojiejie(28)
    xjj.age=25
    console.log(xjj.age)
    

    setter可以保护私有变量的

    • 类中的 static

    想使用这个类的实例,就要先New出来(),但是也可以不用new 例如

    class Girl {
      say() {
        return "123456789";
      }
    }
    
    const girl = new Girl();
    console.log(girl.say());
    
    //可以写成
    
    class Girl {
      static say() {
        return "123456789";
      }
    }
    console.log(Girl.sayLove());
    
    
    • 类的只读属性和抽象类
    
    class Person {
        public readonly _name :string;
        constructor(name:string ){
            this._name = name;
        }
    }
    
    const person = new Person('Nancy')
    person._name= 'Nancy123'
    console.log(person._name) //报错
    
    • 抽象类

    抽象类的关键词是abstract,里边的抽象方法也是abstract开头的

    
    abstract class Girl{
        abstract skill()  //因为没有具体的方法,所以我们这里不写括号
    
    }
    
    class Girl1 extends Girl{
        skill(){
            console.log('111111')
        }
    }
    
    class Girl2 extends Girl{
        skill(){
            console.log('222222')
        }
    }
    
    

    相关文章

      网友评论

          本文标题:TypeScript基础语法 - 类的基本使用(三)

          本文链接:https://www.haomeiwen.com/subject/pdvahltx.html