TypeScript学习4-类

meislzhua 发布于2019-08-26 18:37 / 2230人阅读

摘要：再拿动物来说，鸟类是动物的一种，它不光继承了动物的特性，它还有自己的专属特性它有翅膀，它能飞。常见多态有覆盖重载两类。抽象类抽象方法抽象类不能实例化，抽象方法不能实现，需要在子类中实现。抽象类实现子类继承了父类的类，是相对的。

类-面向对象的基础

面向对象编程，应该是目前使用最广泛的编程模式。

JavaScript是基于原型的语言，自从广泛使用之后，面向对象的改造一直没停过，不少第三方库都使用原型实现了JavaScript下面的类，如：MooTools，Backbone。再到ES6标准，直接原生支持了类定义，不过只能算语法糖级的支持。

TypeScript对面向对象支持的更彻底，非常接近Java、C#语言，支持接口、类、抽象、继承、可见性等面向对象特性。

面向对象三大特征 抽象

即同一类事物，我们可以把它抽象成一个描述，就是类。对外，我们看到的就是这个类描述，它有什么属性，它能干嘛，取决于它对外公开的属性和方法。它的内部如何运作，我们无需关注。

比如我们要用面向对象语言描述动物：动物有一个名字，动物能移动。它怎么做到移动呢，外部是不用关心的。

继承

如果抽象是基础，那么继承就是面向对象的高峰。抽象给了编程语言描述世界的画笔，那么继承就给了它色彩。

继承类拥有父类公开的、保护的属性和方法，同时还可以添加自己的属性和方法。

一般分为实现继承、接口继承。

再拿动物来说，鸟类是动物的一种，它不光继承了动物的特性，它还有自己的专属特性：它有翅膀，它能飞。

多态

多态简单来说，就是同一个类的对象，表现出不同的特性，是继承延伸出来的表现结果。

常见多态有覆盖、重载两类。

TypeScript中的类方法不支持真正意义上的重载，可以通过增加可选参数来达到重载的目的。  
具体的原因，是因为重载在编译之后，是以多个不同名的函数存在的，调用哪个也是编译的时候确定的。而TypeScript需要支持JavaScript来调用它，JavaScript不知道编译之后的函数名。  
后面会拿一篇文章来分析。

还是拿动物为例，继承并覆盖move方法之后，鸟类实现了飞、鱼类实现了游。

TypeScript中类使用的常见场景

使用TypeScript描述类。

// 知识点：抽象类
abstract class Animal {
    // 知识点：私有成员
    private _name: string;

    // 知识点：存取器
    get name(): string {
      return this._name;
    }
  
    constructor(name: string) {
      this._name = name;
    }
  
    // 知识点：抽象方法
    abstract move(distance: number): void;
}

描述子类

// 知识点：实现抽象类的子类
class Bird extends Animal {
  // 知识点：只读成员
  // 知识点：静态成员
  static readonly classification = "bird";
  
  // 知识点：super()
  constructor(name: string) {
      super(name);
  }
  
  // 知识点：抽象方法实现
  move(distance: number): void {
      console.log(`moved ${distance}.`)
  }
}

const enum MoveMode {
  WALK,
  FLY
}

// 知识点：子类
class Owl extends Bird {

  private _mode: MoveMode;
  
  get mode(): MoveMode {
      console.log("read move mode.");
      return this._mode;
  }
  
  set mode(mode: MoveMode) {
      console.log("changed move mode.");
      this._mode = mode;
  }
  
  // 知识点：super()
  constructor(name: string) {
      super(name);
      this._mode = MoveMode.FLY;
  }
  
  // 知识点：方法覆盖
  move(distance: number): void {
    switch (this._mode) {
      case MoveMode.FLY:
          console.log(`fly ${distance}.`);
          break;
      case MoveMode.WALK:
          console.log(`walked ${distance}.`);
          break;
      default:;
    }
  }

}

类相关的知识点总结

从上述示例中，整理出以下知识点，请结合示例回顾，加强一下理解。

抽象类、抽象方法

抽象类不能实例化，抽象方法不能实现，需要在子类中实现。

抽象类实现

子类

继承了父类的类，是相对的。

类成员可见性

public，公开，默认的可见性

protected，保护，子类可见

private，私有，本类可见

静态成员

静态成员属于类

只读成员

只读，即初始化后不可修改，只能在声明和构造函数里初始化。

类成员存取器

可以像成员一样来访问，一般用来做一些处理，比如校验，格式化等。

类方法覆盖

覆盖父类方法，实现自己的特性。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110301.html

TypeScript入门学习之路

摘要：学习之路学习之路安装环境起步开发工具自动编译文件中的数据类型中的函数中类的定义继承中的继承中的继承类的静态属性和静态方法类的多态的抽象类中的接口中的泛型学习之路安装环境查看版本起步新建通过命令编译此时路径下 ...

jemygraw 2021-11-22 09:34 评论0 收藏0
深入学习TypeScript

摘要：是的超级，遵循最新的规范相当于包含了的语法。表示方法没有返回任何类型类型表示的是那些永不存在的值的类型，例如异常错误写法错误三函数内容概述函数的定义可选参数默认参数剩余参数函数重载箭头函数。一、Typescript 介绍、环境搭建 1.1 Typescript 介绍 1.TypeScript 是由微软开发的一款开源的编程语言，像后端 java、C#这样的面向对象语言可以让 js 开发...

赵连江 2019-08-23 11:39 评论0 收藏0
从项目中由浅入深的学习typescript (3)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习前言为什么会有大家有没想过这个问题原因是是弱类型编程语言也就是申明变量类型可以任意变换。是的超集，也相当于预处理器本文通过一个项目来让你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章从项目中由浅入深的学习vue,微信小程序...

ninefive 2019-08-23 16:59 评论0 收藏0
TypeScript VS JavaScript 深度对比

摘要：是事件驱动的，只根据用户的操作做出相应的反应处理。中的数据要求带有明确的类型，不要求。这些小小的变化可能会产生严重的意想不到的后果，因此有必要撤销这些变化。的优势相比于，也有一些明显优势。因此在应对大型开发项目时，使用更加合适。 showImg(https://segmentfault.com/img/bV1Dx7?w=740&h=322); TypeScript 和 JavaScri...

William_Sang 2019-08-21 18:43 评论0 收藏0
如何从JavaScript跨越到TypeScript [基础进阶知识点]

摘要：接口前端程序员很难理解的点也是一门面向对象的语言，但是中它是基于原型实现的，中使用了类，这样会更清晰的体会到面向对象这一说法，但是实际在中的面向对象更加完整，它跟这些语言一样，通过接口和类去完整的面向对象编程。从入门到放弃的java 初中时自学过JAVA，学了大概一个多月吧，学了一个多月，看视频这些，后面放弃了编程。依稀记得，那段日子极度苦逼，我想如果当时是学javaScrip...

wangym 2019-08-23 16:10 评论0 收藏0