TS在类中的应用

一、类的简介

  1. 使用class关键字来定义一个类,类中主要包含了两个部分:属性和方法;
  2. 直接定义的属性相当于在constructor构造器中用this.声明的属性,但是没法传参。是实例属性,需要通过对象的实例去访问:
  const per = new Person();
  per.name
  1. 使用static开头的属性或是静态属性(类属性),可以直接通过类去访问
Person.age
  1. 如果方法以static开头则方法就是类方法,可以直接通过类去调用
  2. 属性前带有readonly关键字表示一个只读的属性,无法修改
class Person{
    // 定义实例属性
    // readonly name: string = '孙悟空';
    name = '孙悟空';

    // 在属性前使用static关键字可以定义类属性(静态属性)
    // static readonly age: number = 18;
    // age = 18;


    // 定义方法
    sayHello(){
        console.log('Hello 大家好!');
    }

}

const per = new Person();
// Person.age = 20;
console.log(per);
// console.log(per.name, per.age);

// console.log(Person.age);

// console.log(per.name);
// per.name = 'tom';
// console.log(per.name);

// per.sayHello();

// Person.sayHello();
per.sayHello();

二、构造函数、继承、super

  1. constructor 被称为构造函数,构造函数会在对象创建时调用;
  2. 继承extends是为了复用部分属性和方法,还可以增加和重写:
    Dog extends Animal
  • Animal被称为父类,Dog被称为子类;
  • 使用继承后,子类将会拥有父类所有的方法和属性;
  • 通过继承可以将多个类中共有的代码写在一个父类中,
    这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法,
    如果希望在子类中添加一些父类中没有的属性或方法直接加就行;
  • 如果在子类中添加了和父类相同的方法,则子类方法会覆盖掉父类的方法。
    这种子类覆盖掉父类方法的形式,我们称为方法重写,采用就近原则;
    // 定义一个Animal类
    class Animal{
        name: string;
        age: number;

        constructor(name: string, age: number) {
            this.name = name;
            // this.name = Number(name);
            this.age = age;
        }

        sayHello(){
            console.log('动物在叫~');
        }
    }

    // 定义一个表示狗的类
    // 使Dog类继承Animal类
    class Dog extends Animal{
        run(){
            console.log(`${this.name}在跑~~~`);
        }

        sayHello() {
            console.log('汪汪汪汪!');
        }
    }

    // 定义一个表示猫的类
    // 使Cat类继承Animal类
    class Cat extends Animal{
        sayHello() {
            console.log('喵喵喵喵!');
        }
    }

    const dog = new Dog('旺财', 5);
    const cat = new Cat('咪咪', 3);
    console.log(dog);
    dog.sayHello();
    dog.run();
    console.log(cat);
    cat.sayHello();
  1. 如果在子类中写了构造函数,在子类构造函数中必须对父类的构造函数constructor进行调用super,调用可以传参;
  2. 在类的方法中 super 就表示当前类的父类,可以通过 super访问父类的方法和属性。
    class Animal {
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        sayHello() {
            console.log('动物在叫~');
        }
    }

    class Dog extends Animal{

        age: number;

        constructor(name: string, age: number) {
            // 如果在子类中写了构造函数,在子类构造函数中必须对父类的构造函数进行调用
            super(name); // 调用父类的构造函数
            this.age = age;
        }

        sayHello() {
            // 在类的方法中 super就表示当前类的父类
            //super.sayHello();
            console.log('汪汪汪汪!');
        }
    }

    const dog = new Dog('旺财', 3);
    dog.sayHello();

三、抽象类

  1. abstract开头的类是抽象类,抽象类和其他类区别不大,只是不能用来创建对象;
  2. 抽象类就是专门用来被继承的类,抽象类中可以添加抽象方法;
  3. 抽象方法使用 abstract开头,没有方法体;
  4. 抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写。
    abstract class Animal {
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        // 定义一个抽象方法
        // 抽象方法使用 abstract开头,没有方法体
        // 抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写
        abstract sayHello():void;
    }

    class Dog extends Animal{
        sayHello() {
            console.log('汪汪汪汪!');
        }
    }

    class Cat extends Animal{
        sayHello() {
            console.log('喵喵喵喵!');
        }
    }

    const dog = new Dog('旺财');
    dog.sayHello();

四、接口

  1. 接口type和类型type声明的区别:
  • type可以用来描述一个对象的类型,interface用来定义一个类结构,定义类中应该包含哪些属性和方法;
  • type不能重复声明,interface可以重复声明,会叠加;
  • interface也可以当成类型声明去使用;
    type myType = {
        name: string,
        age: number
    };
    interface myInterface {
        name: string;
        age: number;
    }

    interface myInterface {
        gender: string;
    }

    const obj: myInterface = {
        name: 'sss',
        age: 111,
        gender: '男'
    };
  1. interface来定义一个类结构:
  • interface定义的类结构类似抽象类,但是抽象类的属性和方法可以有实际值,接口中的所有的属性都不能有实际的值,接口只定义对象的结构,而不考虑实际值;
  • 接口中所有的方法都是抽象方法;
  • 定义类时,可以使类去实现一个接口,实现接口就是使类满足接口的要求。
    interface myInter{
        name: string;

        sayHello():void;
    }

    class MyClass implements myInter{
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        sayHello(){
            console.log('大家好~~');
        }
    }

五、属性修饰符

TS可以在属性前添加属性的修饰符

  1. public 修饰的属性可以在任意位置访问(修改) 默认值;
  2. private私有属性,私有属性只能在类内部进行访问(修改),但是可以通过在类中添加方法使得私有属性可以被外部访问;
    class Person{

        private _name: string;
        private _age: number;

        constructor(name: string, age: number) {
            this._name = name;
            this._age = age;
        }

        /*
        *   getter方法用来读取属性
        *   setter方法用来设置属性
        *       - 它们被称为属性的存取器
        * */
        // TS中设置getter方法的方式
        get name(){
            // console.log('get name()执行了!!');
            return this._name;
        }

        set name(value){
            this._name = value;
        }

        get age(){
            return this._age;
        }

        set age(value){
            if(value >= 0){
                this._age = value
            }
        }
    }
  1. protected 受保护的属性,只能在当前类和当前类的子类中访问(修改);
  2. getset 是属性的存取器,因为对象中设置的属性可以任意的被修改,这会导致对象中的数据变得非常不安全。所以可以通过属性存取器加以限制;
    class A{
        protected num: number;

        constructor(num: number) {
            this.num = num;
        }
    }

    class B extends A{
        test(){
            console.log(this.num);
        }
    }

    const b = new B(123);
  1. 可以直接将属性定义在构造函数中:
    class C{
        constructor(public name: string, public age: number) {
        }
    }

    const c = new C('xxx', 111);
    console.log(c);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容