jsDoc 布道

太长了;

使用遗留代码库 – 我们中的许多人无法一次又一次地躲避 – 让我尝试使用 jsdoc 而不是 typescript。我必须揭露令人惊讶的真相!

首先让我们清理一下: jsdoc 或 ts 只是意味着在开发人员时间下(包括稍后审查、重用、在任何环境中查看该代码:git 网页、随机编辑器、chrome、firefox、. ..:devtool、vim、cat … );

第一乐章

只需打开你的编辑器,写下适当的注释来测试 jsdoc 是否正常工作。

/** @typedef { 'js' | 'jquery' | 'ts' | 'jsdoc' } phase; *//** * on typing ' editor will popup string list. * * @type {phase} */const badcase = 'react'; // !!!! lint alert !!!!/** @type {phase} */const goodcase = 'jquery';

jsdoc 与 typescript

根据我的经验,jsdoc 能够替换 ts 代码,此外两者之间存在虫洞。

最大的jsdoc功能恕我直言:这是使用标准的js注释系统,所以不要破坏任何js代码,这个代码将在js能够运行的任何地方运行。

feature jsdoc typescript

compiling freedomdo not need compiling the code.mandatory to compiledependency freedomcan working without any dependencyat least ts is your dependencynamespace freedomdon’t interfere types and other imports names. you can use same name of component and component type in react for example.typesript names are identical including as any other referenctrework freedomdon’t need to change existing code, just insert a comment.at least some part in your code need to be turn to tslegacy freedomcan be use even transform to typescript the project is not option. many legacy projects affected this situation.need to push management to allow that modificationmaximalism freedomdon’t need to use every where. even you can use on a new commits, and after easy to search which is the new or reworked parts.also enough to turn build system, and just part of code to tsfuture freedomlater can easy trasnlate to ts. under the hood this is use same technic, just different way.need to work if decide to use js instead tsmindset freedombecause this is a comment your know well this is don’t made any type check at runtime for you as ts also.ts is noising your code

jsdoc 编辑经验

我可以在任何编辑器中编写jsdoc,但很少有人理解它。

节点模块体验

我还创建了一个 npm 模块:jsdoc-duck:一个 jsdoc 编码模块。这强调了如果没有 typescript,就不可能创建 jsdoc npm 模块。也许如果我花更多的时间来弄清楚 vite 构建参数,那么就可以找到正确的解决方案。但好消息是,如果不在 npm 中使用该模块,而是借用我们的代码:只需将 index.js 复制到某个位置 – 那么我们就可以节省时间来向我们的程序插入新的依赖项,并且不会发生任何事情如果模块所有者将模块转为其他东西。

jsdoc typescript 之间的虫洞

好消息是 typescript 和 jsdoc 相互兼容,只是 jsdoc 使用了一些不同的语法。但是您可以在打字稿中使用 jsdoc 模块类型,也可以在 javascript / js+jsdoc 程序中使用打字稿模块类型。所以最终决定权在你手中。

沿着黄砖路走

vs 代码示例展示了如何很好地看到 jsdoc 代码中的类型,在我看来,这给您的代码带来的噪音令人惊讶地减少了。

jsDoc 布道

奖金

:: vs 代码片段

  "@type": {    "prefix": ["ty"],    "body": ["/** @type {$0} */"],    "description": "jsdoc type"  },  "@typedef": {    "prefix": ["td"],    "body": ["/** @typedef {$1} foo */"],    "description": "jsdoc typedef"  },

:: jsdoc-duck 代码

(在此视图中语法突出显示无助于理解类型)。但是这个简短的程序是一个很好的例子,jsdoc 也可以使用 ts 的高级功能。

import { useMemo, useReducer } from "react";/** * @template T - Payload Type * @typedef {T extends { type: infer U, payload?: infer P } ? { type: U, payload?: P } : never} ActionType *//** @template AM - Actions Map @typedef {{ [K in AM['type']]: K }} Labels *//** @template AM - Actions Map @typedef {{ [T in AM["type"]]: Extract extends { payload: infer P } ? (payload: P) => void : () => void }} Quack *//** * @template ST - State * @template AM - Actions Map * @typedef {(state: ST, action: AM) => ST} Reducer *//** * Factory function to create a typed action map. * @template AM - Actions Map * @param {Labels} labelsObject - The keys representing action labels. * @param {function} dispatch - The dispatch function for actions. * @return {Quack} The resulting typed action map. */export const quackFactory = (labelsObject, dispatch) => Object  .keys(labelsObject)  .reduce(    /**     * @arg {Quack} acc     * @arg {keyof Labels} type     * @return {Quack}     */    (acc, type) => ({    ...acc,    [type]: (payload) => {dispatch({ type, payload });}  }), {});/** * A factory hook to create a state and a typed dispatch functions * @exports useDuck * @template AM - Actions Map * @template ST - State Typer * @param {(st: ST, action: AM) => ST} reducer - The reducer function to manage the state. * @param {ST} initialState - The initial state value. * @return {[ST, Quack]} The current state and a map of action dispatch functions. */export const useDuck = (reducer, initialState, labels) => {  const [state, dispatch] = useReducer(reducer, initialState);  const quack = useMemo(    () => quackFactory(labels, dispatch),    [dispatch, labels]  );  return ([state, quack]);};

