停止在 TypeScript 中使用 any 类型

news2024/10/6 20:28:44

停止在 TypeScript 中使用 any 类型

TypeScript 是 Web 开发人员中最常用的编程语言之一。它具有出色的语言功能,允许我们轻松设计可扩展的应用程序。因此,开发人员倾向于在项目中选择 TypeScript 而不是 JavaScript。

然而,在使用 TypeScript 以最大限度地发挥其功能时,我们需要避免一些常见的错误。例如,过度使用 any 类型是我们经常犯的一个常见错误。虽然听起来很简单,但过度使用 any 类型可能完全违反 TypeScript 的基本原理。

因此,在本文中,我们将讨论过度使用 any 类型的问题、any 类型的替代方案以及何时应该和不应该使用 any 类型,以便让我们更好地理解。

TypeScript 中的 any 类型是什么

在 TypeScript 中定义变量时,必须显式告知变量的类型。例如,如果我们使用 string 作为数据类型,TypeScript 会理解该变量只能具有字符串值。如果我们尝试为变量分配不同类型的值,TypeScript 将显示错误。

例如,下面的代码片段会给我们提示 Type ‘number’ is not assignable to type ‘string’ 错误:

let myVariable: string = '';
myVariable = 20;

// error - Type 'number' is not assignable to type 'string'.(2322)

在这里插入图片描述
同样,any 是 TypeScript 中另一种可用的数据类型。但它与其他变量不同,因为 any 会告诉 TypeScript 该变量可以具有任何值。因此,如果我们使用 any 类型定义变量,则可以将数字、字符串、布尔值甚至对象分配给该变量,而不会出现错误。

let myVariable: any = 'String Value';
console.log('Value of myVariable : ' + myVariable);

myVariable = 20;
console.log('Value of myVariable : ' + myVariable);

myVariable = false;
console.log('Value of myVariable : ' + myVariable);

在这里插入图片描述
有些人可能认为这是定义项目中所有变量的好方法。但使用 any 类型都会带来一些重大缺点,它会使我们的 TypeScript 项目类似于常规 JavaScript 项目。那么,我们来讨论一下为什么我们不应该在 TypeScript 中使用任何类型来定义变量。

为什么我们不应该使用任何类型

类型检查是 TypeScript 最重要的功能之一。通过检查数据分配和类型转换,它有助于避免应用程序中出现意外问题。

当我们使用 any 类型时,变量将没有特定的数据类型,我们可以将多种类型的值分配给同一个变量。此外,编译器不会对 any 类型定义的变量执行类型检查,我们的项目将看起来像一个常规的 JavaScript 项目。

那么,为什么 TypeScript 还提供了一个名为 any 的数据类型。在某些特定情况下,any 类型会显得特别有用。作为开发人员,我们应该能够识别这些情况并相应地应用 any 类型。

我们什么时候应该使用任何类型

如前所述,任何类型的引入都是出于某些特定原因。以下是我们必须使用 any 类型的一些最常见和最重要的情况。

1. 用于迁移

当我们最初将 JavaScript 项目迁移到 TypeScript 时,any 类型是一个很有价值的选项。例如,如果我们要将 AngularJS 项目迁移到新的 Angular 版本,则可以使用 any 类型来处理尚未迁移的变量类型。

2. 匹配三方库

有时,我们可能会遇到 any 类型的第三方库。在这种情况下,我们必须在项目中使用 any 类型才能使用该库。但请确保尽快将它们转换为正确的类型。

3. 处理类型错误

处理 TypeScript 类型错误是我们可能需要 any 类型的另一种情况。如果找不到任何其他解决方案,可以使用 any 类型来解决问题,并稍后将其转换为合适的类型。

有哪些替代 any 的方案

如上所述,any 类型的主要目的是解决开发人员在使用 TypeScript 时可能面临的一些特定场景。然而,开发人员经常面临无法决定变量的特定类型的情况。因此,让我们讨论在这种情况下可以使用的替代方案,而不使用 any 类型。

1.unknown

当我们不知道变量的类型时,使用 unknown 是最好的选择。与 any 不同的是unknown 在确保变量的类型安全时,同时允许我们为变量分配多种类型。

例如,我们可以定义一个具有 unknown 类型的变量,并稍后为其分配任何类型的值:

let myVariable: unknowon = 'unknown type variable';
console.log('Value of myVariable : ' + myVariable);

myVariable = 20;
console.log('Value of myVariable : ' + myVariable);

