TS入門

本文轉載自查看原文 2021-09-23 15:45 161

類型別名

使用 type 創建類型別名

類型別名常用於聯合類型

例子：

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

字符串字面量類型

用來約束取值只能是某幾個字符串中的一個。

類型別名與字符串字面量類型都是使用 type 進行定義

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 沒問題
handleEvent(document.getElementById('world'), 'dblclick'); // 報錯，event 不能為 'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

元組

數組合並了相同類型的對象，而元組（Tuple）合並了不同類型的對象。

定義一對值分別為 string 和 number 的元組：

let tom: [string, number] = ['Tom', 25];

當賦值或訪問一個已知索引的元素時，會得到正確的類型：

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

也可以只賦值其中一項。

但是當直接對元組類型的變量進行初始化或者賦值的時候，需要提供所有元組類型中指定的項。

let tom: [string, number];
tom = ['Tom', 25];

let tom: [string, number];
tom = ['Tom'];

// Property '1' is missing in type '[string]' but required in type '[string, number]'.

越界的元素

當添加越界的元素時，它的類型會被限制為元組中每個類型的聯合類型：

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);

// Argument of type 'true' is not assignable to parameter of type 'string | number'.

枚舉

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

會被編譯為：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

手動賦值

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

未手動賦值的枚舉項會接着上一個枚舉項遞增。

如果未手動賦值的枚舉項與手動賦值的重復了，TypeScript 是不會察覺到這一點的：

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

編譯的結果是：

var Days;
(function (Days) {
    Days[Days["Sun"] = 3] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

使用的時候需要注意，最好不要出現這種覆蓋的情況。

手動賦值的枚舉項可以不是數字，此時需要使用類型斷言來讓 tsc 無視類型檢查 (編譯出的 js 仍然是可用的)：

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] = 8] = "Mon";
    Days[Days["Tue"] = 9] = "Tue";
    Days[Days["Wed"] = 10] = "Wed";
    Days[Days["Thu"] = 11] = "Thu";
    Days[Days["Fri"] = 12] = "Fri";
    Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));

動賦值的枚舉項也可以為小數或負數，此時后續未手動賦值的項的遞增步長仍為 1：

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

常數枚舉§

常數枚舉是使用 const enum 定義的枚舉類型：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常數枚舉與普通枚舉的區別是，它會在編譯階段被刪除，並且不能包含計算成員。

上例的編譯結果是：

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

外部枚舉

外部枚舉（Ambient Enums）是使用 declare enum 定義的枚舉類型：

declare 定義的類型只會用於編譯時的檢查，編譯結果中會被刪除。

外部枚舉與聲明語句一樣，常出現在聲明文件中。

同時使用 declare 和 const 也是可以的。

類的概念

類（Class）：定義了一件事物的抽象特點，包含它的屬性和方法
對象（Object）：類的實例，通過 new 生成
面向對象（OOP）的三大特性：封裝、繼承、多態
封裝（Encapsulation）：將對數據的操作細節隱藏起來，只暴露對外的接口。外界調用端不需要（也不可能）知道細節，就能通過對外提供的接口來訪問該對象，同時也保證了外界無法任意更改對象內部的數據
繼承（Inheritance）：子類繼承父類，子類除了擁有父類的所有特性外，還有一些更具體的特性
多態（Polymorphism）：由繼承而產生了相關的不同的類，對同一個方法可以有不同的響應。比如 Cat 和 Dog 都繼承自 Animal，但是分別實現了自己的 eat 方法。此時針對某一個實例，我們無需了解它是 Cat 還是 Dog，就可以直接調用 eat 方法，程序會自動判斷出來應該如何執行 eat
存取器（getter & setter）：用以改變屬性的讀取和賦值行為
修飾符（Modifiers）：修飾符是一些關鍵字，用於限定成員或類型的性質。比如 public 表示公有屬性或方法
抽象類（Abstract Class）：抽象類是供其他類繼承的基類，抽象類不允許被實例化。抽象類中的抽象方法必須在子類中被實現
接口（Interfaces）：不同類之間公有的屬性或方法，可以抽象成一個接口。接口可以被類實現（implements）。一個類只能繼承自另一個類，但是可以實現多個接口

用法

屬性和方法

