TypeScript學習4-類

meislzhua 發布于2019-08-26 18:37 / 2245人閱讀

摘要：再拿動物來說，鳥類是動物的一種，它不光繼承了動物的特性，它還有自己的專屬特性它有翅膀，它能飛。常見多態有覆蓋重載兩類。抽象類抽象方法抽象類不能實例化，抽象方法不能實現，需要在子類中實現。抽象類實現子類繼承了父類的類，是相對的。

類-面向對象的基礎

面向對象編程，應該是目前使用最廣泛的編程模式。

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，私有，本類可見

靜態成員

靜態成員屬于類

只讀成員

只讀，即初始化后不可修改，只能在聲明和構造函數里初始化。

類成員存取器

可以像成員一樣來訪問，一般用來做一些處理，比如校驗，格式化等。

類方法覆蓋

覆蓋父類方法，實現自己的特性。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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