TypeScript（三）型別斷言、陣列的型別、函式的型別

• 網址：https://ts.xcatliu.com/

1. 陣列的型別

在 TypeScript 中，陣列型別有多種定義方式，比較靈活，

「型別 + 方括號」表示法

最簡單的方法是使用「型別 + 方括號」來表示陣列：

let fibonacci: number[] = [1, 1, 2, 3, 5];

陣列的項中不允許出現其他的型別：

let fibonacci: number[] = [1, '1', 2, 3, 5];

// Type 'string' is not assignable to type 'number'.

陣列的一些方法的引數也會根據陣列在定義時約定的型別進行限制：

let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');

// Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中，push 方法只允許傳入 number 型別的引數，但是卻傳了一個 "8" 型別的引數，所以報錯了，這里 "8" 是一個字串字面量型別，會在后續章節中詳細介紹，

陣列泛型

我們也可以使用陣列泛型（Array Generic） Array<elemType> 來表示陣列：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

關于泛型，可以參考泛型一章，

用介面表示陣列

介面也可以用來描述陣列：

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示：只要索引的型別是數字時，那么值的型別必須是數字，

雖然介面也可以用來描述陣列，但是我們一般不會這么做，因為這種方式比前兩種方式復雜多了，

不過有一種情況例外，那就是它常用來表示類陣列，

類陣列

類陣列（Array-like Object）不是陣列型別，比如 arguments：

function sum() {
    let args: number[] = arguments;
}

// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中，arguments 實際上是一個類陣列，不能用普通的陣列的方式來描述，而應該用介面：

function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

在這個例子中，我們除了約束當索引的型別是數字時，值的型別必須是數字之外，也約束了它還有 length 和 callee 兩個屬性，

事實上常用的類陣列都有自己的介面定義，如 IArguments, NodeList, HTMLCollection 等：

function sum() {
    let args: IArguments = arguments;
}

其中 IArguments 是 TypeScript 中定義好了的型別，它實際上就是：

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

關于內置物件，可以參考內置物件一章，

any 在陣列中的應用

一個比較常見的做法是，用 any 表示陣列中允許出現任意型別：

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

參考

• Basic Types # Array（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic Types.html#陣列)）
• Interfaces # Indexable Types（中文版）

2. 函式的型別

函式是 JavaScript 中的一等公民

函式宣告

在 JavaScript 中，有兩種常見的定義函式的方式——函式宣告（Function Declaration）和函式運算式（Function Expression）：

// 函式宣告（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函式運算式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

一個函式有輸入和輸出，要在 TypeScript 中對其進行約束，需要把輸入和輸出都考慮到，其中函式宣告的型別定義較簡單：

function sum(x: number, y: number): number {
    return x + y;
}

注意，輸入多余的（或者少于要求的）引數，是不被允許的：

function sum(x: number, y: number): number {
    return x + y;
}
sum(1, 2, 3);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.
function sum(x: number, y: number): number {
    return x + y;
}
sum(1);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

函式運算式

如果要我們現在寫一個對函式運算式（Function Expression）的定義，可能會寫成這樣：

let mySum = function (x: number, y: number): number {
    return x + y;
};

這是可以通過編譯的，不過事實上，上面的代碼只對等號右側的匿名函式進行了型別定義，而等號左邊的 mySum，是通過賦值操作進行型別推論而推斷出來的，如果需要我們手動給 mySum 添加型別，則應該是這樣：

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

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

在 TypeScript 的型別定義中，=> 用來表示函式的定義，左邊是輸入型別，需要用括號括起來，右邊是輸出型別，

==在 ES6 中，=> 叫做箭頭函式，應用十分廣泛，可以參考 ES6 中的箭頭函式==，

用介面定義函式的形狀

我們也可以使用介面的方式來定義一個函式需要符合的形狀：

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

采用函式運算式|介面定義函式的方式時，對等號左側進行型別限制，可以保證以后對函式名賦值時保證引數個數、引數型別、回傳值型別不變，

可選引數

前面提到，輸入多余的（或者少于要求的）引數，是不允許的，那么如何定義可選的引數呢？

與介面中的可選屬性類似，我們用 ? 表示可選的引數：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

