【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》003-TypeScript 中的类

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
[🚀一、TypeScript 中的类](#🚀一、TypeScript 中的类)
- 🔎1.传统构造函数与原型链
- - [🦋1.1 构造函数](#🦋1.1 构造函数)
  - [🦋1.2 原型方法](#🦋1.2 原型方法)
  - [🦋1.3 特点：](#🦋1.3 特点：)
- [🔎2.ES6 类](#🔎2.ES6 类)
- - [🦋2.1 基本语法](#🦋2.1 基本语法)
  - [🦋2.2 特点：](#🦋2.2 特点：)
- 🔎3.继承
- - [🦋3.1 基类与派生类](#🦋3.1 基类与派生类)
  - [🦋3.2 关键点：](#🦋3.2 关键点：)
- [🔎4.访问修饰符（TypeScript 特性）](#🔎4.访问修饰符（TypeScript 特性）)
- - [🦋4.1 示例：](#🦋4.1 示例：)
- 🔎5.类类型约束
- 🔎6.类实现接口
- - [🦋6.1 单接口实现](#🦋6.1 单接口实现)
  - [🦋6.2 多接口实现](#🦋6.2 多接口实现)
  - [🦋6.3 接口优势：](#🦋6.3 接口优势：)
- [🔎7.传统方式 vs ES6 类](#🔎7.传统方式 vs ES6 类)
- 🔎8.常见注意事项

🚀前言

在当今的应用开发中，TypeScript凭借其静态类型和面向对象编程的特性，成为了越来越多开发者的首选语言。而在鸿蒙原生应用开发中，掌握TypeScript中的类的使用，不仅能提升我们的开发效率，还能帮助我们构建更加稳健和可维护的应用程序。

本文将重点介绍TypeScript中的类的基本概念和高级特性，从类的定义、构造函数，到继承、多态等内容，逐步带领你深入理解面向对象编程的思想。通过实际案例，我们将展示如何在鸿蒙原生应用中灵活运用类，提高代码的复用性和可读性。

🚀一、TypeScript 中的类

🔎1.传统构造函数与原型链

🦋1.1 构造函数

javascript 复制代码

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

🦋1.2 原型方法

javascript 复制代码

Cat.prototype.type = '动物';
Cat.prototype.eat = function() {
  console.log("吃老鼠");
};

var cat1 = new Cat("大明", "黄色");

🦋1.3 特点：

通过 new 关键字实例化对象
属性和方法可定义在构造函数或原型上
原型链实现继承

🔎2.ES6 类

🦋2.1 基本语法

typescript 复制代码

class Cat2 {
  name: string;   // TypeScript 类型声明
  color: string;

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

  eat() {
    console.log("吃老鼠");
  }

  sayName(): string {
    return `My name is ${this.name}`;
  }
}

const cat3 = new Cat2("小小明", "黑色");

🦋2.2 特点：

class 为语法糖，本质仍为原型链
方法无需 function 关键字
方法间无需逗号分隔

🔎3.继承

🦋3.1 基类与派生类

typescript 复制代码

class Animal {
  name: string;

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

  eat(): string {
    return "吃骨头";
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name); // 必须调用父类构造函数
  }

  sayHi(): string {
    return `${this.name}, ${this.eat()}`;
  }
}

const d = new Dog('Tom');
console.log(d.sayHi()); // "Tom, 吃骨头"

🦋3.2 关键点：

extends 实现继承
super() 必须在使用 this 前调用

🔎4.访问修饰符（TypeScript 特性）

修饰符	访问范围
`public`	默认，任意位置可访问
`private`	仅类内部可访问
`protected`	类内部及子类可访问

🦋4.1 示例：

typescript 复制代码

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

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

🔎5.类类型约束

typescript 复制代码

class Animal5 {
  name: string;

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

  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

let s4: Animal5 = new Animal5('Jack');
console.log(s4.sayHi());

🔎6.类实现接口

🦋6.1 单接口实现

typescript 复制代码

interface Animal6 {
  name: string;
  action(): string;
}

class Dog2 implements Animal6 {
  name: string;

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

  action(): string {
    return '摇尾巴';
  }
}

🦋6.2 多接口实现

typescript 复制代码

interface Alarm {
  alert(): void;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car implements Alarm, Light {
  alert() {
    console.log('警报声');
  }

  lightOn() {
    console.log('开灯');
  }

  lightOff() {
    console.log('关灯');
  }
}

🦋6.3 接口优势：

实现多态性
允许多个不同类共享相同行为
典型场景：门 类与 车 类都可实现 报警 接口

🔎7.传统方式 vs ES6 类

特性	传统方式	ES6 Class
构造函数	`function` 函数	`constructor` 方法
方法定义	需通过原型添加	类内直接定义
继承	手动操作原型链	`extends` 关键字
代码可读性	较低	接近传统 OOP 语法

🔎8.常见注意事项

类方法中的 this 指向实例对象
TypeScript 类型声明需显式标注
实现接口时必须实现全部成员
private/protected 为 TypeScript 特性
类不可继承多个父类（可通过接口实现多特性）