myVariable = false;
console.log('Value of myVariable : ' + myVariable);

在这里插入图片描述
如我们所见,unknown 类型变量与 any 类型变量的工作方式相同。但是,如果我们尝试将它们分配给另一个变量,any 和 unknown 之间是存在差异的。如果我们的变量属于 any 类型,则可以将其分配给另一个变量而不会出现错误。但是,如果我们尝试将 unknown 类型变量分配给具有正确类型的变量,我们将看到错误。

// unknown type
let myVariable1: unknown = 'unknown type variable';
console.log('Value of myVariable1 : ' + myVariable1);

let myVariable2: string =  myVariable1;
console.log('Value of myVariable2 : ' + myVariable2);

在这里插入图片描述

2. 使用 Interface

对象定义是开发人员使用 any 类型的另一个常见场景,因为它不需要额外的工作。然而,使用 Interface 是处理 TypeScript 中对象类型的最合适的方法。

例如,假设我们需要定义一个名为 article 的对象,该对象具有 title、writer 和views 的属性。如果使用 any 类型,则可以轻松定义对象,如下所示:

const article: any = {
    title: 'TypeScript',
    writer: 'Chameera',
    views: 10000
}

否则,我们可以在定义对象的同时创建 Interface ,如下所示:

// Interface
interface Article {
    title: string;
    writer: string;
    views: number;
}

// Object
const article: Article = {
    title: 'TypeScript',
    writer: 'Chameera',
    views: 10000
}

与 Interface 类似,我们也可以使用类型注释来创建对象类型:

const article: {title: string;writer: string;views: number;
} = {
    title: 'TypeScript',writer: 'Chameera'views: 10000
}

使用 unknown 类型和 Interface 是替代 any 类型的最佳选择。这两种方法都是类型安全的,可确保我们不会失去任何 TypeScript 优势。

结论

any 是 TypeScript 中可用的独特数据类型。引入它是为了处理一些独特的场景,例如 JavaScript 到 TypeScript 的迁移。但是,在使用类型之前我们应该三思而后行,因为它会禁用对使用 any 类型定义的变量和对象的类型检查。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1276755.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里云开源通义千问720亿参数模型,性能超越大部分商用闭源大模型

12月1日,阿里云举办通义千问发布会,开源通义千问720亿参数模型Qwen-72B。Qwen-72B在10个权威基准测评创下开源模型最优成绩,成为业界最强开源大模型,性能超越开源标杆Llama 2-70B和大部分商用闭源模型。未来,企业级、科…

【Python表白系列】玫瑰花的浪漫告白(完整代码)

文章目录 玫瑰花环境需求完整代码普通玫瑰花三维玫瑰花多彩玫瑰花系列文章玫瑰花 环境需求 python3.11.4PyCharm Community Edition 2023.2.5pyinstaller6.2.0(可选,这个库用于打包,使程序没有python环境也可以运行,如果想发给好朋友的话需要这个库哦~)【注】 python环境搭…

Elasticsearch:什么是自然语言处理(NLP)?

自然语言处理定义 自然语言处理 (natural language processing - NLP) 是人工智能 (AI) 的一种形式,专注于计算机和人们使用人类语言进行交互的方式。 NLP 技术帮助计算机使用我们的自然交流模式(语音和书面文本)来分析、理解和响应我们。 自…

京东数据运营-京东数据开放平台-鲸参谋10月粮油调味市场品牌店铺销售数据分析

鲸参谋监测的京东平台10月份料油调味市场销售数据已出炉! 根据鲸参谋数据显示,今年10月份,京东平台粮油调味市场的销量将近4600万,环比增长约10%,同比降低约20%;销售额将近19亿,环比增长约4%&am…

数据结构—二叉树

文章目录 10.二叉树(1).二叉树的基本概念(2).遍历#1.前序遍历#2.中序遍历#3.后序遍历#4.非递归中序遍历 (3).中序前/后序建树#1.中序前序遍历建树#2.中序后序遍历建树 (4).递归和二叉树基本操作#1.求树高#2.求结点数#3.求叶子结点数#4.复制树#5.判断两棵树是否相等 (5).特殊二叉…

Elasticsearch 优化查询中获取字段内容的方式,性能提升5倍!

1、背景 集群配置为:8 个 node 节点,16 核 32G,索引 4 分片 1 副本。应用程序的查询逻辑是按经纬度排序后找前 200 条文档。 1、应用对查询要求比较高,search 没有慢查询的状态。 2、集群压测性能不能上去,cpu 使用未打…

