目录
1. unknown vs any
2. unknown 和 any 的心智模式
3.总结
首页 web前端 js教程 聊聊TypeScript中unknown和any的差异

聊聊TypeScript中unknown和any的差异

Oct 27, 2021 am 11:14 AM
any typescript unknown

本篇文章带大家对比一下TypeScript中的unknown和any,聊聊unknown和any之间有什么区别,希望对大家有所帮助!

聊聊TypeScript中unknown和any的差异

我们知道 any 类型的变量可以被赋给任何值。

let myVar: any = 0;
myVar = '1';
myVar = false;
登录后复制

TypeScript 指南并不鼓励使用 any,因为使用它就会丢掉类型限制--而需要类型限制也是我们选择 TypeScript 的一个原因,所以就是有点背道而驰。

TypeScript(3.0 及以上版本)还提供了一种类似于 any 的特殊类型 unknown。 我们也可以为 unknown 类型变量分配任何值:

let myVar: unknown = 0;
myVar = '1';
myVar = false;
登录后复制

那现在就有一个问题了, anyunknown 有啥区别?

1. unknown vs any

为了更好地理解 unknownany 之间的区别,我们先从编写一个想要调用其唯一参数的函数开始。

我们将 invokeAnything() 的唯一参数设置为 any 类型

function invokeAnything(callback: any) {
  callback();
}

invokeAnything(1); // throws "TypeError: callback is not a function"
登录后复制

因为 callback 参数是任何类型的,所以语句 callback() 不会触发类型错误。我们可以用any 类型的变量做任何事情。

但是运行会抛出一个运行时错误:TypeError: callback is not a function1 是一个数字,不能作为函数调用,TypeScript并没有保护代码避免这个错误

那既允许 invokeAnything() 函数接受任何类型的参数,又要强制对该参数进行类型检查防止上面这种报错,要怎么做呢?

有请 unknown 大哥来控场。

any 一样,unknown 变量接受任何值。但是当尝试使用 unknown 变量时,TypeScript 会强制执行类型检查。这不就是我们想要的嘛。

function invokeAnything(callback: unknown) {
  callback();
  // Object is of type 'unknown'
}

invokeAnything(1);
登录后复制

因为 callback 参数的类型是 unknown,所以语句 callback() 有一个类型错误 :Object is of type 'unknown'。 与 any 相反,TypeScript会保护我们不调用可能不是函数的东西。

在使用一个 unknown 类型的变量之前,你需要进行类型检查。在这个例子中,我们只需要检查callback 是否是一个函数类型。

function invokeAnything(callback: unknown) {
  if (typeof callback === 'function') {
    callback();
  }
}

invokeAnything(1);
登录后复制

2. unknown 和 any 的心智模式

说实话,当我学习的时候,我很难理解 unknown 。它与 any 有什么不同,因为这两种类型都接受任何值

下面是帮助我理解两者区别的规则:

  • 可以将任何东西赋给 unknown 类型,但在进行类型检查或类型断言之前,不能对 unknown 进行操作
  • 可以把任何东西分配给any类型,也可以对any类型进行任何操作

