TypeScript 类入门

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ，赢取创作大礼包，挑战创作激励金

搭建环境

• 项目结构
  • 主项目目录
    • src
      • create_class.ts
    • index.html
    • tsconfig.json
• tsconfig.json文件配置

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "strict": true,
        "outDir": "./dist"
    },
    "include": [
        "./src/**/*"
    ]
}

定义类

• 创建对象 必须先定义类。 所谓类可以理解为对象的模型

// 使用class关键字定义一个类
/*
    对象中主要包含了两个部分：
    属性
    方法
 */
class Person {
    /*
        直接定义的属性是实例属性 需要通过对象的实例去访问
        const per = new Person()
        per.name

        使用static开头的是静态属性(类属性) 可以直接通过类名.属性获取
        Person.age
     */


    // 定义实例属性
    name: string = 'vike'
    // 只读实例属性 无法修改
    readonly sex: string = '男'
    // 在属性前使用static关键字可以定义类属性(静态属性)
    static age: number = 18

    // 平时使用 有自动类型判断
    names = 'vike' 
    ages = 18

    // 定义实例方法 调用使用实例.方法名
    sayHello() {
        console.log('Hello vike!')
    }

    // 定义类方法 调用使用类名.方法名
    static sayHellos() {
        console.log('Hello vikes!')
    }
}
const per = new Person()
console.log(per)

构造函数

• 新建一个ts文件 编写类里构造函数

class Dog {
    name:string
    age:number

    // constructor 被称为构造函数 会在对象创建时调用
    constructor(name:string, age:number) {
        //  在实例方法中，this表示当前的实例
        // 在构造函数中当前对象就是新建的那个对象
        // 可以通过this向新建对象中添加属性
        console.log(this)
        this.name = name
        this.age = age
    }

    // 实例方法
    bark() {
        alert('汪汪汪')
    }
}
// 接收两个参数 name age
const dog = new Dog('旺财',3)
const dog1 = new Dog('小黑',5)
console.log(dog)

类的继承

• ocp原则 对扩展开放 对修改关闭

(function () {
    // 定义一个动物的类
    class Animal {
        name: string
        age: number

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

        sayHello() {
            console.log('动物在叫')
        }
    }
    // 定义一个狗的类 使dog类继承Animal类
    // 此时Animal类称为父类 dog类称为子类
    // 使用继承后 子类将会拥有父类的属性和方法
    // 通过继承就可以让共用属性方法复用 不用重复写
    // 如果要扩展 直接加就可以
    class Dog extends Animal {
        // 扩展
        run() {
            console.log(`${this.name}在跑`)
        }
        // 如果子类方法和父类方法重复 子类会覆盖父类方法
        // 方法的重写
        sayHello() {
            console.log('汪汪汪')
        }
    }
    // 定义一个猫类 使cat类继承Animal类
    class Cat extends Animal {

    }


    const dog = new Dog('小黄', 3)
    const cat = new Cat('小喵', 5)

})()

super关键字

• super是指当前类的父类

(function () {
    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()
        }
    }
})()

抽象类

(function () {
    /*
        abstract 开头的是抽象类
        抽象类和其他类唯一区别就是不能创建实例对象 只能被继承
        抽象类中可以添加抽象方法
     */
    abstract  class Animal {
        name: string

        constructor(name: string) {
            this.name = name
        }
        // 抽象方法只能在抽象类中定义
        // 并且子类必须对方法重写
        abstract sayHello():void
    }

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


})()

总结

• 今日份 ts类知识get~