Typescript 別名和字符串字面量類型

類型別名

別名，顧名思義，就是給一個類型起個新名字便於記憶和使用。下面例子讓你秒懂並應用。

// alias.ts
type Name = string;
type ShowName = () => string; // Typescript 中的 =>
type NameOrShowName = Name | ShowName; // 聯合類型

const getName = (name: NameOrShowName) => { // ES6 中的 =>
    if(typeof name === 'string'){
        return name;
    } else {
        return name();
    }
}

let showName = () => 'pr is a boy';

console.log(getName('pr')); // pr
console.log(getName(showName())); // pr is a boy
複製代碼

注：不要混淆了 TypeScript 中的 => 和 ES6 中的 =>

在 TypeScript 的類型定義中，=> 用來表示函數的定義，左邊是輸入類型，須要用括號括起來，右邊是輸出類型;

在 ES6 中，=> 叫作箭頭函數;

固然，Typescript 有能夠使用箭頭函數，只不過上面是想說明二者的區別;

發現：

1.建立別名須要使用關鍵字 type；

2.使用別名一般用在有聯合類型的場景下；

字符串字面量類型

它是用來約束只能從定義的字段中取值。

// string.ts
type EventNames = 'click' | 'scroll' | 'mousemove';
const handleEvent: (a: Element, b: EventNames) => string = (ele: Element, event: EventNames) => {
    return `${ele} ${event}`;
}

handleEvent(document.getElementById('header'), 'scroll');
handleEvent(document.getElementById('footer'), 'keyup');

// 0.1.1/string.ts:7:48 - error TS2345: Argument of type '"keyup"' is not assignable to parameter of type 'EventNames'.
    // 7 handleEvent(document.getElementById('footer'), 'keyup'); 
複製代碼

上面報錯是由於 keyup 不在 EventNames 中。

發現：

定義類型別名與字符串字面量類型用的都是 type。

本次代碼 Github

你能夠...

上一篇：Typescript 類與接口

下一篇：Typescript 泛型

目錄：Typescript 小書之入門篇