上面的例子正好说明了 unknown 和 `any 之间的相似和不同。

unknown 示例:

function invokeAnything(callback: unknown) {
  // 可以将任何东西赋给 `unknown` 类型,
  // 但在进行类型检查或类型断言之前,不能对 `unknown` 进行操作
  if (typeof callback === 'function') {
    callback();
  }
}

invokeAnything(1); // You can assign anything to `unknown` type
登录后复制

类型检查 typeof callback === 'function',检查 callback 是否为函数,如果是,则可以调用。

any 示例:

function invokeAnything(callback: any) {
  // 可以对 `any` 类型执行任何操作
  callback();
}

invokeAnything(1); // 可以把任何东西分配给`any`类型
登录后复制

如果 callbackany, TypeScript 就不会强制 callback() 语句进行任何类型检查。

3.总结

unknownany 是2个特殊的类型,可以容纳任何值。

推荐使用 unknown 而不是 any,因为它提供了更安全的类型--如果想对 unknown 进行操作,必须使用类型断言或缩小到一个特定的类型。

更多编程相关知识,请访问:编程视频!!

以上是聊聊TypeScript中unknown和any的差异的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
5个常见的JavaScript内存错误 5个常见的JavaScript内存错误 Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

Vue3+TypeScript+Vite怎么使用require动态引入图片等静态资源 Vue3+TypeScript+Vite怎么使用require动态引入图片等静态资源 May 16, 2023 pm 08:40 PM

问题:Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源!描述:今天在开发项目时(项目框架为Vue3+TypeScript+Vite)需要动态引入静态资源,也就是img标签的src属性值为动态获取,按照以往的做法直接是require引入即可,如下代码:写上后代码波浪线报错,报错提示:找不到名称“require”。是否需要为节点安装类型定义?请尝试使用npmi--save-dev@types/node。ts(2580)在进行了npmi--save-d

如何使用MySQL在TypeScript中实现数据类型转换功能 如何使用MySQL在TypeScript中实现数据类型转换功能 Jul 29, 2023 pm 02:17 PM

如何使用MySQL在TypeScript中实现数据类型转换功能引言:在开发Web应用程序时,数据类型转换是一个非常常见的需求。在处理数据库中存储的数据时,特别是使用MySQL作为后端数据库时,我们经常需要将查询结果中的数据按照我们所需的类型进行转换。本文将介绍如何在TypeScript中利用MySQL实现数据类型转换的功能,并提供代码示例。一、准备工作:在开

解决Ubuntu挂载移动硬盘错误:未知的文件系统类型exfat 解决Ubuntu挂载移动硬盘错误:未知的文件系统类型exfat Jan 05, 2024 pm 01:18 PM

ubuntu挂载移动硬盘出现错误:mount:unknownfilesystemtype'exfat'处理方法如下:Ubuntu13.10或安装exfat-fuse:sudoapt-getinstallexfat-fuseUbuntu13.04或以下sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse-exfatCentOSLinux挂载exfat格式u盘错误的解决方法CentOS中加载extfa

如何使用Redis和TypeScript开发高性能计算功能 如何使用Redis和TypeScript开发高性能计算功能 Sep 20, 2023 am 11:21 AM

如何使用Redis和TypeScript开发高性能计算功能概述:Redis是一个开源的内存数据结构存储系统,具有高性能和可扩展性的特点。TypeScript是JavaScript的超集,提供了类型系统和更好的开发工具支持。结合Redis和TypeScript,我们可以开发出高效的计算功能来处理大数据集,并充分利用Redis的内存存储和计算能力。本文将介绍如何

Vue3中怎么使用TypeScript Vue3中怎么使用TypeScript May 13, 2023 pm 11:46 PM

如何声明字段名为枚举的类型?根据设计,type字段应该是一个枚举值,不应该由调用方随意设置。下面是Type的枚举声明,共有6个字段。enumType{primary="primary",success="success",warning="warning",warn="warn",//warningaliasdanger="danger",info="info",}TypeSc

Vue3相较于Vue2的变化:更好的 TypeScript 类型推导 Vue3相较于Vue2的变化:更好的 TypeScript 类型推导 Jul 07, 2023 pm 01:05 PM

Vue3相较于Vue2的变化:更好的TypeScript类型推导Vue是一种流行的JavaScript框架,用于构建用户界面。而Vue3是Vue框架的最新版本,在Vue2的基础上进行了大量改进和优化。其中之一是在TypeScript类型推导方面的提升。本文将介绍Vue3在类型推导方面的改进,并且通过代码示例进行说明。在Vue2中,我们需要手动为Vue组件

使用Redis和TypeScript开发可扩展的前端应用程序 使用Redis和TypeScript开发可扩展的前端应用程序 Aug 01, 2023 pm 09:21 PM

标题:使用Redis和TypeScript开发可扩展的前端应用程序引言:在当今互联网时代,可扩展性是任何应用程序的关键要素之一。前端应用程序也不例外。为了满足用户日益增长的需求,我们需要使用高效可靠的技术来构建可扩展的前端应用程序。在本文中,我们将介绍如何使用Redis和TypeScript来开发可扩展的前端应用程序,并通过代码示例演示其应用。Redis简介

See all articles