typescript-學習使用ts-2

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/19/12215471.html

解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...


解構賦值

數組解構

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

上面的寫法等價於:

first = input[0];
second = input[1];

利用解構賦值交換變數:

[first, second] = [second, first];

函數參數解構:

function f ([first, second]: [number, number]) [
  console.log(first)
  console.log(second)
]

f(1, 2)

解構剩餘參數:

let [first, ...rest] = [1, 2, 3, 4]
console.log(first) // 1
console.log(rest) // [2, 3, 4]

也可以忽略其它參數:

let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

或者跳過解構:

let [, second, , fourth] = [1, 2, 3, 4]

對象解構

示例一:

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

就像數組解構,你可以用沒有聲明的賦值:

let a: number,
  b: number;

({a, b} = {a: 123, b: 456})

console.log(a, b) // 123 456

你可以在對象里使用 ... 語法創建剩餘變數:

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

屬性解構重命名

你也可以給屬性以不同的名字:

let { a: newName1, b: newName2 } = o;

註意,這裡的冒號不是指示類型的。 如果你想指定它的類型, 仍然需要在其後寫上完整的模式。

let {a, b}: {a: string, b: number} = o;

預設值

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

展開操作符

  • 展開數組
  • 展開對象
    • 不會展開方法

解構賦值用於函數聲明

type C = {a: string, b?: number}

function f ({a, b}: C): void {
  // ...
}

解構賦值用於載入指定模塊成員

基本示例

class Person {
    name: string;
    age: number;

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

    sayHello() {
        console.log(this.name);
    }
}

let zs: Person = new Person('張三', 18);

構造函數

繼承

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

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

這個例子展示了最基本的繼承:類從基類中繼承了屬性和方法。 這裡, Dog是一個 派生類,它派生自 Animal 基類,通過 extends關鍵字。 派生類通常被稱作 子類,基類通常被稱作 超類

因為 Dog繼承了 Animal的功能,因此我們可以創建一個 Dog的實例,它能夠 bark()move()

下麵是一個更複雜的例子:

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);
    }
}

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

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

與前一個例子的不同點是,派生類包含了一個構造函數,它 必須調用 super(),它會執行基類的構造函數。 而且,在構造函數里訪問 this的屬性之前,我們 一定要調用 super()。 這個是TypeScript強制執行的一條重要規則。

這個例子演示瞭如何在子類里可以重寫父類的方法。 Snake類和 Horse類都創建了 move方法,它們重寫了從Animal繼承來的 move方法,使得 move方法根據不同的類而具有不同的功能。 註意,即使 tom被聲明為Animal類型,但因為它的值是 Horse,調用 tom.move(34)時,它會調用 Horse里重寫的方法:

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.

實例成員訪問修飾符

public 開放的

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

private 私有的

  • 不能被外部訪問,只能在類的內部訪問使用
  • 私有成員不會被繼承
class Person {
  public name: string;
  public age: number = 18;
  private type: string = 'human'
  public constructor (name, age) {
    this.name = name
    this.age = age
  }
}

protected 受保護的

  • private 類似,但是可以被繼承
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}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 錯誤

註意,我們不能在 Person類外使用 name,但是我們仍然可以通過 Employee類的實例方法訪問,因為Employee是由 Person派生而來的。

readonly 只讀的

在參數中使用修飾符

在上面的例子中,我們不得不定義一個受保護的成員 name和一個構造函數參數 theNamePerson類里,並且立刻給 nametheName賦值。 這種情況經常會遇到。 參數屬性可以方便地讓我們在一個地方定義並初始化一個成員。

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

可以簡寫為:

class Person {
    constructor(public name: string, public age: number) {
    }
}

屬性的存(get)取(set)器

let passcode = "secret passcode";

class Employee {
    // 私有成員,外部無法訪問
    private _fullName: string;

    // 當訪問 實例.fullName 的時候會調用 get 方法
    get fullName(): string {
        return this._fullName;
    }

    // 當對 實例.fullName = xxx 賦值的時候會調用 set 方法
    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

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

靜態成員

