最近我看到 Jamie Kyle 关于使用解构、默认参数和内联类型的推文：   https://twitter.com/buildsghost/status/1577030375158607872?s=20&t=0qa78fG7TzsSdxrsM1sCvg?embedable=true 我最近在日常工作中看到的那条推文和一些 React 组件启发了我写这篇博文。我想向你展示使用解构和内联类型如何降低 TypeScript 的可读性！  TypeScript 函数定义是什么样的？ 在 JavaScript 和 TypeScript 中，您可以使用 关键字或 lambda/arrow 函数来定义函数。两种方式都有效，但也有区别。让我们看一下简单的 函数。实现逻辑与我们无关。 function sendMessage   // sendMessage function written using `function` keyword function sendMessage(message: string) { // function logic } // same sendMessage written as arrow function const sendMessage = (message: string) => { // function logic }; 当函数定义非常简单时，函数接受一些不同类型的参数。如果它们是字符串或数字之类的原语，那么一切都是可读的。 假设您想将一些附加信息与您的消息内容一起传递给 函数。 sendMessage   function sendMessage(message: { content: string; senderId: string; replyTo?: string; }) { // you can assess content using `message.content` here } 如您所见，TypeScript 允许您为要传递的 对象编写内联类型定义，而无需使用 或 关键字指定类型。 message type interface 让我们添加解构。当您将大型 对象传递给您的函数时，TypeScript 允许拆分传递的参数以减少多次重复 变量的代码样板。 message message   function sendMessage({ content, senderId, replyTo, }: { content: string; senderId: string; replyTo?: string; }) { // you have access to `content` directly } 为什么我认为这是一个坏主意以及如何使它变得更好？ 这可能看起来是个好主意，毕竟你不需要写那么多次  ，对吧？事实证明这并不是那么好。让我们谈谈我认为它是反模式的 5 个原因。 message  1. 你不确定你的数据来自哪里 当您阅读函数体时，您会看到 您必须仔细检查以确保该函数来自何处。它是作为参数传递还是在函数的某处计算？ senderId  2. 很难写文档 当所有类型都被函数定义中的解构所束缚时，没有自然的地方可以编写文档注释。您可以在每个类型字段之间写注释，但这会使整个函数定义更长。它积极地阻止您编写您传递的数据的快速摘要。  3. 很难将数据向前传递 当您的数据被解构时，如果您想将其向前传递，则需要再次将其结构化为一个新对象。这不鼓励创建较小的辅助函数并依赖组合来构建您的主函数逻辑。  4. 你不能在这个函数之外重用参数类型 如果在编写主函数逻辑时需要在辅助函数中重用函数参数，则必须重复键入同一组类型。这使得根本不编写类型变得更容易。  5.它只需要很多空间 面对现实吧。这只是占用大量屏幕空间的大量代码行。此外，它侧重于实现细节——您传递给函数的参数的内部类型，这在您查看该函数时大部分时间并不相关。 只需为它创建一个类型 提取类型并将其放在函数的正上方使其更具可读性。有一个文档注释的地方，您可以在其他一些辅助函数中重用该类型，并在需要时在一个地方更改类型定义。   /** * Message to send using XYZ API */ export type MessageToSend = { /** * Markdown string of the user's message */ content: string; /** * Id of the sender user */ senderId: string; /** * Other message ID if this is a reply */ replyTo?: string; }; function sendMessage(message: MessageToSend) { // function logic } function getUserIdsToNotify(message: MessaageToSend) { // function logic } 资源 查找我在研究此博客文章时使用的资源列表：   https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Alongside

Twitter

Read My Stories

該音頻是用故事的原始語言製作的！

使用解构和内联类型可能会损害您的 TypeScript 代码库

About Author

註釋

標籤

这篇文章刊登在

Related Stories

加密货币增长：创建有效的用户角色

如何将您的工作流程提高 10 倍：17 个必备应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Claude Sonnet 3.5 系统提示泄漏：法医分析

加密货币增长：创建有效的用户角色

如何将您的工作流程提高 10 倍：17 个必备应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Claude Sonnet 3.5 系统提示泄漏：法医分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps