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 类型缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • javascript编程实现栈的方法详解【经典数据结构】

    javascript编程实现栈的方法详解【经典数据结构】

    这篇文章主要介绍了javascript编程实现栈的方法,简单说明了栈的概念、特点并结合实例形式分析了javascript栈的定义、入栈、出栈等操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript格式化json和xml的方法示例

    JavaScript格式化json和xml的方法示例

    这篇文章主要介绍了JavaScript格式化json和xml的方法,结合实例形式分析了javascript格式化json及格式化xml数据的具体操作技巧,需要的朋友可以参考下
    2019-01-01
  • 简洁短小的 JavaScript IE 浏览器判定代码

    简洁短小的 JavaScript IE 浏览器判定代码

    IE浏览器不管是什么版本,总是跟Web标准有些不太兼容。对于代码工作者来说,自然是苦不堪言,为了考虑IE的兼容问题,不管是写 CSS 还是 JS,往往都要对 IE 特别对待,这就少不了做些判断。本文不讨论如何区分 IE 的样式,仅是 JS 判定 IE 浏览器。
    2010-03-03
  • JavaScript实现存储HTML字符串示例

    JavaScript实现存储HTML字符串示例

    这篇文章主要介绍了JavaScript存储HTML字符串的具体实现,需要的朋友可以参考下
    2014-04-04
  • JavaScript封装的常用工具类库bee.js用法详解【经典类库】

    JavaScript封装的常用工具类库bee.js用法详解【经典类库】

    这篇文章主要介绍了JavaScript封装的常用工具类库bee.js用法,结合实例形式详细分析了经典类库bee.js常见的手机、身份证、邮箱校验,以及字符串操作、四则运算、正则验证等相关操作的封装与使用技巧,需要的朋友可以参考下
    2018-09-09
  • 浅谈js中function的参数默认值

    浅谈js中function的参数默认值

    下面小编就为大家带来一篇浅谈js中function的参数默认值。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 详解JavaScript的函数简介

    详解JavaScript的函数简介

    这篇文章主要为大家介绍了JavaScript的函数简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 如何在微信小程序中使用less详解(最优方式)

    如何在微信小程序中使用less详解(最优方式)

    这篇文章主要给大家介绍了关于如何在微信小程序中使用less(最优方式)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JS判断字符串变量是否含有某个字串的实现方法

    JS判断字符串变量是否含有某个字串的实现方法

    下面小编就为大家带来一篇JS判断字符串变量是否含有某个字串的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js简单实现调整网页字体大小的方法

    js简单实现调整网页字体大小的方法

    这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下
    2016-07-07

最新评论