TypeScript基础入门之高级类型的类型保护与区分类型

最新推荐文章于 2024-09-16 20:24:20 发布

weixin_34315665

最新推荐文章于 2024-09-16 20:24:20 发布

阅读量240

点赞数

文章标签： git python javascript ViewUI

原文链接：https://my.oschina.net/zhangdapeng89/blog/2051699

版权

2019独角兽企业重金招聘Python工程师标准>>>

TypeScript基础入门之高级类型的类型保护与区分类型

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.4.3

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node 脚本路径

继续分享高级类型相关的基础知识，有人说我是抄官网的，我想说，有多少人把官网的例子从头看了一边然后又照着抄了一遍，虽然效率很慢，但是我在这个过程中能够知道官网写例子跟说的话是否都是正确的，需要自己去验证下，我们就是因为太多的照猫画虎、依葫芦画瓢导致我们今天技术上没有太多的成就，我希望大家在学习技术的时候，能够踏踏实实的学习一下，知识学到了是你自己的，尤其是写代码，不要让别人觉得今天的程序员没有价值。
打个比方，有人觉得写代码实现功能就可以了，但是我想说，这个是作为一个非技术公司的结果，希望大家去技术型公司，不然老板今天让你改明天让你改，改到最后，你都不知道自己在做神马，而且你写的代码给谁看？写的东西就是垃圾，不说写的多漂亮，至少我们可以对得起自己的花的时间，不要觉得去网上找个例子就抄抄，写写东西就很牛了，其实里面的东西差的不只是表面，这个年代，该让自己沉淀一下了，别太浮躁，现在不是战争年代，我们要有更高的追求。废话不多说继续基础分享。

高级类型

类型保护与区分类型（Type Guards and Differentiating Types）

从上一篇文章【TypeScript基础入门之高级类型的交叉类型和联合类型】的分享中我们可以了解到，联合类型适合于那些值可以为不同类型的情况。但当我们想确切地了解是否为某个类型时怎么办？ JavaScript里常用来区分2个可能值的方法是检查成员是否存在。如上一篇文章文章【TypeScript基础入门之高级类型的交叉类型和联合类型】中之前提及的，我们只能访问联合类型中共同拥有的成员。如下实例，访问任何一个非公有成员，程序编译的时候都会报错

interface Type1 {
    func1(): void;
    func2(): void;
}

interface Type2 {
    func3(): void;
    func2(): void;
}

