TypeScript: 请停止使用 any

Souleigh ✨ 等级 653 0 0

当我们开发 TypeScript 代码时,很可能会遇到 any 关键字。我们看到的大多数用法都表明我们正在处理 TypeScript 中的基本类型。在文档中我们可能会找到:

(…)来不使用 TypeScript 或第3方库编写的代码的值。在这些情况下,我们可能要选择退出类型检查。为此,我们将这些值标记为 any 类型:

什么是 any

因此 any 不是通配符,也不是基类型,它是明确地与第三方库进行交互。那它为什么经常出现你呢?它对我们的系统有害吗?我们应该逃避它还是拥抱它?

any 类型是使用现有 JavaScript 的强大方法,可让您在编译期间逐渐选择加入和选择退出类型检查。

TypeScript 文档明确表达了当我们使用any类型时,我们正在告诉编译器:

TypeScript: 请停止使用 any

当超过500名该语言的贡献者提供帮助时,我们说 no thank you。这听起来像是选择退出类型检查器,有了它,就不能轻易地放弃对类型系统的所有安全性和信心。我们应该使用它来与无类型的第三方(或第一方) Javascript 代码交互,或者当我们只知道类型的一部分时。

但是等等, 我还有很多其他原因

TypeScript 不会转换为 Javascript 吗?Javascript 不是动态的吗?那我为什么要考虑我的类型呢?

是的!但是我们用 TypeScript 写代码,这是一种静态类型语言。有人可能会说静态类型语言不会比动态语言产生更少的 bug 。不过,在使用 any 之类的静态类型语言中,这是两种情况中最糟糕的。

有些参数很难正确输入,但是 any 更容易

如果我们没有正确地输入,我们将会编写错误,比我们在动态语言中会编写更多的错误,因为我们强制 TypeScript ,一种静态类型语言,去检查不正确的类型。

我真的不知道参数是什么

没关系!我们可以用 unknown ; 它允许我们确实分配任何类型。但在确定特定类型之前,我们将不允许使用这些值。

type ParsedType = {
  id: number
}

