2. 程式人生 > >typescript學習筆記（4）- 類型別

typescript學習筆記（4）- 類型別

阿新 • • 發佈：2019-01-04

看了訊息知道，vue的作者尤大大，再從寫vue.js，感覺typescript是未來的趨勢啊，所以趁著週末來學習一下，對於我一個從來沒有接觸過java的前端小菜雞來說，加入了型別定義，還真有點不適應啊，

今天學習了一下typescript的類型別，特地來總結一下，免得忘記了，如果總結的不好，請各位大佬指教批評，歡迎留言

在這裡附上 學習連結

https://www.cnblogs.com/tansm/p/TypeScript_Handbook_Classes.html
文章轉載自：https://github.com/zhongsp

當然我用的編輯器是vscode，我懶得配置了，直接全域性安裝了typescript

npm install -g typescript

然後就可以使用 tsc 去編譯 .ts 檔案了，就會生成對應的 .js 檔案

好，廢話少說，上例子吧
在原生javascript中一開始是沒有類這個概念的，但是在es6呢引入了class這個概念，做了很大的改進

之前寫物件都是使用以下方式

function People(name){
	this.name = name
}

出來es6的時候引入了class這個概念

class People{
	constructor(name){
		this.name = name
	}
}

在typescript中更像後臺語言了

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

var greeter = new Greeter("world");

執行tsc 編譯過後如下：

/**
 * 傳統的JavaScript程式使用函式和基於原型的繼承來建立可重用的元件，
 * 但這對於熟悉使用面向物件方式的程式設計師來說有些棘手，
 * 因為他們用的是基於類的繼承並且物件是從類構建出來的。
 * 從ECMAScript 2015，也就是ECMAScript 6，
 * JavaScript程式將可以使用這種基於類的面向物件方法。
 * 在TypeScript裡，我們允許開發者現在就使用這些特性，
 * 並且編譯後的JavaScript可以在所有主流瀏覽器和平臺上執行，
 * 而不需要等到下個JavaScript版本。
 */
var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter("world");

解析：
greeting就是類Greeter的一個屬性，通過建構函式constructor()函式，一個方法greet()，通過this物件去訪問類的greeting屬性

繼承

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

解析：
這個例子展現了繼承的本質，我們使用extends去繼承Animal這個基類，通過呼叫super()這個超級父類函式,訪問基類的屬性，
Snake類和Horse類都建立了move方法，重寫了從Animal繼承來的move方法，使得move方法根據不同的類而具有不同的功能。 注意，即使tom被宣告為Animal型別，因為它的值是Horse，tom.move(34)呼叫Horse裡的重寫方法：

包含constructor函式的派生類必須呼叫super()，它會執行基類的構造方法

編譯完之後的.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Animal = /** @class */ (function () {
    function Animal(theName) {
        this.name = theName;
    }
    Animal.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 0; }
        console.log(this.name + " moved " + distanceInMeters + "m.");
    };
    return Animal;
}());
var Snake = /** @class */ (function (_super) {
    __extends(Snake, _super);
    function Snake(name) {
        return _super.call(this, name) || this;
    }
    Snake.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 5; }
        console.log("Slithering...");
        _super.prototype.move.call(this, distanceInMeters);
    };
    return Snake;
}(Animal));
var Horse = /** @class */ (function (_super) {
    __extends(Horse, _super);
    function Horse(name) {
        return _super.call(this, name) || this;
    }
    Horse.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 45; }
        console.log("Galloping...");
        _super.prototype.move.call(this, distanceInMeters);
    };
    return Horse;
}(Animal));
var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);

公共，私有與受保護的修飾符

預設為公有

在typescript中，預設是公有屬性

class Animal {
    public name:string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

什麼是公有屬性呢？
按照我的理解就是例項化類是可以訪問到這個類的屬性和方法的
比如：

var animal = new Animal("big");
console.log(animal.name)
console.log(animal.move(10))

理解private

見名知意就是私有屬性的意思，
就是說只有在類中才能訪問的屬性，例項化物件是訪問不了這個屬性的，要訪問的話，只能通過間接訪問的方式去實現

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // Error: 'name' is private;

【圖片一張】

TypeScript使用的是結構性型別系統。 當我們比較兩種不同的型別時，並不在乎它們從哪兒來的，如果所有成員的型別都是相容的，我們就認為它們的型別是相容的。

然而，當我們比較帶有private或protected成員的型別的時候，情況就不同了。 如果其中一個型別裡包含一個private成員，那麼只有當另外一個型別中也存在這樣一個private成員， 並且它們是來自同一處宣告時，我們才認為這兩個型別是相容的。 對於protected成員也使用這個規則。

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

class Rhino extends Animal {
    constructor() { super("Rhino"); }
}

class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; } 
}

