一份不可多得的 TypeScript 学习笔记

发布时间：2025-11-05 15:45:59 来源：云智核 作者：数据库

Hi，可多我是学习前端人，今日与君共勉!本篇文章主要介绍 typeScript 中类的笔记定义、类的可多继承、类中成员修饰符等内容。学习

typeScript 中的笔记类与 ES6 中的类非常相似，如果不知道 ES6 中的可多类，建议先学习下 ES6 中的学习 class 。本篇文章重点介绍 typeScript 中的笔记类定义、继承以及修饰符。可多

1、学习类的笔记定义

类描述了所创建的对象共同的属性和方法。typeScript 支持面向对象的可多所有特性，比如类、学习接口等。笔记

在 typeScript 中定义类的时候，使用 class 关键字，类名首字母使用大写，类可以包含以下三个模块：

定义属性的时候，需要添加属性类型，构造函数中的参数也需要加类型，引用任何一个类的成员的时候都用 this ，this 关键字表示当前类实例化的对象。使用 new 关键字来实例化对象，并初始化它。如示例：

class Web{

workTime: string

constructor(n:string) {

this.workTime = n

}

showWork(){

return "搬砖的前端"

}

}

let qq = new Web("五年")

console.log(qq.showWork());

编译以上代码，得到的 js 代码如下：

"use strict";

class Web {

constructor(n) {

this.workTime = n;

}

showWork() {

return "搬砖的前端";

}

}

let qq = new Web("五年");

console.log(qq.showWork());

2、类的继承

typeScript 支持继承类，即可以在创建类的时候继承一个已存在的类，类继承的时候使用 extends 关键字，基于类的程序设计中一种最基本的服务器托管模式是允许使用继承来扩展现有的类。比如：

class Dirnks{

name: string

constructor(n: string) {

this.name = n

}

save(m: string) {

console.log(`${this.name}饮料应该${m}`);

}

}

class Soda extends Dirnks{

constructor(n: string) {

super(n)

}

}

let kele = new Soda("可乐")

上述示例是一个最基本的类继承，其中 Soda 继承了 Dirnks 的属性和方法，其中 Soda 是一个派生类，也叫做子类，Dirnks 是一个基类，也叫超类或父类。

派生类包含了一个构造函数，构造函数必须调用 super() ，会执行基类的构造函数。需要注意的是：在子类构造函数里访问 this 的属性之前，一定要先调用 super ，这是 typeScript 强制执行的一条重要规则。

如果父类和子类都包含某一方法时，方法名相同，但是具体执行内容不同的时候，该执行哪一个方法呢?

修改上述实例，给子类也添加一个方法，云南idc服务商代码如下：

class Dirnks{

name: string

constructor(n: string) {

this.name = n

}

save(m: string) {

console.log(`${this.name}饮料应该${m}`);

}

}

class Soda extends Dirnks{

constructor(n: string) {

super(n)

}

save() {

return "存储方法"

}

}

let kele = new Soda("可乐")

编译以上代码啊，得到的 js 代码如下：

"use strict";

class Dirnks {

constructor(n) {

this.name = n;

}

save(m) {

console.log(`${this.name}饮料应该${m}`);

}

}

class Soda extends Dirnks {

constructor(n) {

super(n);

}

save() {

return "存储方法";

}

}

let kele = new Soda("可乐");

此时会执行子类中的方法。其原理是，类继承后，子类可以对父类的方法进行重新定义，这个过程称之为方法的重写。

typeScript 中子类只能继承一个父类，虽然不支持继承多个类，但是支持多重继承。如下：

class One{

name: string

constructor(n: string) {

this.name = n

}

show() {

return "展示"

}

}

class Two extends One{

constructor(n:string) {

super(n)

}

}

class Three extends Two{

constructor(n: string) {

super(n)

}

}

let three = new Three("剁成")

3、修饰符

在 typeScript 中，可以使用访问控制符来保护对类、变量、方法和构造函数的访问。typeScript 支持 3 种不同的访问权限，分别为：

在上边类中的成员定义的时候，没有明确使用任何修饰符，默认的就是 public ，所以可以将上面的类改写为：

class HH{

public name: string

public constructor(n: string) {

this.name = n

}

}

let h = new HH("HH")

使用 public 之后，对上面的应用并没有任何影响。

它的特点：被它标记的成员在类的里面、子类里面、类外面都可以访问到。

类中添加 protected 修饰符来修饰成员时，将上述实例的 public 修饰符修改为 protected 如下：

class HH{

protected name: string

constructor(n: string) {

this.name = n

}

}

let h = new HH("HH")

它的特点：被它标记的成员在类的里面、子类里面能使用，但是在类的外面不能使用。

理解 privateclass HH{

private name: string

constructor(n: string) {

this.name = n

}

}

class H extends HH{

constructor(n: string) {

super(n)

}

show() {

console.log(this.name); // 报错

}

}

let h = new H("HH")

console.log(h.name); // 报错

上面的示例报错，提示：属性“name”为私有属性，只能在类“HH”中访问。

它的特点：被它标记的成员不能再声明它的类的外部访问。

相关文章