TypeScript 学习实战-Class类

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

前言

现在 TypeScript + Vue3 应用特别广了, 如果不学习总感觉跟不上大厂的步伐了. 学习 TypeScript(虽然觉得也是可选的,但还是要学,真卷...) 这里记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

回顾上一篇: 学习了 TS 的枚举类型/ 枚举类型概念及分类/ 数字枚举 举例以及枚举类型的使用方法.

本文来学习 TS 中应用还是比较多的 Class 类

1. Typescript 文档

Typescript 官网地址: typescriptlang.org/zh/

Typescript 中文文档--类：class-类

TypeScript 类

在 ECMAScript 6 之后 JavaScript 加入了 class 关键字, 我们就能够使用基于类的面向对象的方式. 本质依然是构造函数, 类是用于创建对象的模板, 可以比较舒服地使用 class。

使用 类

先看下在 JavaScript 中 使用类

function Point(x, y) {
  this.x = x
  this.y = y
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')'
}

var p = new Point(1, 2)

TypeScript 使用类

先来看一下简单使用类的例子：

class Greeter {
  greeting: string
  constructor(message: string) {
    this.greeting = message
  }
  greet() {
    return 'Hello, ' + this.greeting
  }
}

let greeter = new Greeter('world')

如上代码: 声明一个 Greeter 类。这个类有 3 个成员：一个叫做 greeting 的属性，一个构造函数和一个 greet方法。

在引用任何一个类成员的时候都用了 this。 它表示我们访问的是类的成员。

最后一行，通过使用 new 关键字构造了 Greeter 类的一个实例。 它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

TypeScript 类特有的点

TypeScript 类特有的知识点，包括三个访问限定符 public、protected、private，抽象类

Vue3 学习实战系列更文:

1. Vue3 源码学习-工具函数 utils(二)
2. Vue3-初体验,
3. Vue3-生命周期 和 setup()函数,
4. Vue3-computed & watch,
5. Vue3-Teleport 改变组件挂载的根节点,
6. Vue3-Suspense 处理异步请求,
7. Vue3-defAsyncComponent 异步组件(新增),
8. Vue3-fragments (新增),
9. Vue3-v-model (非兼容),

• Vue3 源码仓库 vue-next : github.com/vuejs/vue-n…
• Vue3.x 官方中文文档: v3.cn.vuejs.org

2. TypeScript 系列:

   • TypeScript 初识-进入 TS 类型约束的世界
   • TS 原始类型
   • TypeScript 其他类型TypeScript 学习实战-5-其他枚举类型
   • TS 学习实战-枚举类型(一)
   • TypeScript 学习实战-5-其他枚举类型
   • TS 学习实战-interface