TypeScript中类型缩小的方式

 更新时间:2026年05月14日 09:42:13   作者:Eersan-2023.3.12  
本文探讨了TypeScript中用于提升代码安全性的类型缩小技术,包括类型断言通过as或<>,使用instanceof检查对象实例,in关键字验证对象属性,以及自定义类型保护函数进行更复杂的类型检查,感兴趣的可以了解一下

TypeScript是一种静态类型检查的编程语言,它通过让开发者在代码中去定义变量、函数、接口以及类等等的类型,从而帮助开发者减少代码中的错误。TypeScript类型系统中有一些非常强大的功能,其中一个非常重要的概念是类型缩小(Type Narrowing)。在本篇技术博客中,我们将探讨TypeScript中类型缩小的几种方式。

1.类型断言(Type Assertion)

类型断言是TypeScript中最常用的类型缩小技术之一。当开发者对一个变量进行类型断言时,就是在告诉TypeScript编译器,这个变量的类型是我们所指定的类型。在对变量进行类型断言时,我们可以使用"as"关键字或者"<>"符号。例如:

const myVariable: unknown = "hello world";

if(typeof myVariable === "string"){
  const myString: string = myVariable as string;
  console.log(myString.toUpperCase());
}

2.instanceof关键字

TypeScript中的 instanceof关键字可以用来检查对象是不是属于某个类的实例,这也是一种类型缩小的方式。例如:

class MyPerson {
    firstName: string;
    lastName: string;
}

const myObject: any = new MyPerson();
if(myObject instanceof MyPerson) {
    console.log(myObject.firstName);
}

在这个例子中,我们用instanceof关键字判断myObject是不是MyPerson类的一个实例,这样我们就能够仅仅在if语句块中使用MyPerson类中的firstName属性了。

3.in关键字

in关键字用来检查一个属性是否属于一个对象,如果这个条件为true,TypeScript就会默认这个变量的类型是我们指定的类型。例如:

type Student = {
    name: string;
    major: string;
    gpa: number;
}

function printStudentInfo(student: Student, key: string) {
    if (key in student) {
        console.log(student[key]);
    }
}

在这个例子中,我们使用了in关键字去检测传递进来的key是否属于student对象的属性,并且默认这个变量的类型为string。

4.自定义类型保护函数

除了上述基本的类型缩小方式之外,TypeScript还允许开发者自定义类型保护函数来进行类型缩小。类型保护函数是指一个函数,它发挥的作用是在运行时检查一个变量是否属于某个特定类型,并且返回一个布尔值。例如:

interface Animal {
    name: string;
}

interface Dog extends Animal {
    breed: string;
}

function isDog(animal: Animal): animal is Dog {
    return (animal as Dog).breed !== undefined;
}

function bark(animal: Animal) {
    if(isDog(animal)){
        console.log((animal as Dog).name + " barks!");
    } else {
        console.log(animal.name + " doesn't bark!");
    }
}

const myAnimal1: Animal = { name: "Bob" };
const myAnimal2: Dog = { name: "Max", breed: "Beagle" };

bark(myAnimal1);    // "Bob doesn't bark!"
bark(myAnimal2);    // "Max barks!"

这个例子中我们定义了一个isDog的函数,它用来检查传递进来的变量是否属于Dog类型。注意到isDog函数的返回值为animal is Dog,这是一种类型谓词,表示函数会将传递进来的变量作为Dog类型来处理。

总结

本篇技术博客介绍了TypeScript中类型缩小的几种方式,包括类型断言、instanceof关键字、in关键字以及自定义类型保护函数。每种类型缩小技术都有其应用场景和优势,在编写TypeScript代码时,开发者可以选择最合适的方式来进行类型缩小,从而让代码更加健壮和安全。

到此这篇关于TypeScript中类型缩小的方式的文章就介绍到这了,更多相关TypeScript 类型缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现的tab切换并显示相应内容模块功能示例

    JS实现的tab切换并显示相应内容模块功能示例

    这篇文章主要介绍了JS实现的tab切换并显示相应内容模块功能,结合实例形式分析了JavaScript基于事件响应、元素遍历实现页面tab切换功能相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • JS try catch用法举例之异常处理

    JS try catch用法举例之异常处理

    JavaScript try…catch是我们使用的功能之一,作为Web前端工程师,JavaScript try…catch是我们使用的功能之一,这篇文章主要给大家介绍了关于JS try catch用法举例之异常处理的相关资料,需要的朋友可以参考下
    2024-06-06
  • JS获取浏览器地址栏的多个参数值的任意值实例代码

    JS获取浏览器地址栏的多个参数值的任意值实例代码

    本文通过实例代码给大家介绍了JS获取浏览器地址栏的多个参数值的任意值,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧
    2018-07-07
  • Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮

    一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态。接下来通过本文给大家介绍bootstrap实现查询按钮和重置按钮的方法,一起看看吧
    2016-10-10
  • js字符串截取函数substr substring slice使用对比

    js字符串截取函数substr substring slice使用对比

    字符串截取函数有substr、substring以及slice等等,下面将为大家介绍下各自的使用,感兴趣的朋友可以了解下
    2013-11-11
  • javascript常用函数(2)

    javascript常用函数(2)

    这篇文章主要介绍了javascript常用函数,再来15个常用函数,都具有很高的实用性,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS实现的tab页切换效果完整示例

    JS实现的tab页切换效果完整示例

    这篇文章主要介绍了JS实现的tab页切换效果,涉及javascript基于事件响应动态操作页面元素属性相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • nullJavascript中创建对象的五种方法实例

    nullJavascript中创建对象的五种方法实例

    今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘。目前又不当COO,还是得用心记代码哦!
    2013-05-05
  • js实现简单的打印表格

    js实现简单的打印表格

    这篇文章主要为大家详细介绍了js实现简单的打印表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js给onclick赋值传参数的两种方法

    js给onclick赋值传参数的两种方法

    这篇文章主要介绍了js给onclick赋值传参数的两种方法,有需要的朋友可以参考一下
    2013-11-11

最新评论