const parseApiResponse(
  response: Record<string, unknown>
): ParsedType => {
  const convertedResponse = (response as ParsedType)

  // without doing the type cast we would
  // get a type error here
  if(convertedResponse.id >= 0) {
    return convertedResponse
  } else {
    throw Error.new("Invalid response"
  }
}

添加类型时,我必须编写大量代码,any工作量较少

// version 1 with `any`
const fullName = (user: any) => {
  if (user?.firstName && user?.lastName) {
    return `${user.lastName}, ${user.firstName}`
  }

  return user?.firstName || ""
}

// version 1 without `any`

interface User {
  firstName: string
  lastName?: string
}

const fullName = ({ firstName, lastName }: User) => {
  if (lastName === undefined) {
    return firstName
  }

  return `${lastName}, ${firstName}`;
}

类型增加了很多复杂性,有时any更简单

使用 any 可能允许我们在不考虑数据如何流入逻辑的情况下更简单的开发。但它将这个负担会转移到我们代码的未来读者身上。他们将不得不在没有上下文和编译器帮助的情况下解释发生了什么。

有了文档,我可以提供所有上下文

添加类型时,我们会从编译器获得帮助,并且会获得不会随时间推移而衰减的文档,因为如果过时了,我们的代码将无法编译。

const intersection = (a: any, b: any): any => {
...
}
const intersection = (
  a: Set<number>, b: Set<number>
): Set<number> => {
...
}

它们都是等效的,但是读者会更好地了解后面的函数在做什么,而不是从第一个函数开始。

我已经通过必要的运行时检查以防御性的方式编写了代码,以确保没有错误.

现在可能没有错误,但是除非你有很好的测试覆盖率,否则以后来修改代码的人不会相信他们不是在错误中重构;就好像编译器不会帮你,因为我们说过它不会帮你。如果我们显式地设置类型并更改系统中使用的API,编译器将提供它的指导。

如果以后我改变主意怎么办?我可能会为此重构几个小时.

我们总是可以修改和适应新的类型定义, TypeScript 为此提供了一组实用功能。我们可以 Pick 习惯从先前定义的类型中选择所需的属性。Omit 得到除少数几个以外的所有东西。Partial 使所有属性都是可选的,或进行完整的180并使其全部Required

type User = {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
}

type UserParams =
  Pick<User, "id"> & Partial<Omit<User, "id">>

const updateUser = (
  { id, ...newUserParams }: UserParams
) => {
  {...}
}

很好,从TypeScript中删除 any,立即打开PR

让我们深吸一口气, any 它在正确的情况下非常强大且有用。

  • 与使用它的库接口;确保在将数据移至系统之前尽快将其转换为正确的类型。

  • 解决 TypeScript 类型错误;如果我们发现自己无法输入某些内容,则 any 可能有必要。但是只有在尝试其他所有方法之后才推荐使用。如果使用它,我们应该将其重新转换为可预测的类型。

  • 如果我们的函数可以真正处理任何类型,那么这种情况很少见,并且是偶然的(例如调试或日志记录函数)。在这些情况下,我们需要 100% 确保不存在会导致函数失败的类型。我们应该检查函数的主体,并根据输入确定最基本的形状并加以限制。例如,如果我们要打印某些内容,则至少应验证它是否响应 toString

让我们回顾一下

为什么我们不能在使用 any ?

  • 它使编译器过时了,我们告诉编译器:我不需要你的帮助
  • 我们放弃了在编写代码时记录代码的机会
  • 我们的第一道防线被攻破了
  • 在动态语言中,我们假设事物可以有 any 类型,我们采用的模式遵循这个假设。如果我们开始使用静态类型语言作为动态语言,那么我们就是在与范式作斗争
  • 当我们继续对代码库进行更改时,没有什么可以指导/帮助我们。
  • 自由越大,责任越大(编译器)。不要变成一个编译器,我们的目的是使用编译器。
收藏
评论区

相关推荐

尤雨溪:TypeScript不会取代JavaScript
近日,Evrone 与 Vue.js 的作者尤雨溪进行了一次访谈,了解他对于无后端与全栈方法、以及 Vue.js 适用场景的看法,还有他本人如何在工作与生活之间取得平衡。 记者: 嗨 Evan,很荣幸你能接受我们的访谈。那就先从一个简单的问题开始:您的全职工作岗位是由 Patreon 资助的,大多数人恐怕都没有这样的机会。您能聊聊怎样在工作与生活之间找到
TypeScript: 请停止使用 any
当我们开发 TypeScript 代码时,很可能会遇到 any 关键字。我们看到的大多数用法都表明我们正在处理 TypeScript 中的基本类型。在文档中我们可能会找到: (…)来不使用 TypeScript 或第3方库编写的代码的值。在这些情况下,我们可能要选择退出类型检查。为此,我们将这些值标记为 any 类型: 什么是 any 因此 any
为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
vue高级进阶系列——用typescript玩转vue和vuex
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式: im
TS核心知识点总结及项目实战案例分析
前言 最近工作一直很忙,复盘周期也有所拉长,不过还是会坚持每周复盘。今天笔者将复盘一下typescript在前端项目中的应用,至于为什么要学习typescript,我想大家也不言自明,目前主流框架vue和react以及相关生态的内部构建大部分都采用了typescript,其原因就在于它的静态类型检查极大的提高了代码的可读性和可维护性,而且定位问题非常方便。下
Typescript入门最佳姿势
前言:Typescript 是前端当中一门饱受争议的技术,有人爱有人恨。在本文中,我不会劝你使用或者不使用 TS,而是会站在一个客观的角度,探讨 TS 这门技术所解决的更本质的问题(即 JS 类型问题)及其解决方案(TS 只是其中一种)。希望阁下看完这篇文章之后,能够超脱于 TS 本身,看到更加本质的问题,看到更多的解决方案。之后具体用不用,就是阁下自己的事
Dart语言基础,Dart 基础
1. Dart 的main方法有两种声明方式 // 第一种声明方式 main(){ print("hello world"); //打印 }; // 第二种声明方式.如果有学过typeScript或其它语言的同学都明白下面代码的意思,这个方法是有没返回值的。 void main (){ print("hello world"); }; 2.
关于 Ant Design Form 校验无效的问题
关键词: Ant Design v4.0.2 Form Validation Invalid 校验无效<a name"9pt4x"</a 情景使用 React Typescript Ant Design 重构公司一反洗钱平台部分页面,其一表单需要验证,但是按照 Ant Design Form 中的 Demo 实现后并不效果。<a n
向微软官方贡献 @types 包
在前端社区中,TypeScript 差不多是老生常谈的主题了。这不仅反映了 TypeScript 的流行度,也反映了它的学习上手成本。今天我们不来探讨 TypeScript 本身。而是记录一下我艰难地发布一个 包的历程。 a year ago<img src"https://p9juejin.byteimg.com/toscnik3u1fbp
TypeScript 4.2 有哪些新特性
TypeScript 4.2 发布了!对于不熟悉 TypeScript 的人来说,TypeScript 就是增加了静态类型和类型检查的 JavaScript。有了类型限制,你就可以精确的表达你的函数需要什么类型的参数以及返回什么类型的结果。同时,利用 TypeScript 的类型检查,你可以很容易避免一些常见错误,例如拼写错误或者忘记处理 null 和 un
Deno 运行时入门教程:Node.js 的替代品
Deno 运行时入门教程:Node.js 的替代品作者: 日期: 这几天假期,我学习了一下 。它是 Node.js 的替代品。有了它,将来可能就不需要 Node.js 了。这篇文章就是 Deno 的一个初步介绍,尝试回答为什么 Node.js 不能满足需要,以及 Deno 能够带给我们什么?以下内容主要基于
零基础学习TypeScript(源码开源)
今天,这篇文章篇幅很短,主要开放我最近学习整理TypeScript源码。| 文件夹 | 作用 || | || demo1 | TypeScript的定义 || demo2 | 基础环境搭建 || demo3 | 基础类型和对象类型 || demo4 | 类型注解和类型推断 || demo5 | 函数相关类型 || demo6 | 数组与元组 || dem
基于TypeScript从0到1搭建一款爬虫工具
前言今天,我们将使用TS这门语言搭建一款爬虫工具。目标网址是什么呢?我们去上网一搜,经过几番排查之后,我们选定了这一个网站。https://www.hanju.run/ 一个视频网站,我们的目的主要是爬取这个网站上视频的播放链接。下面,我们就开始进行第一步。第一步俗话说,万事开头难。不过对于这个项目而言,恰恰相反。你需要做以下几个事情:1. 我们需要创建
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
Vue3 + TypeScript 开发实践总结
前言迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。<br/在去年年末又把 TypeScript 重新学了一遍,为了上 Vue3 的车,更好的开车。<br/在上家公司4月份时,上级领导分配了一个内部的 党务系统开发 ,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端 系统,直接上的 Vue3 + TypeScript + El