VSC++=》 友数对友质数()

void 友数对友质数() {//缘由https://bbs.csdn.net/topics/396498706?page1#post-411382586int aa 2, aaa 20; while (aa * aaa < 119)if (判断质数(aa * aaa - 1))cout << aa << ends << aaa << ends << (aa*aaa - 1) << endl, aaa…

JavaFramework JDK Version Test

测试JDK8 JDK17编译包 当前环境JDK8 CASE 1&#xff1a; /*** * author ZengWenFeng* email 117791303QQ.com* mobile 13805029595* date 2023-08-07*/ package zwf;import a.T; import ce.pub.util.GUID;/*** 测试高版本JDK编译JAR&#xff0c;低版本错误** author ZengWenF…

C++作业2

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() 代码&#xff1a…

FastAPI中如何调用同步函数

目录 一、使用app.sync装饰器 二、使用asyncio.run()函数 三、使用background参数 四、注意事项 总结 FastAPI是一个基于Python 3.6的快速Web框架&#xff0c;用于构建高效、可扩展的Web应用程序。在FastAPI中&#xff0c;可以使用同步函数来处理请求并返回响应。本文将介…

Unity 与 虚拟机ROS连接

Unity 与 虚拟机ROS连接 知识储备前期准备ROS部分Unity部分 连接测试 知识储备 unity官方教程&#xff1a; https://github.com/Unity-Technologies/Unity-Robotics-HubWin11家庭版开启HyperV&#xff1a; https://zhuanlan.zhihu.com/p/577980646HyperV安装Ubuntu: https://b…

设计模式---第三篇

系列文章目录 文章目录 系列文章目录前言一、模板方法模式二、知道享元模式吗?三、享元模式和单例模式的区别?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一…

2023年第十二届数学建模国际赛小美赛D题望远镜的微光系数求解分析

2023年第十二届数学建模国际赛小美赛 D题 望远镜的微光系数 原题再现&#xff1a; 当我们使用普通光学望远镜在昏暗的光线下观察远处的目标时&#xff0c;入射孔径越大&#xff0c;进入双筒望远镜的光线就越多。望远镜的放大倍数越大&#xff0c;视野越窄&#xff0c;图像显示…

前端大文件上传webuploader(react + umi)

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置&#xff0c;以及多个事件方法可调用&#xff0c;你可以随心所欲的定制你要的上传组件。 分片上传 1.什么是分片上传 分片上传&#xff0c;就是将所要上传的文件&#xff0c;按照一定的大小&#xff0c;将…

stm32项目中重定向printf打印不出来东西?三种解决方案

项目场景&#xff1a; 在stm32项目中为了调试将某些参数打出来&#xff0c;重定向printf 问题描述 printf打印不出东西 缓冲区满了才打印出来 原因分析&#xff1a; 使用printf函数必须等到缓冲区满或程序结束时&#xff0c;才进行写入到屏幕 解决方案&#xff1a; 解决方…

react实现加载动画

1.Spinning.tsx import "./Spinning.scss";interface Props {isLoading: boolean;children?: React.ReactNode; }const Spinning: React.FC<Props> ({isLoading true,children }) > {return <div className{spinning-wrapper${isLoading ? " l…

MySQL:找回root密码

一、情景描述 我们在日常学习中&#xff0c;经常会忘记自己的虚拟机中MySQL的root密码。 这个时候&#xff0c;我们要想办法重置root密码&#xff0c;从而&#xff0c;解决root登陆问题。 二、解决办法 1、修改my.cnf配置文件并重启MySQL 通过修改配置文件&#xff0c;来跳…

海外IP罗拉rola正版去哪里找?

免费海外IP代理能用吗&#xff1f;和收费的有哪些差异&#xff1f; 如今在这个大数据时代&#xff0c;无论你从事哪个行业&#xff0c;都离不开数据&#xff0c;尤其是做跨境电商的&#xff0c;更一步都离不开海外IP代理&#xff0c;无论是网站引擎优化还是营销推广、数据抓取…

基于SpringBoot实现SSMP整合

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

Android File Transfer for Mac:畅享强大的安卓文件传输工具

作为一款功能强大的安卓文件传输工具&#xff0c;Android File Transfer for Mac&#xff08;以下简称AFT&#xff09;为Mac用户提供了便捷快速的安卓设备文件管理体验。无论是传输照片、音乐、视频还是文档&#xff0c;AFT都能满足你的需求&#xff0c;让你的文件传输更加高效…