TypeScript類型斷言

類型斷言

類型斷言(Type Assertion)可以用來手動指定一個值的類型。

語法

<類型>值 或者 
值 as 類型

在 tsx 語法(React 的 jsx 語法的 ts 版)中必須用後一種。

示例

當 TypeScript 不確定一個聯合類型的變量到底是哪個類型的時候,我們只能訪問此聯合類型的共有屬性或者方法 如:

//string和number都有toString方法
getLen = (something: string|number) => {
    return something.toString();
}
//Property 'length' does not exist on type 'ReactText'.
  Property 'length' does not exist on type 'number'.
getLen = (something: string|number) => {
    return something.length;
}

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

//Property 'length' does not exist on type 'ReactText'.
  Property 'length' does not exist on type 'number'.
getLen = (something: string|number) => {
    if(something.length){
        return something.length;
    }else{
        return something.toString().length;
    }
}

此時可以使用類型斷言,將 something 斷言成 string

//tsx文件中用<>方式報錯
//Property 'string' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
//JSX element 'string' has no corresponding closing tag.
getLen = (something: string|number) => {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}
用as方式 相當於js的typeof
getLen = (something: string|number) => {
    if ((something as string).length) {
        return (something as string).length;
    } else {
        return something.toString().length;
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章