ts 進階1

typescript一些高級的類型與技術1

類型別名

類型別名用來給一個類型起個新名字。

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 定了一個字符串字面量類型 EventNames
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

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

元祖

數組合並了相同類型的對象，而元組（Tuple）合併了不一樣類型的對象。想起了python的元組

let xcatliu: [string, number] = ['Xcat Liu', 25];
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);
// 也能夠只賦值其中一項：
// 添加越界的元素時，它的類型會被限制爲元組中每一個類型的聯合類型

枚舉

枚舉（Enum）類型用於取值被限定在必定範圍內的場景，好比一週只能有七天，顏色限定爲紅綠藍等。概念來於c#

// 枚舉使用 enum 關鍵字來定義：
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
//枚舉成員會被賦值爲從 0 開始遞增的數字，同時也會對枚舉值到枚舉名進行反向映射：
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true

console.log(Days[1] === "Mon"); // true
console.log(Days[0] === "Sun"); // true
//能夠給枚舉項手動賦值：
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
//未手動賦值的枚舉項與手動賦值的重複了，TypeScript 是不會察覺到這一點的
//使用的時候須要注意，最好不要出現這種覆蓋的狀況。
//手動賦值的枚舉項能夠不是數字，此時須要使用類型斷言來讓tsc無視類型檢查
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
//手動賦值的枚舉項也能夠爲小數或負數，此時後續未手動賦值的項的遞增步長仍爲 1：
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};

常數項和計算所得項

//計算所得項 "blue".length
enum Color {Red, Green, Blue = "blue".length};
//若是緊接在計算所得項後面的是未手動賦值的項，那麼它就會由於沒法得到初始值而報錯：
enum Color {Red = "red".length, Green, Blue};//err

當知足如下條件時，枚舉成員被看成是常數：

• 不具備初始化函數而且以前的枚舉成員是常數。在這種狀況下，當前枚舉成員的值爲上一個枚舉成員的值加 1。但第一個枚舉元素是個例外。若是它沒有初始化方法，那麼它的初始值爲 0。

• 枚舉成員使用常數枚舉表達式初始化。常數枚舉表達式是 TypeScript 表達式的子集，它能夠在編譯階段求值。當一個表達式知足下面條件之一時，它就是一個常數枚舉表達式：

  • 數字字面量
  • 引用以前定義的常數枚舉成員（能夠是在不一樣的枚舉類型中定義的）若是這個成員是在同一個枚舉類型中定義的，可使用非限定名來引用
  • 帶括號的常數枚舉表達式
  • +, -, ~ 一元運算符應用於常數枚舉表達式
  • +, -, *, /, %, <<, >>, >>>, &, |, ^ 二元運算符，常數枚舉表達式作爲其一個操做對象。若常數枚舉表達式求值後爲NaN或Infinity，則會在編譯階段報錯

全部其它狀況的枚舉成員被看成是須要計算得出的值。

常數枚舉

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//常數枚舉與普通枚舉的區別是，它會在編譯階段被刪除，而且不能包含計算成員。

外部枚舉

//外部枚舉（Ambient Enums）是使用 declare enum 定義的枚舉類型
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
//declare const 能夠同時出現
declare 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 */];