class Type1Class implements Type1 {
    func1(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

class Type2Class implements Type2 {
    func3(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

function getSomeType(type: string): Type1Class | Type2Class {
    if (type === '1') {
        return new Type1Class();
    }

    if (type === '2') {
        return new Type2Class();
    }

    throw new Error(`Excepted Type1Class or Type2Class, got ${type}`);
}

let type = getSomeType('1');
type.func2();
if (type.func1) {
    type.func1(); // 报错
} else if (type.func3) {
    type.func3(); // 报错
}

编译并运行后得到如下结果

$ tsc ./src/advanced_types_2.ts
src/advanced_types_2.ts:45:10 - error TS2551: Property 'func1' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func1' does not exist on type 'Type2Class'.

45 if (type.func1) {
            ~~~~~

src/advanced_types_2.ts:46:10 - error TS2551: Property 'func1' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func1' does not exist on type 'Type2Class'.

46     type.func1(); // 报错
            ~~~~~

src/advanced_types_2.ts:47:17 - error TS2551: Property 'func3' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func3' does not exist on type 'Type1Class'.

47 } else if (type.func3) {
                   ~~~~~

src/advanced_types_2.ts:48:10 - error TS2551: Property 'func3' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func3' does not exist on type 'Type1Class'.

48     type.func3(); // 报错

为了让这段代码工作，我们要使用类型断言，如下：

interface Type1 {
    func1(): void;
    func2(): void;
}

interface Type2 {
    func3(): void;
    func2(): void;
}

class Type1Class implements Type1 {
    func1(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

class Type2Class implements Type2 {
    func3(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

function getSomeType(type: string): Type1Class | Type2Class {
    if (type === '1') {
        return new Type1Class();
    }

    if (type === '2') {
        return new Type2Class();
    }

    throw new Error(`Excepted Type1Class or Type2Class, got ${type}`);
}

let type = getSomeType('1');
type.func2();
if ((<Type1Class>type).func1) {
    (<Type1Class>type).func1();
} else if ((<Type2Class>type).func3) {
    (<Type2Class>type).func3();
}

编译并运行后得到如下结果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
func2 run
func1 run

用户自定义的类型保护

这里可以注意到我们不得不多次使用类型断言。假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道let type = getSomeType('1')的类型的话就好了。

TypeScript里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。要定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个"类型谓词"，如下实例

function isType1(type: Type1Class | Type2Class): type is Type1Class {
    return (<Type1Class>type).func1 !== undefined;
}

在这个例子里，"type is Type1Class"就是类型谓词。谓词为 parameterName is Type这种形式， parameterName必须是来自于当前函数签名里的一个参数名。

每当使用一些变量调用isType1时，如果原始类型兼容，TypeScript会将该变量缩小到该特定类型。如下

if(isType1(type)) {
    type.func1()
} else {
    type.func3();
}

注意意TypeScript不仅知道在if分支里Type是Type1Class类型；它还清楚在else分支里，一定不是Type1Class类型，一定是Type2Class类型。

typeof类型保护

我以上篇文章[TypeScript基础入门之高级类型的交叉类型和联合类型]的padLeft代码的代码为例，看看如何使用联合类型来改写padLeft。可以像下面这样利用类型断言来写：

function isNumber(x: any): x is number {
    return typeof x === "number";
}

function isString(x: any): x is string {
    return typeof x === "string";
}

function padLeft(value: string, padding: string | number) {
    if (isString(padding)) {
        return padding + value;
    }

    if (isNumber(padding)) {
        return Array(padding + 1).join(' ') + value;
    }

    throw new Error(`Excepted string or number, got ${padding}`);
}

console.log("|" + padLeft("string", 4) + "|");
console.log("|" + padLeft("string", "a") + "|");

编译并运行后得到如下结果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
|    string|
|astring|

然而，必须要定义一个函数来判断类型是否是原始类型，这太痛苦了。幸运的是，现在我们不必将typeof x === "number"抽象成一个函数，因为TypeScript可以将它识别为一个类型保护。也就是说我们可以直接在代码里检查类型了。代码和上篇文章是一样的，省去了定义函数的痛苦。

function padLeft(value: string, padding: string | number) {
    if (typeof padding === 'string') {
        return padding + value;
    }

    if (typeof padding === 'number') {
        return Array(padding + 1).join(' ') + value;
    }

    throw new Error(`Excepted string or number, got ${padding}`);
}

这些**typeof类型保护**只有两种形式能被识别：typeof v === "typename"和typeof v !== "typename"， "typename"必须是"number"，"string"，"boolean"或"symbol"。但是TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。

instanceof类型保护

instanceof类型保护是通过构造函数来细化类型的一种方式。比如，我们借鉴一下之前字符串填充的例子：

interface PadInterface {
    getPadString(): string;
}

class SpacePad implements PadInterface {
    constructor(private num: number){}
    getPadString(): string {
        return Array(this.num + 1).join(' ');
    }
}

class StringPad implements PadInterface {
    constructor(private string: string) { }
    getPadString(): string {
        return this.string;
    }
}

function getRandomPad() {
    return Math.random() < 0.5 ? 
    new SpacePad(5) :
    new StringPad(" ");
}

let pad: PadInterface = getRandomPad();
if (pad instanceof SpacePad) {
    console.log("|" + pad.getPadString() + "string|")
}

if (pad instanceof StringPad) {
    console.log("|" + pad + "string|")
}

第一次编译并运行后得到如下结果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
|     string|

第二次编译并运行后得到如下结果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
| string|

instanceof的右侧要求是一个构造函数，TypeScript将细化为：

此构造函数的prototype属性的类型，如果它的类型不为any的话
构造签名所返回的类型的联合

以此顺序。

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.4.4

转载于:https://my.oschina.net/zhangdapeng89/blog/2051699

weixin_34315665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