快乐编码,挖掘而不是添加依赖

以上就是jsDoc 布道的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1494563.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何将并列的数组对象转换为按字段分层的嵌套形式?
上一篇 2025年12月19日 16:40:29
使用 “ 设置 `display: inline-block` 和 `display: inline`,对父元素高度的影响是什么?
下一篇 2025年12月19日 16:40:39

相关推荐

  • 开源免费PHP工具 PHP开发效率提升利器

    推荐开源免费PHP开发工具以提升效率:VS Code、Sublime Text轻量高效,PhpStorm专业强大;调试用Xdebug、Kint、Ray;依赖管理选Composer;代码质量工具包括PHPStan、Psalm、PHP_CodeSniffer;数据库管理可用%ignore_a_1%MyA…

    2026年5月10日
    000
  • 谷歌浏览器如何截图 谷歌浏览器页面截图技巧

    谷歌浏览器如何截图 谷歌浏览器页面截图技巧谷歌浏览器如何截图 谷歌浏览器页面截图技巧谷歌浏览器如何截图 谷歌浏览器页面截图技巧谷歌浏览器如何截图 谷歌浏览器页面截图技巧

    使用谷歌浏览器的开发者工具截图步骤:1. 按ctrl+shift+i(windows/linux)或cmd+option+i(mac)打开开发者工具。2. 点击右上角三个点,选择”更多工具”,再选择”截图”。3. 选择截取整个页面。推荐的谷歌浏览器扩展…

    2026年5月10日 用户投稿
    100
  • JavaScript计算器开发:解决数值显示与初始化问题

    本教程深入探讨了使用JavaScript构建计算器时常见的数值显示异常问题,特别是由于类属性未初始化导致的`Cannot read properties of undefined`错误。我们将详细分析问题根源,并通过在构造函数中调用初始化方法来解决该问题,同时优化显示逻辑,确保计算器功能稳定且界面显…

    2026年5月10日
    000
  • NextAuth getToken 在服务端返回 null 的问题排查与解决

    问题描述 在使用 Next.js 和 NextAuth 构建应用程序时,有时需要在服务端获取用户的身份验证信息。getToken 函数是 NextAuth 提供的一个便捷方法,用于从请求中提取 JWT (JSON Web Token)。然而,在某些情况下,尤其是在使用 getServerSidePr…

    2026年5月10日
    000
  • HTML文档如何工作?如何编辑HTML格式文件?

    HTML文档如何工作?如何编辑HTML格式文件?HTML文档如何工作?如何编辑HTML格式文件?HTML文档如何工作?如何编辑HTML格式文件?HTML文档如何工作?如何编辑HTML格式文件?

    浏览器解析和渲染html的过程包括:1. 解析html构建dom树;2. 结合css构建渲染树;3. 布局计算元素位置;4. 绘制像素到屏幕。编辑html可使用记事本、vs code、sublime text等文本或代码编辑器,其中vs code因语法高亮、自动补全和插件生态成为主流选择。标准htm…

    2026年5月10日 用户投稿
    000
  • GolangWeb项目异常捕获与日志记录

    答案:通过中间件使用defer和recover捕获panic,结合zap等结构化日志库记录请求链路信息,为每个请求生成trace ID,实现异常捕获与可追踪日志,提升系统稳定性与可观测性。 在Go语言Web项目中,异常捕获与日志记录是保障系统稳定性和可维护性的关键环节。Go本身没有像其他语言那样的t…

    2026年5月10日
    000
  • c++中头文件和源文件的区别_c++头文件与源文件作用对比

    头文件声明接口,源文件实现逻辑。头文件含类、函数声明及宏定义,通过#include被多文件共享,用include守卫防重;源文件实现具体功能,编译为目标文件后由链接器合并。声明与实现分离提升模块化与编译效率,模板和内联函数因需编译时可见故常置于头文件,命名空间避免符号冲突,整体结构使项目更清晰易维护…

    2026年5月10日
    000
  • Python官网用户调查的参与方式_Python官网反馈提交详细教程

    答案是通过访问Python官网新闻页面、邮件邀请链接或GitHub仓库提交反馈。具体为:访问官网查找用户调查公告,或点击邮件中的专属链接参与,在GitHub的cpython仓库提交技术建议,并注意如实填写问卷与保护隐私。 如果您希望参与Python官网的用户调查并提交反馈,可以通过官方指定的渠道完成…

    2026年5月10日
    000
  • Go语言连接外部MySQL数据库:DSN配置与常见错误解析

    本文详细阐述了go语言使用`go-sql-driver/mysql`驱动连接外部mysql数据库的正确方法。重点介绍了数据源名称(dsn)的规范格式,特别是主机地址部分的配置,以避免常见的“getaddrinfow: the specified class was not found.”等网络解析错…

    2026年5月10日
    000
  • Tensorflow 音乐预测

    在本文中,我展示了如何使用张量流来预测音乐风格。在我的示例中,我比较了电子音乐和古典音乐。 你可以在我的github上找到代码:https://github.com/victordalet/sound_to_partition i – 数据集 第一步,您需要创建一个数据集文件夹,并在里面…

    2026年5月10日
    000
  • JS注解怎么和TypeScript结合_ JS注解在TypeScript环境下的应用

    TypeScript 支持通过配置 allowJs 和 checkJs 在 JavaScript 文件中识别 JSDoc 注解并进行类型检查,可在混合项目中提升类型安全;常见用法包括 @type、@param、@returns 和 @typedef,能为变量、函数参数等提供类型信息,支持与 .ts …

    2026年5月10日
    000
  • 学习了Python的Flask后,Go语言的Web框架该选Gin还是Beego?

    学习编程时,选择合适的框架至关重要。许多开发者在掌握Python Flask后,转向Go语言Web开发时,常常在Gin和Beego之间难以抉择。本文将深入分析,助您做出明智选择。 虽然网上搜索结果多建议使用Go原生标准库http,但实际上所有框架都是对http的封装。虽然使用http开发灵活,但工作…

    2026年5月10日
    000
  • JavaScript动态下拉菜单:实现日期选项与价格计算关联

    在现代web应用中,动态生成表单元素并使其具备交互逻辑是常见的需求。特别是在需要根据用户选择调整价格或服务参数的场景下,下拉菜单()常被用来展示一系列选项。本教程将指导您如何利用javascript动态生成一个包含日期选项的下拉菜单,并为每个选项关联一个具体的数值(如剩余天数),进而实现一个基于用户…

    2026年5月10日
    000
  • 如何在不暴露密钥的情况下,在客户端创建 Stripe Payment Link

    本文介绍了在纯静态网站环境下,如何利用 Stripe Payment Link 实现商品售卖,并着重讨论了在不暴露 Stripe 密钥的前提下,客户端创建 Payment Link 的可行性。分析了直接在客户端使用密钥的风险,并提出了预先生成 Payment Link 或使用后端服务动态生成 Pay…

    2026年5月10日
    000
  • 解决Go语言中GOPATH未设置错误及工作区配置指南

    本文旨在解决go语言开发中常见的“gopath not set”错误,并提供详细的go工作区配置指南。内容涵盖`gopath`环境变量的设置、go项目目录结构、`path`变量的扩展,以及一些高级配置技巧,旨在帮助开发者建立一个高效、规范的go开发环境,确保包的下载、编译和运行顺利进行。 Go语言在…

    2026年5月10日
    000
  • 掌握 JavaScript 中的高阶函数

    现代 javascript 开发严重依赖函数式编程,掌握其基本思想将极大提高你的编码能力。 高阶函数是这个范式最有力的武器之一。为了帮助您掌握它们,本文将介绍它们的定义、应用程序和独特的实现。 1. 函数式编程 函数式编程是一种编程范式,强调: 纯函数:没有副作用的函数,对于相同的输入返回相同的输出…

    2026年5月10日
    000
  • TypeScript函数体中如何高效判断参数类型?

    typescript 函数体中判断参数类型的技巧 typescript 中,我们可以定义接口来表示不同的数据类型。在本文中,我们将探讨如何在函数体中判断参数的类型,从而实现类型收窄,进行更精细的类型检查。 使用谓词函数 一种方法是编写谓词函数来手动检查类型。谓词函数返回的是 value is som…

    2026年5月10日
    000
  • Golang使用assert库简化测试断言

    使用testify/assert库可提升Go测试代码的可读性和效率,通过go get github.com/stretchr/testify/assert安装后导入包,用assert.Equal等函数替代冗长的手动判断,支持丰富断言方法如Equal、True、Nil、Contains等,并可添加自定…

    2026年5月10日
    100
  • 如何处理在线编辑HTML时外部链接验证的处理方法

    在线编辑HTML时需验证外部链接以保障安全与可用性,可通过自动检测标记外链并添加rel属性提升安全性;2. 实时验证链接有效性,利用HEAD请求检查状态码并在编辑界面提示结果;3. 配置可信域名白名单控制高风险链接输入,适用于合规要求高的场景;4. 提供友好反馈机制,对无效或可疑链接弹出提示并支持新…

    2026年5月10日
    000
  • JS如何实现策略模式

    策略模式通过封装算法使其可互换,JavaScript中利用函数作为一等公民实现,适用于表单验证等场景,结合工厂模式提升灵活性,但应避免过度设计。 策略模式的核心在于定义一系列算法,并将每一个算法封装起来,使它们可以相互替换。这使得算法可以在不影响客户端的情况下发生变化。在JS中,这可以通过函数作为一…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信