var animal = new Animal("Goat");
var rhino = new Rhino();
var employee = new Employee("Bob");

animal = rhino;
animal = employee; // Error: Animal and Employee are not compatible

【圖片一張】
不同型別的類不能相互賦值

這個例子中有Animal和Rhino兩個類，Rhino是Animal類的子類。
還有一個Employee類，其型別看上去與Animal是相同的。 
我們建立了幾個這些類的例項，並相互賦值來看看會發生什麼。
因為Animal和Rhino共享了來自Animal裡的私有成員定義private name: string，
因此它們是相容的。 然而Employee卻不是這樣。
當把Employee賦值給Animal的時候，得到一個錯誤，說它們的型別不相容。 
儘管Employee裡也有一個私有成員name，但它明顯不是Animal裡面定義的那個。

理解protected

protected成員在派生類中仍然可以訪問

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

class Employee extends Person {
    private department: string;

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

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

var howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

【圖片一張】

引數屬性

class Animal {
    constructor(private name: string) { }
    move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

注意看我們是如何捨棄了theName，僅在建構函式裡使用private name: string引數來建立和初始化name成員。 我們把宣告和賦值合併至一處。

引數屬性通過給建構函式引數新增一個訪問限定符來宣告。 使用private限定一個引數屬性會宣告並初始化一個私有成員；對於public和protected來說也是一樣。

tsc 編譯完成之後如下：

var Animal_3 = /** @class */ (function () {
    function Animal_3(name) {
        this.name = name;
    }
    Animal_3.prototype.move = function (distanceInMeters) {
        console.log(this.name + " moved " + distanceInMeters + "m.");
        return true;
    };
    return Animal_3;
}());
console.log((new Animal_3("Ken")).move(10));

存取器

TypeScript支援getters/setters來擷取對物件成員的訪問。 它能幫助你有效的控制對物件成員的訪問。

下面來看如何把一類改寫成使用get和set。 首先是一個沒用使用存取器的例子。

class Employee_ {
  fullName: string;
}

var employee_ = new Employee_();
employee_.fullName = "Bob Smith";
if (employee_.fullName) {
  console.log(employee_.fullName);
}

編譯完成之後

var Employee_ = /** @class */ (function () {
    function Employee_() {
    }
    return Employee_;
}());
var employee_ = new Employee_();
employee_.fullName = "Bob Smith";
if (employee_.fullName) {
    console.log(employee_.fullName);
}

我們可以隨意的設定fullName，這是非常方便的，但是這也可能會帶來麻煩。
下面這個版本里，我們先檢查使用者密碼是否正確，然後再允許其修改employee。 我們把對fullName的直接訪問改成了可以檢查密碼的set方法。 我們也加了一個get方法，讓上面的例子仍然可以工作。

var passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

編譯之後：

// 檢查密碼
var passcode = "secret passcode";
var Employee_4 = /** @class */ (function () {
    function Employee_4() {
    }
    Object.defineProperty(Employee_4.prototype, "fullName", {
        get: function () {
            return this._fullName;
        },
        set: function (newName) {
            if (passcode && passcode == "secret passcode") {
                this._fullName = newName;
            }
            else {
                console.log("Error: Unauthorized update of employee!");
            }
        },
        enumerable: true,
        configurable: true
    });
    return Employee_4;
}());
var employee_4 = new Employee_4();
employee_4.fullName = "Bob Smith";
if (employee_4.fullName) {
    alert(employee_4.fullName);
}

靜態屬性

我們只討論了類的例項成員，那些僅當類被例項化的時候才會被初始化的屬性。 我們也可以建立類的靜態成員，這些屬性存在於類本身上面而不是類的例項上。 在這個例子裡，我們使用static定義origin，因為它是所有網格都會用到的屬性。 每個例項想要訪問這個屬性的時候，都要在origin前面加上類名。 如同在例項屬性上使用this.字首來訪問屬性一樣，這裡我們使用Grid.來訪問靜態屬性。

class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        var xDist = (point.x - Grid.origin.x);
        var yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

var grid1 = new Grid(1.0);  // 1x scale
var grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

編譯完：

var Grid = /** @class */ (function () {
    function Grid(scale) {
        this.scale = scale;
    }
    Grid.prototype.calculateDistanceFromOrigin = function (point) {
        var xDist = (point.x - Grid.origin.x);
        var yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    };
    Grid.origin = { x: 0, y: 0 };
    return Grid;
}());
var grid1 = new Grid(1.0); // 1x scale
var grid2 = new Grid(5.0); // 5x scale
console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));

