TypeScript 类入门

---

theme: scrolls-light

highlight: a11y-dark

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

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

搭建环境

• 项目结构

  • 主项目目录
    • src
      • create_class.ts
    • index.html
    • tsconfig.json

• tsconfig.json文件配置

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

定义类

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

```ts // 使用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文件 编写类里构造函数

```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原则 对扩展开放 对修改关闭 ```ts (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是指当前类的父类

```ts (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()
    }
}

})() ```

抽象类

```ts (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~