需要注意的是，可選引數必須接在必需引數后面，換句話說，可選引數后面不允許再出現必需引數了：

function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

引數默認值

在 ES6 中，我們允許給函式的引數添加默認值，TypeScript 會將添加了默認值的引數識別為可選引數：

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

此時就不受「可選引數必須接在必需引數后面」的限制了：

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

關于默認引數，可以參考 ES6 中函式引數的默認值，

剩余引數

ES6 中，可以使用 ...rest 的方式獲取函式中的剩余引數（rest 引數）：

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a: any[] = [];
push(a, 1, 2, 3);

事實上，items 是一個陣列，所以我們可以用陣列的型別來定義它：

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

注意，rest 引數只能是最后一個引數，關于 rest 引數，可以參考 ES6 中的 rest 引數，

多載

多載允許一個函式接受不同數量或型別的引數時，作出不同的處理，

比如，我們需要實作一個函式 reverse，輸入數字 123 的時候，輸出反轉的數字 321，輸入字串 'hello' 的時候，輸出反轉的字串 'olleh'，

利用聯合型別，我們可以這么實作：

function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

然而這樣有一個缺點，就是不能夠精確的表達，輸入為數字的時候，輸出也應該為數字，輸入為字串的時候，輸出也應該為字串，

這時，我們可以使用多載定義多個 reverse 的函式型別：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

上例中，我們重復定義了多次函式 reverse，前幾次都是函式定義，最后一次是函式實作，在編輯器的代碼提示中，可以正確的看到前兩個提示，

注意，TypeScript 會優先從最前面的函式定義開始匹配，所以多個函式定義如果有包含關系，需要優先把精確的定義寫在前面，

參考

• Functions（中文版）
• Functions # Function Types（中文版）
• JS 函式式編程指南
• ES6 中的箭頭函式
• ES6 中函式引數的默認值
• ES6 中的 rest 引數

3. 型別斷言

型別斷言（Type Assertion）可以用來手動指定一個值的型別，

語法

值 as 型別

或

<型別>值

在 tsx 語法（React 的 jsx 語法的 ts 版）中必須使用前者，即 值 as 型別，

形如 <Foo> 的語法在 tsx 中表示的是一個 ReactNode，在 ts 中除了表示型別斷言之外，也可能是表示一個泛型，

故建議大家在使用型別斷言時，統一使用 值 as 型別 這樣的語法，本書中也會貫徹這一思想，

型別斷言的用途

型別斷言的常見用途有以下幾種：

將一個聯合型別斷言為其中一個型別

之前提到過，當 TypeScript 不確定一個聯合型別的變數到底是哪個型別的時候，我們只能訪問此聯合型別的所有型別中共有的屬性或方法：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function getName(animal: Cat | Fish) {
    return animal.name;
}

而有時候，我們確實需要在還不確定型別的時候就訪問其中一個型別特有的屬性或方法，比如：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof animal.swim === 'function') {
        return true;
    }
    return false;
}

// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
//   Property 'swim' does not exist on type 'Cat'.

上面的例子中，獲取 animal.swim 的時候會報錯，

此時可以使用型別斷言，將 animal 斷言成 Fish：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

這樣就可以解決訪問 animal.swim 時報錯的問題了，

需要注意的是，型別斷言只能夠「欺騙」TypeScript 編譯器，無法避免運行時的錯誤，反而濫用型別斷言可能會導致運行時錯誤：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function swim(animal: Cat | Fish) {
    (animal as Fish).swim();
}

const tom: Cat = {
    name: 'Tom',
    run() { console.log('run') }
};
swim(tom);
// Uncaught TypeError: animal.swim is not a function`

上面的例子編譯時不會報錯，但在運行時會報錯：