  • 不需要實例化訪問的成員稱之為靜態成員,即只能被類訪問的成員
  • static 關鍵字
class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

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

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

您的分享是我們最大的動力!

更多相關文章
  • 1. 欄位查詢 通過模型類.objects屬性可以調用如下函數,實現對模型類對應的數據表的查詢。 函數名 功能 返回值 說明 get 返回表中滿足條件的一條且只能有一條數據。 返回值是一個模型類對象。 參數中寫查詢條件。 1)如果查到多條數據,則拋異常MultipleObjectsReturned。 ...
  • 寫在前面 首先,祝大家新年快樂,在國人的情結里,現在才是真正的年底,估計現在好多朋友已經陸續回家過節去了,祝回家的路順風。過年回去就好好陪伴家人,不要看一些毒瘤號寫的,過年時間彎道超越別人,趁著假期學習什麼各種新知識,這完全瞎扯,這一年的時間該努力,努力了,吃苦也吃了,春節就好好陪伴家人吃喝玩樂。 ...
  • Python的駐留機制及為在同一運行空間內,當兩變數的值相同,則地址也相同。 舉例: 以上示例為駐留機制有效的情況下的記憶體地址。 以下為加入非數字、字母、下劃線內容的駐留機制驗證,結果為無效 ...
  • 在經常性讀取大量的數值文件時(比如深度學習訓練數據),可以考慮現將數據存儲為Numpy格式,然後直接使用Numpy去讀取,速度相比為轉化前快很多. 下麵就常用的保存數據到二進位文件和保存數據到文本文件進行介紹: 1.保存為二進位文件(.npy/.npz) numpy.save 保存一個數組到一個二進 ...
  • list list(列表)是Python內置的一種數據類型,它是一種有序、可變的集合,可以隨時添加和刪除其中的元素。 變數classmates就是一個list。關於list的操作如下: 方法 len():獲取list元素的個數 通過索引訪問 append:向list末尾追加元素 insert:把元素 ...
  • @ "TOC" JDK1.7:數組+鏈表 JDK1.8:數組+鏈表+紅黑樹 前五個問題環境用的是是JDK1.7,後面全部是1.8 1、Hash的計算規則? 簡單的說是個“擾動函數”,目的是為了使散列分佈的更加均勻。 具體演算法是用key的Hashcode值右移16位,將hashcode高位和低位的值進 ...
  •   Spark Streaming對實時數據流進行分析處理,源源不斷的從數據源接收數據切割成一個個時間間隔進行處理;    流處理與批處理有明顯區別,批處理中的數據有明顯的邊界、數據規模已知;而流處理數據流並沒有邊界,也未知數據規模;    ...
  • 函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷(Type Inference) 類型相容性 模塊 概念 模塊通信: ...
一周排行
  • Consul是HashiCorp公司推出的開源工具,Consul由Go語言開發,部署起來非常容易,只需要極少的可執行程式和配置文件,具有綠色、輕量級的特點。Consul是`分散式`的、`高可用`的、 `可橫向擴展`的用於實現分散式系統的服務發現與配置。 ...
  • Blazor的哪個特點, 可以讓程式員快速完成任務? 這隨筆講解的是使用代碼上下文來節約代碼, 讓驗證碼機制變得更加簡易. ...
  • 在C#中,struct和class都是用戶定義的數據類型,struct和class有許多不同之處,但主要的區別是: Class是引用類型,它保存在堆上並且能夠被垃圾回收;然而stuct是值類型,它保存在棧上或者內嵌在它的包含類型之中。因此,從總體上來說struct比class節省記憶體。 下圖是Cla ...
  • 這篇文章,我將帶領大家學習ASP.NET Core中的launchSettings.json文件。為了學習它,我們打開之前建的空白模板的ASP.NET Core項目。 從上面的圖片中你可以看到,我們項目的屬性中有一個launchSettings.json文件。那麼我們來一起學習這個重要的文件吧。la... ...
  • [TOC] 都是迭代,為啥我一定要用foreach ​ 問題起源於本人的一個練手的撲克牌程式:洗完牌之後要發給場上的三人。 ​ 只發給單個人的時候用 foreach 迴圈一下就好了,但三個人就有點麻煩了。 ​ 牌組用list保存你可能會想到這樣寫: 對於字典,可以使用 : 可能各位早會這樣弄了,讓各 ...
  • 首先以Winform項目開發舉例 1.完整的學習計劃 2.對於學習內容分類 3.良好的學習習慣 4.項目實踐 學習計劃 1.基礎篇 2.提高篇 3.應用篇 內容分類 1.語法 2.控制項 3.業務邏輯 學習習慣 1.時間安排 2.進度安排 3.記錄筆記 4.練習寫代碼 項目實踐 1.實現頁面展示 2. ...
  • 在進行 Asp.NetCore.MVC 文件上傳時,後臺無法正常讀取文件流保存,出現:Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead. 查找資料,發現需要 ...
  • 在這篇文章中,我將詳細介紹在ASP.NET Core中使用appsettings.json文件的重要性。這篇文章,我將詳細介紹下麵幾個問題:在ASP.NET Core應用程式中,有哪些不同的配置資源可用呢?什麼是ASP.NET Core appsetting.json文件?在ASP.NET Core ...
  • 這篇文章中,我將帶領大家一起詳細學習:ASP.NET Core Middleware Components.這篇文章中,我將詳細討論下麵幾個問題:什麼是ASP.NET Core 中的中間件組件?ASP.NET Core應用程式中,在哪裡來使用中間件組件?怎樣來配置ASP.NET Core 應用程式中... ...
  • 參考 ABP設計UI菜單欄的源碼分析,抽出了ABP這塊自定義擴展的實現。在ABP的源碼裡面有很多地方都用到了這種設計方式,實現了用戶自定義擴展。 新建一個空的asp.net core項目,新建一個類,源碼: StartUp類源碼: 擴展點:在 中提供用戶自定義擴展點,完美的是下瞭解耦。 參考: "B ...