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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類