Uncaught TypeError: animal.swim is not a function`

原因是 (animal as Fish).swim() 這段代碼隱藏了 animal 可能為 Cat 的情況，將 animal 直接斷言為 Fish 了，而 TypeScript 編譯器信任了我們的斷言，故在呼叫 swim() 時沒有編譯錯誤，

可是 swim 函式接受的引數是 Cat | Fish，一旦傳入的引數是 Cat 型別的變數，由于 Cat 上沒有 swim 方法，就會導致運行時錯誤了，

總之，使用型別斷言時一定要格外小心，盡量避免斷言后呼叫方法或參考深層屬性，以減少不必要的運行時錯誤，

將一個父類斷言為更加具體的子類

當類之間有繼承關系時，型別斷言也是很常見的：

class ApiError extends Error {
    code: number = 0;
}
class HttpError extends Error {
    statusCode: number = 200;
}

function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
        return true;
    }
    return false;
}

上面的例子中，我們宣告了函式 isApiError，它用來判斷傳入的引數是不是 ApiError 型別，為了實作這樣一個函式，它的引數的型別肯定得是比較抽象的父類 Error，這樣的話這個函式就能接受 Error 或它的子類作為引數了，

但是由于父類 Error 中沒有 code 屬性，故直接獲取 error.code 會報錯，需要使用型別斷言獲取 (error as ApiError).code，

大家可能會注意到，在這個例子中有一個更合適的方式來判斷是不是 ApiError，那就是使用 instanceof：

class ApiError extends Error {
    code: number = 0;
}
class HttpError extends Error {
    statusCode: number = 200;
}

function isApiError(error: Error) {
    if (error instanceof ApiError) {
        return true;
    }
    return false;
}

上面的例子中，確實使用 instanceof 更加合適，因為 ApiError 是一個 JavaScript 的類，能夠通過 instanceof 來判斷 error 是否是它的實體，

但是有的情況下 ApiError 和 HttpError 不是一個真正的類，而只是一個 TypeScript 的介面（interface），介面是一個型別，不是一個真正的值，它在編譯結果中會被洗掉，當然就無法使用 instanceof 來做運行時判斷了：

interface ApiError extends Error {
    code: number;
}
interface HttpError extends Error {
    statusCode: number;
}

function isApiError(error: Error) {
    if (error instanceof ApiError) {
        return true;
    }
    return false;
}

// index.ts:9:26 - error TS2693: 'ApiError' only refers to a type, but is being used as a value here.

此時就只能用型別斷言，通過判斷是否存在 code 屬性，來判斷傳入的引數是不是 ApiError 了：

interface ApiError extends Error {
    code: number;
}
interface HttpError extends Error {
    statusCode: number;
}

function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
        return true;
    }
    return false;
}

將任何一個型別斷言為 any

理想情況下，TypeScript 的型別系統運轉良好，每個值的型別都具體而精確，

當我們參考一個在此型別上不存在的屬性或方法時，就會報錯：

const foo: number = 1;
foo.length = 1;

// index.ts:2:5 - error TS2339: Property 'length' does not exist on type 'number'.

上面的例子中，數字型別的變數 foo 上是沒有 length 屬性的，故 TypeScript 給出了相應的錯誤提示，

這種錯誤提示顯然是非常有用的，

但有的時候，我們非常確定這段代碼不會出錯，比如下面這個例子：

window.foo = 1;

// index.ts:1:8 - error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

上面的例子中，我們需要將 window 上添加一個屬性 foo，但 TypeScript 編譯時會報錯，提示我們 window 上不存在 foo 屬性，

此時我們可以使用 as any 臨時將 window 斷言為 any 型別：

(window as any).foo = 1;

在 any 型別的變數上，訪問任何屬性都是允許的，

需要注意的是，將一個變數斷言為 any 可以說是解決 TypeScript 中型別問題的最后一個手段，

==它極有可能掩蓋了真正的型別錯誤，所以如果不是非常確定，就不要使用 as any==，

上面的例子中，我們也可以通過[擴展 window 的型別（TODO）][]解決這個錯誤，不過如果只是臨時的增加 foo 屬性，as any 會更加方便，

總之，一方面不能濫用 as any，另一方面也不要完全否定它的作用，我們需要在型別的嚴格性和開發的便利性之間掌握平衡（這也是 TypeScript 的設計理念之一），才能發揮出 TypeScript 最大的價值，

將 any 斷言為一個具體的型別

在日常的開發中，我們不可避免的需要處理 any 型別的變數，它們可能是由于第三方庫未能定義好自己的型別，也有可能是歷史遺留的或其他人撰寫的爛代碼，還可能是受到 TypeScript 型別系統的限制而無法精確定義型別的場景，

遇到 any 型別的變數時，我們可以選擇無視它，任由它滋生更多的 any，

我們也可以選擇改進它，通過型別斷言及時的把 any 斷言為精確的型別，亡羊補牢，使我們的代碼向著高可維護性的目標發展，

舉例來說，歷史遺留的代碼中有個 getCacheData，它的回傳值是 any：

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

那么我們在使用它時，最好能夠將呼叫了它之后的回傳值斷言成一個精確的型別，這樣就方便了后續的操作：

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();

上面的例子中，我們呼叫完 getCacheData 之后，立即將它斷言為 Cat 型別，這樣的話明確了 tom 的型別，后續對 tom 的訪問時就有了代碼補全，提高了代碼的可維護性，

型別斷言的限制

本小節的前置知識點：[結構型別系統（TODO）][]、[型別兼容性（TODO）][]

從上面的例子中，我們可以總結出：

• 聯合型別可以被斷言為其中一個型別
• 父類可以被斷言為子類
• 任何型別都可以被斷言為 any
• any 可以被斷言為任何型別

那么型別斷言有沒有什么限制呢？是不是任何一個型別都可以被斷言為任何另一個型別呢？

答案是否定的——并不是任何一個型別都可以被斷言為任何另一個型別，

具體來說，若 A 兼容 B，那么 A 能夠被斷言為 B，B 也能被斷言為 A，

下面我們通過一個簡化的例子，來理解型別斷言的限制：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

let tom: Cat = {
    name: 'Tom',
    run: () => { console.log('run') }
};
let animal: Animal = tom;

我們知道，TypeScript 是結構型別系統，型別之間的對比只會比較它們最終的結構，而會忽略它們定義時的關系，

在上面的例子中，Cat 包含了 Animal 中的所有屬性，除此之外，它還有一個額外的方法 run，TypeScript 并不關心 Cat 和 Animal 之間定義時是什么關系，而只會看它們最終的結構有什么關系——所以它與 Cat extends Animal 是等價的：

interface Animal {
    name: string;
}
interface Cat extends Animal {
    run(): void;
}

那么也不難理解為什么 Cat 型別的 tom 可以賦值給 Animal 型別的 animal 了——就像面向物件編程中我們可以將子類的實體賦值給型別為父類的變數，

我們把它換成 TypeScript 中更專業的說法，即：Animal 兼容 Cat，

當 Animal 兼容 Cat 時，它們就可以互相進行型別斷言了：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

function testAnimal(animal: Animal) {
    return (animal as Cat);
}
function testCat(cat: Cat) {
    return (cat as Animal);
}

這樣的設計其實也很容易就能理解：

• 允許 animal as Cat 是因為「父類可以被斷言為子類」，這個前面已經學習過了
• 允許 cat as Animal 是因為既然子類擁有父類的屬性和方法，那么被斷言為父類，獲取父類的屬性、呼叫父類的方法，就不會有任何問題，故「子類可以被斷言為父類」

需要注意的是，這里我們使用了簡化的父類子類的關系來表達型別的兼容性，而實際上 TypeScript 在判斷型別的兼容性時，比這種情況復雜很多，詳細請參考[型別的兼容性（TODO)][]章節，

總之，若 A 兼容 B，那么 A 能夠被斷言為 B，B 也能被斷言為 A，

同理，若 B 兼容 A，那么 A 能夠被斷言為 B，B 也能被斷言為 A，

所以這也可以換一種說法：

要使得 A 能夠被斷言為 B，只需要 A 兼容 B 或 B 兼容 A 即可，這也是為了在型別斷言時的安全考慮，畢竟毫無根據的斷言是非常危險的，

綜上所述：

• 聯合型別可以被斷言為其中一個型別
• 父類可以被斷言為子類
• 任何型別都可以被斷言為 any
• any 可以被斷言為任何型別
• 要使得 A 能夠被斷言為 B，只需要 A 兼容 B 或 B 兼容 A 即可

其實前四種情況都是最后一個的特例，

雙重斷言

既然：

• 任何型別都可以被斷言為 any
• any 可以被斷言為任何型別

那么我們是不是可以使用雙重斷言 as any as Foo 來將任何一個型別斷言為任何另一個型別呢？

interface Cat {
    run(): void;
}
interface Fish {
    swim(): void;
}

function testCat(cat: Cat) {
    return (cat as any as Fish);
}

在上面的例子中，若直接使用 cat as Fish 肯定會報錯，因為 Cat 和 Fish 互相都不兼容，

但是若使用雙重斷言，則可以打破「要使得 A 能夠被斷言為 B，只需要 A 兼容 B 或 B 兼容 A 即可」的限制，將任何一個型別斷言為任何另一個型別，

若你使用了這種雙重斷言，那么十有八九是非常錯誤的，它很可能會導致運行時錯誤，

除非迫不得已，千萬別用雙重斷言，

型別斷言 vs 型別轉換

型別斷言只會影響 TypeScript 編譯時的型別，型別斷言陳述句在編譯結果中會被洗掉：

function toBoolean(something: any): boolean {
    return something as boolean;
}

toBoolean(1);
// 回傳值為 1

在上面的例子中，將 something 斷言為 boolean 雖然可以通過編譯，但是并沒有什么用，代碼在編譯后會變成：

function toBoolean(something) {
    return something;
}

toBoolean(1);
// 回傳值為 1

所以型別斷言不是型別轉換，它不會真的影響到變數的型別，

若要進行型別轉換，需要直接呼叫型別轉換的方法：

function toBoolean(something: any): boolean {
    return Boolean(something);
}

toBoolean(1);
// 回傳值為 true

型別斷言 vs 型別宣告

在這個例子中：

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();

我們使用 as Cat 將 any 型別斷言為了 Cat 型別，

但實際上還有其他方式可以解決這個問題：

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom: Cat = getCacheData('tom');
tom.run();

上面的例子中，我們通過型別宣告的方式，將 tom 宣告為 Cat，然后再將 any 型別的 getCacheData('tom') 賦值給 Cat 型別的 tom，

這和型別斷言是非常相似的，而且產生的結果也幾乎是一樣的——tom 在接下來的代碼中都變成了 Cat 型別，

它們的區別，可以通過這個例子來理解：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom = animal as Cat;

在上面的例子中，由于 Animal 兼容 Cat，故可以將 animal 斷言為 Cat 賦值給 tom，

但是若直接宣告 tom 為 Cat 型別：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom: Cat = animal;

// index.ts:12:5 - error TS2741: Property 'run' is missing in type 'Animal' but required in type 'Cat'.

則會報錯，不允許將 animal 賦值為 Cat 型別的 tom，

這很容易理解，Animal 可以看作是 Cat 的父類，當然不能將父類的實體賦值給型別為子類的變數，

深入的講，它們的核心區別就在于：

• animal 斷言為 Cat，只需要滿足 Animal 兼容 Cat 或 Cat 兼容 Animal 即可
• animal 賦值給 tom，需要滿足 Cat 兼容 Animal 才行（也就是Cat是父類，Animal是子類）

但是 Cat 并不兼容 Animal，

而在前一個例子中，由于 getCacheData('tom') 是 any 型別，any 兼容 Cat，Cat 也兼容 any，故

const tom = getCacheData('tom') as Cat;

等價于

const tom: Cat = getCacheData('tom');

知道了它們的核心區別，就知道了型別宣告是比型別斷言更加嚴格的，

所以為了增加代碼的質量，我們最好優先使用型別宣告，這也比型別斷言的 as 語法更加優雅，

型別斷言 vs 泛型

本小節的前置知識點：泛型

還是這個例子：

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();

我們還有第三種方式可以解決這個問題，那就是泛型：

function getCacheData<T>(key: string): T {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData<Cat>('tom');
tom.run();

通過給 getCacheData 函式添加了一個泛型 <T>，我們可以更加規范的實作對 getCacheData 回傳值的約束，這也同時去除掉了代碼中的 any，是最優的一個解決方案，

參考

• TypeScript Deep Dive / Type Assertion
• Advanced Types # Type Guards and Differentiating Types（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#型別保護與區分型別（type-guards-and-differentiating-types）)）
• TypeScript 的設計理念