class Animal {
    public name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

類的繼承

class Cat extends Animal {
  constructor(name) {
    super(name); // 調用父類的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 調用父類的 sayHi()
  }
}

let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom

存取器

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

靜態方法

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

使用 static 修飾符修飾的方法稱為靜態方法，它們不需要實例化，而是直接通過類來調用：

ES7 中類的用法

實例屬性

class Animal {
  name = 'Jack';

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack

靜態屬性

class Animal {
  static num = 42;

  constructor() {
    // ...
  }
}

console.log(Animal.num); // 42

TypeScript 中類的用法

public private 和 protected

private 修飾的屬性或方法是私有的，不能在聲明它的類的外部訪問

protected 修飾的屬性或方法是受保護的，它和 private 類似，區別是它在子類中也是允許被訪問的

class Animal {
  private name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

class Animal {
  protected name;
  public constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

參數屬性

修飾符和readonly還可以使用在構造函數參數中，等同於類中定義該屬性同時給該屬性賦值，使代碼更簡潔。

class Animal {
  // public name: string;
  public constructor(public name) {
    // this.name = name;
  }
}

readonly

只讀屬性關鍵字，只允許出現在屬性聲明或索引簽名或構造函數中。

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果 readonly 和其他訪問修飾符同時存在的話，需要寫在其后面。

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

抽象類

abstract 用於定義抽象類和其中的抽象方法。

抽象類是不允許被實例化

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

let a = new Animal('Jack');

// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

抽象類中的抽象方法必須被子類實現

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public eat() {
    console.log(`${this.name} is eating.`);
  }
}

let cat = new Cat('Tom');

// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

正確使用抽象類的例子：

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }
}

let cat = new Cat('Tom');

編譯結果是：

var __extends =
  (this && this.__extends) ||
  function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() {
      this.constructor = d;
    }
    d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
  };
var Animal = (function () {
  function Animal(name) {
    this.name = name;
  }
  return Animal;
})();
var Cat = (function (_super) {
  __extends(Cat, _super);
  function Cat() {
    _super.apply(this, arguments);
  }
  Cat.prototype.sayHi = function () {
    console.log('Meow, My name is ' + this.name);
  };
  return Cat;
})(Animal);
var cat = new Cat('Tom');

類與接口

接口（Interfaces）可以對類的一部分行為進行抽象。

類實現接口

實現（implements）是面向對象中的一個重要概念。一般來講，一個類只能繼承自另一個類，有時候不同類之間可以有一些共有的特性，這時候就可以把特性提取成接口（interfaces），用 implements 關鍵字來實現。這個特性大大提高了面向對象的靈活性。

舉例來說，門是一個類，防盜門是門的子類。如果防盜門有一個報警器的功能，我們可以簡單的給防盜門添加一個報警方法。這時候如果有另一個類，車，也有報警器的功能，就可以考慮把報警器提取出來，作為一個接口，防盜門和車都去實現它：

interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

一個類可以實現多個接口：

interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

Car 實現了 Alarm 和 Light 接口，既能報警，也能開關車燈

接口繼承接口

接口與接口之間可以是繼承關系：

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

LightableAlarm 繼承了 Alarm，除了擁有 alert 方法之外，還擁有兩個新方法 lightOn 和 lightOff。

接口繼承類

常見的面向對象語言中，接口是不能繼承類的，但是在 TypeScript 中卻是可以的：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}

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

泛型

定義函數、接口或類的時候，不預先指定具體的類型，而在使用的時候再指定類型的一種特性。

function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

它並沒有准確的定義返回值的類型.預期的是，數組中每一項都應該是輸入的 value 的類型。

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

多個類型參數

定義泛型的時候，可以一次定義多個類型參數：

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

泛型約束

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

引用：https://ts.xcatliu.com/advanced/further-reading.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 TypeScript：入門TS typescript使用入門及react+ts實戰 typescript 入門例子 Hello world——ts就是一個宿主機語言 TypeScript入門篇——基礎知識（快速了解js與ts差異）【vue&ts開發】Vue 3.0前的 TypeScript 最佳入門實踐 TS學習 TS: 泛型 TS + React JS相比TS的缺點（或TS的優點） ts從單獨的ts文件中導出interface