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 小书之入门篇