TypeScript 類型斷言

類型斷言（Type Assertion）就是手動指定一個值的類型。具體看看怎麼作吧

介紹語法

招式一

<類型>值
複製代碼

招式二

值 as 類型
複製代碼

推薦使用這種，由於在 tsx 語法中只認它。而 tsx 是 react 的 jsx 語法的 ts 版，後面實戰篇幅每天見，彆着急。

拿上篇聯合類型例子做教材

// unionGetLength.ts
const unionGetLength = (something: string | number): number => {
    return something.length;
}

// 0.0.4/unionGetLength.ts:2:22 - error TS2339: Property 'length' does not exist on type 'string | number'.
    // Property 'length' does not exist on type 'number'.
    // 2 return something.length;
複製代碼

因而想：若是有 length 屬性就返回 something.length, 沒有就轉爲字符串而後再返回 something.length 可不能夠呢？

// unionGetLength2.ts
const unionGetLength2 = (something: string | number): number => {
    if(something.length){
        return something.length;
    } else {
        return something.toString().length;
    }
}

// 0.0.4/unionGetLength2.ts:3:26 - error TS2339: Property 'length' does not exist on type 'string | number'.
    // Property 'length' does not exist on type 'number'.
    // 3 return something.length;
複製代碼

猜測失敗，unionGetLength2.ts 與 unionGetLength.ts 仍是同樣的問題。然而到這裏咱們再往前進一步（就是加上類型斷言），如

// assertionGetLength.ts
const assertionGetLength = (something: string | number): number => {
    if((something as string).length){
        return (something as string).length;
    } else {
        return something.toString().length;
    }
}

// 或
const assertionGetLengthOther = (something: string | number): number => {
    if((<string>something).length){
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}
複製代碼

編譯後

// assertionGetLength.js
var assertionGetLength = function (something) {
    if (something.length) {
        return something.length;
    }
    else {
        return something.toString().length;
    }
};
// 或
var assertionGetLengthOther = function (something) {
    if (something.length) {
        return something.length;
    }
    else {
        return something.toString().length;
    }
};
複製代碼

總結：類型斷言的用法就是將斷言的變量 xx 改成 (xx as Type) 或 (<Type>xx)。

思惟發散

上篇聯合類型的例子中，類型定義爲 string | number，若是類型斷言不是二者中其一會怎樣？

// assertionGetLength2.ts
const assertionGetLength2 = (something: string | number): boolean => {
    return (something as boolean);
}

const assertionGetLength21 = (something: string | boolean): string => {
    return (something as string);
}

const assertionGetLength22 = (something: string | boolean): boolean => {
    return (something as boolean);
}

const assertionGetLength23 = (something: string | boolean): number => {
    return (something as number);
}

// 0.0.4/assertionGetLength2.ts:2:13 - error TS2352: Conversion of type 'string | number' to type 'boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
    // Type 'number' is not comparable to type 'boolean'.
    // 2 return (something as boolean);

// 0.0.4/assertionGetLength2.ts:14:13 - error TS2352: Conversion of type 'string | boolean' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
    // Type 'true' is not comparable to type 'number'.

    // 14 return (something as number); 
複製代碼

可見，類型斷言必須聯合類型中的一種，類型斷言只是作類型選擇，而不是作類型轉換。

本次代碼 Github

你能夠...

上一篇：Typescript 聯合類型

下一篇：Typescript 對象類型-接口

目錄：Typescript 小書之入門篇