【TypeScript】TS入门到实战（详解：高级类型）

最新推荐文章于 2025-06-12 13:50:26 发布

❆VE❆

最新推荐文章于 2025-06-12 13:50:26 发布

阅读量1.8k

点赞数 27

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_45796592/article/details/137809652

3.1.1.2 class类继承的两种方式

第三章、TypeScript的数据类型

3.1 TypeScript的高级类型

3.1.1 class

3.1.1.1 熟悉class类

引言

class Person {}
const p = new Person()

当创建一个Person类时，添加了实例对象p，由类型推论可以知道它的类型是Person；说明TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在。接下来跟着小编一起理解class吧。

初始化属性

class Person {
    age: number // 适用没有默认值
    name = 'VE' // 适用于有默认值
}

声明成员 age，类型为 number（没有初始值）。
声明成员 name，并设置初始值，此时，可省略类型注解（TS 类型推论为 string 类型）。
当没有默认赋值时，需要自定义属性的类型，否则会默认为any类型；赋值后，属性的类型会与赋值的类型一致，赋值的类型ts会类型推论。
看下图的几种情况：

构造函数

class Person {
    age: number
    name: string

    constructor (name: string, age: number){ // 初始化实例对象使用的,写了contructor函数后初始化实例对象时也需要传参从而初始化实例中的属性
        this.age = age
        this.name = name
    }
}
const p = new Person('10', 10)

只有初始化（比如，age: number）后，才可以通过 this.age 来访问实例成员。
需要为构造函数指定类型注解，否则会被隐式推断为 any；构造函数不需要返回值类型。
constructor构造函数是初始化实例对象使用的，写了contructor函数后初始化实例对象时也需要通过传参从而初始化实例中的属性，参数顺序跟constructor一致

实例方法

class Point {
    x: number
    y: number

    scale (n: number): void{
        this.x *= n
        this.y *= n
    }
}

方法初始化，它的的类型注解（参数和返回值）与函数用法相同

3.1.1.2 class类继承的两种方式

类继承的两种方式：1、extends（继承父类） 2、implements（实现接口）。
注意：JS 中只有 extends，而 implements 是 TS 提供的。

extends（继承父类）

class Animal { // 这是父类Animal 
    distance: string = '10' // 父类中的属性
    move () { // 父类中的方法
        console.log('move along')
    }
}

class Dog extends Animal { // 子类 Dog 继承父类 Anima
    bark () { // 子类自身的方法
        console.log('汪汪汪~')
    }
}

const dog = new Dog() // dog是Dog的实例对象，

// 从而dog同时具有了父类 Animal 和 子类 Dog 的所有属性和方法
dog.move()
dog.bark()
dog.distance = '20'
console.log('距离', dog.distance)

通过 extends 关键字实现继承。
子类 Dog 继承父类 Animal，则 Dog 的实例对象 dog 就同时具有了父类 Animal 和子类 Dog 的所有属性和方法。

implements（实现接口）: 这是ts新增的，顾名思义就是对一个接口的实现

interface Singable { // 这是添加的一个接口，定义了Singable有哪些属性和方法的类型
    name: string 
    sing: () => void
    toSing(): void
}

class Person implements Singable { // Person类是对Singable接口的实现
    name = 'VE'
    sing = () => { // 函数方面是箭头函数还是普通函数需要我们自己规范
        console.log('你是我的小啊小苹果')
    }
    toSing(): void {
        console.log('去ktv唱歌')
    }
}

const p = new Person() // p是Person的一个实例对象

// 从而拥有了Singable 接口 指定的所有方法和属性
console.log(p.name)
p.sing()
p.toSing()

通过 implements 关键字让 class 实现接口。
Person 类实现接口 Singable 意味着，Person 类中必须提供 Singable 接口中指定的所有方法和属性。

3.1.1.3 class类的5种修饰符

可见性修饰符包括：1、public（公有的） 2、protected（受保护的） 3、private（私有的）4、readonly（只读修饰符）5、static（静态的）

public（公有的）

class Animal {
    public move () { // 在父类的方法中添加pubilc（默认，可省略）
        console.log('move along')
    }
}
class Dog extends Animal { // 子类
    bark () {
        console.log('汪汪汪~')
    }
}

class Cat extends Animal { // 子类
    bark () {
        console.log('喵~喵~喵~')
    }
}

const dog = new Dog() // 由于父类设置的为pubilc修饰符,所有其子类实例可以调用父类的方法

dog.move()
dog.bark()

const cat = new Cat() // 由于父类设置的为pubilc修饰符,所有其子类实例可以调用父类的方法

cat.move()
cat.bark()