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;
    }
}
    原文作者:浅夏晴空
    原文地址: https://segmentfault.com/a/1190000019995390
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