typescript-學習使用ts-2

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

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


解構賦值

數組解構

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和一個構造函數參數 theName在 Person類里，並且立刻給 name和 theName賦值。 這種情況經常會遇到。 參數屬性可以方便地讓我們在一個地方定義並初始化一個成員。

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

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

-Advertisement-
Play Games
更多相關文章
  • Django框架(六)：模型(二) 欄位查詢、查詢集
    1. 欄位查詢 通過模型類.objects屬性可以調用如下函數，實現對模型類對應的數據表的查詢。 函數名 功能 返回值 說明 get 返回表中滿足條件的一條且只能有一條數據。 返回值是一個模型類對象。 參數中寫查詢條件。 1)如果查到多條數據，則拋異常MultipleObjectsReturned。 ...
  • 2019年文章精選，分類整理，順帶聊幾句時間觀念
    寫在前面 首先，祝大家新年快樂，在國人的情結里，現在才是真正的年底，估計現在好多朋友已經陸續回家過節去了，祝回家的路順風。過年回去就好好陪伴家人，不要看一些毒瘤號寫的，過年時間彎道超越別人，趁著假期學習什麼各種新知識，這完全瞎扯，這一年的時間該努力，努力了，吃苦也吃了，春節就好好陪伴家人吃喝玩樂。 ...
  • Python的駐留機制（僅對數字，字母，下劃線有效）
    Python的駐留機制及為在同一運行空間內，當兩變數的值相同，則地址也相同。 舉例： 以上示例為駐留機制有效的情況下的記憶體地址。 以下為加入非數字、字母、下劃線內容的駐留機制驗證，結果為無效 ...
  • Python Numpy中數據的常用的保存與讀取方法
    在經常性讀取大量的數值文件時(比如深度學習訓練數據),可以考慮現將數據存儲為Numpy格式,然後直接使用Numpy去讀取,速度相比為轉化前快很多. 下麵就常用的保存數據到二進位文件和保存數據到文本文件進行介紹: 1.保存為二進位文件(.npy/.npz) numpy.save 保存一個數組到一個二進 ...
  • Python中比較特殊的幾種數據類型list、tuple、dict、set
    list list（列表）是Python內置的一種數據類型，它是一種有序、可變的集合，可以隨時添加和刪除其中的元素。 變數classmates就是一個list。關於list的操作如下： 方法 len():獲取list元素的個數 通過索引訪問 append:向list末尾追加元素 insert:把元素 ...
  • HashMap源碼刨析（面試必看）
    @ "TOC" JDK1.7：數組+鏈表 JDK1.8：數組+鏈表+紅黑樹 前五個問題環境用的是是JDK1.7，後面全部是1.8 1、Hash的計算規則？ 簡單的說是個“擾動函數”，目的是為了使散列分佈的更加均勻。 具體演算法是用key的Hashcode值右移16位，將hashcode高位和低位的值進 ...
  • Spark Streaming數據限流簡述
      Spark Streaming對實時數據流進行分析處理，源源不斷的從數據源接收數據切割成一個個時間間隔進行處理；    流處理與批處理有明顯區別，批處理中的數據有明顯的邊界、數據規模已知；而流處理數據流並沒有邊界，也未知數據規模；    ...
  • typescript-學習使用ts-3
    函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷（Type Inference） 類型相容性 模塊 概念 模塊通信： ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類