抽象類

抽象類是供其它類繼承的基類。 他們一般不會直接被例項化。 不同於介面，抽象類可以包含成員的實現細節。 abstract關鍵字是用於定義抽象類和在抽象類內部定義抽象方法。

abstract class Department {

    constructor(public name: string) {
    }

    printName(): void {
        console.log('Department name: ' + this.name);
    }

    abstract printMeeting(): void; // 必須在派生類中實現
}

class AccountingDepartment extends Department {

    constructor() {
        super('Accounting and Auditing'); // constructors in derived classes must call super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}

let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
department.generateReports(); // error: method doesn't exist on declared abstract type

在這裡插入圖片描述

高階技巧

建構函式

當你在TypeScript裡定義類的時候，實際上同時定義了很多東西。 首先是類的例項的型別。

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

var greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

把類當做介面使用

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

var point3d: Point3d = {x: 1, y: 2, z: 3};

編譯完：

var Point = /** @class */ (function () {
    function Point() {
    }
    return Point;
}());
var point3d = { x: 1, y: 2, z: 3 };

在這裡插入圖片描述

相關推薦

typescript學習筆記（4）- 類型別

看了訊息知道，vue的作者尤大大，再從寫vue.js，感覺typescript是未來的趨勢啊，所以趁著週末來學習一下，對於我一個從來沒有接觸過java的前端小菜雞來說，加入了型別定義，還真有點不適應啊， 今天學習了一下typescript的類型別，特地來總結一下，免得忘記了，如果總結

【Java】「深入理解Java虛擬機」學習筆記（4）- 類文件結構

jruby idt this 原因 cal constant borde ESS groov 　　我為什麽喜歡Java，另重要原因就是跨平臺，就是WORA。 　　程序員是爽了，但肯定有人要為你遮風擋雨，解決WORA的基石就是字節碼+虛擬機。 ?Tip 　　Java生

Typescript學習筆記（一）基礎型別

為了面向ng2和前端未來，開始搞向ts，ts是微軟出的一枚語言，作為es6的超集，他出的一些特性還是蠻好用的(略坑)。對於我等純前端(從開始就接觸javascript)的人來說，真想說，這特麼什麼鬼。部分特性同es6（個人對es6還是蠻有好感的）。ts同期的coffeescript，將js pyth

Typescript學習筆記（三）——資料型別

1. Boolean型別：:boolean let isTrue: boolean = true; 2. 數值型別:number，支援十進位制、八進位制、二進位制、十六進位制 let data1:number = 8;//十進位制 let data2:number

C語言學習筆記（4）—— 數據類型的使用

循環小數 強制類型轉換 進行 代碼 size 圖片 unsigned 問題 d+ 　在程序設計語言裏，我們會把數據分為各種各樣的類型，為什麽會有數據類型之分呢?計算機中，所有的數據都會表示成二進制數的形式，對於同樣的一個二進制數，數據類型不同，它表示的數據就是不同的。也就是

MySQL學習筆記（4）-- jdbc異常處理和工具類抽取

一：異常處理 在前面的學習中，所有的異常全部都是使用throws方法解決的，現在嘗試將異常在程式內部進行處理。 為什麼要在程式內部處理異常？ 因為採用throws方法，一旦產生異常，程式會停止執行，並將異常丟擲，但是此時程式內的資源並沒有釋放出來，而Con

Javascript高階程式設計學習筆記（15）—— 引用型別（4）RegExp型別

JS中處理字串最常用的應該就是正則了 同樣正則（RegExp）型別也是JS中引用型別的一種 ECMAScript通過 RegExp型別 來支援正則表示式   建立正則 var expression = / pattern / flags; 在上面建立正則例項中 pattern

Javascript高階程式設計學習筆記（17）—— 引用型別（6）基本包裝類

基本包裝類 基本包裝類這個概念或許有的小夥伴沒有聽說過 但是小夥伴們有沒有想過，為什麼基本資料型別的例項也有方法呢？ 其實這些方法都來自基本包裝型別 這是JS為了方便操作基礎資料型別而建立的特殊引用型別   基本包裝類有三種 1. Boolean型別 2. Number型別 3.

OpenCV 2.4.9 學習筆記（4）—— 畫素型別與Templates的限制使用

限制使用templates 　　C++中的Templates使得介面機制非常好用，高效而且能夠保證資料與演算法的安全。但是過多地使用templates可能會增加計算時間和程式碼長度，有時候還能難區分介面和實現。在OpenCV中過多使用templates並不是一件好事，OpenCV的refman中提到Open

Typescript學習筆記（四）class 類

typescript的類，與c#，java等語言的類類似。也是包含了一大部分的es6的實現。我會用最通俗的語言講一下對coding有用的地方。 class Greeter { greeting: string; constructor(message: string) {

《Python學習手冊》學習筆記（4）之第4章介紹Python物件型別（關鍵詞：程式語言/Python）

第4章 介紹Python物件型別 寫在開頭的讀者筆記 值得一讀的小節 1.“為什麼使用內建型別” - “Python的核心資料型別”，主要學到了： Python是強型別語言，你只能對一個物件進行適合該型別的有效操作。 一旦建立了一個物件，它就和

TypeScript學習筆記（四）——物件、陣列、函式型別

一、物件型別 1. 使用介面定義物件型別：介面類似java中的介面，可用於對類的一部分進行抽象以及對物件形狀的描述。 物件定義的變數應與介面數量相同。不可多不可少。 interface Animal { land: boolean; sound: string;

Swift學習筆記（4）：字符串

min mes 不同的 常用方法 dice 內存空間 全部 there logs 目錄： 初始化 常用方法或屬性 字符串索引 初始化 創建一個空字符串作為初始值: var emptyString = "" // 空字

oracle學習筆記（4）

linux系統 sta sys 配置 默認 搜索 密碼 多用戶 登錄 4.oracle數據庫的啟動流程 　　windows操作系統 　　　　啟動監聽: lsnrctl start; 　　　　啟動數據庫實例:oradim-startup-sid 實例名 　　linux系統

TypeScript學習筆記（九）：裝飾器（Decorators）

標註 時裝 als cal () 操作 enume 筆記 文檔 裝飾器簡介 裝飾器（Decorators）為我們在類的聲明及成員上通過元編程語法添加標註提供了一種方式。 需要註意的是：裝飾器是一項實驗性特性，在未來的版本中可能會發生改變。 若要啟用實驗性的裝飾器特性

AngularJs學習筆記（4）——自定義指令

ref 告訴 ack 生命周期 .com bsp ctrl 參數變量 ng- 對指令的第一印象：它是一個自定義標簽！ 先來看一個簡單的指令： <!doctype html> <html ng-app="myApp"> <head>

ASP.NET學習筆記（4）——上傳圖片

bmi guid ted 介紹 dir filename content put ima 說明（2017-10-8 23:03:43）： 1. 後面的內容都是一些雜七雜八的，零零碎碎的，之前都直接略過了，不過其實還是挺重要的，這次重新學習要認認真真敲一遍。 2. 明天中午9

Scala語言學習筆記（4）

method point 強制轉換 參數 logs https fun 強制 n) 高階函數 // 高階函數 map val salaries = Seq(20000, 70000, 40000) val doubleSalary = (x: Int) => x *

寒假學習筆記（4）

靜態成員 限定 計劃 執行 構造函數 數據 mark 不能 類定義 2018.2.11 類中的常成員 關鍵字const，在類定義中聲明數據成員使用關鍵字限定，聲明時不能初始化。 初始化列表，類中的任何函數都不能對常數據成員賦值，包括構造函數。為構造函數添加初始化列表是對常

shell學習筆記（4）

shell 基礎 筆記 雜記一、 1、利用系統函數模擬實現系統腳本啟動特殊顏色效果 1.1 查看系統函數庫 [root@master4 ~]# ll /etc/init.d/functions -rw-r--r--. 1 root root 13948 Sep 16 2015 /etc/init.d/f