当前位置: 首页 > news >正文

还没用熟 TypeScript 社区已经开始抛弃了

根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte 这篇文章的报道, Svelte 计划要把代码从 TS 换到 JS 了。

The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate “big ideas” for Svelte 5 later this year, he added.

这种震惊劲爆的信息,当然的核实下是不是准确的,于是去 svelte 框架的作者 Rich Harris 的推特去求证下,好奇的不止我一个,已经有人提问了,并且作者给出了答案,非常确定

最新消息,非常确定了,就在昨天,北京时间 2022 年 5 月 9 日,Svelte 团队发布了一个名为 TS to JSDoc Conversion 的 PR,开始这项浩瀚的工程,同时宣布目前 Svelte 不再支持重大更新了,根据点不支持的人数,看到这件事情比较有争议,不支持的人不在少数。

TS to JSDoc Conversion

事实上,这不是社区第一次放弃 TypeScript 了,比如 Deno 远在 2020 年就弃用了 TS,并给出三大理由:

  1. 减少了构建时间
  2. 发布代码变小了
  3. 写的代码大大减少了

那个时候 TyepScript 的发展正在如日中天的时候,广大库的作者普遍拥抱 TS,比如于2020年9月18日正式发布的Vue3 ,代号为 One Piece(海贼王)。

三年过去了,再好看的媳妇也看腻了,大家就开始挑毛病了,你(TyepScript)可能并不完美。

回归了理性,大家就开始思考使用 TyepScript 的初心是什么了,意识吼出了灵魂一问?我们为什么使用 TypeScript?

没错,这个问题很简单,因为 TypeScript 提供了类型检查,弥补了 JavaScript 只有逻辑没有类型的问题,也就是讲我们不需要 TypeScript 的逻辑,只需要它的的类型提示功能。但是不知不觉之间,我们在逻辑的道路上越走越远。

比如下面是 Vue3 watch API 的类型声明,我估计给一天时间,大多数人可能都不太能整的明白里面的逻辑:

 
export declare function watch<T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;export declare function watch<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;export declare function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;export declare function watch<T extends object, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;

而且如果项目引用了用 TypeScript 编写的库,需要频繁借助 VSCode 等编辑器查看源代码,才能进行类型声明继续编写逻辑代码。

以前我也是 TypeScript 的拥趸,但是使用了一两年之后,我改变了看法,平时应付业务逻辑已经够费脑子了,现在需要花不少时间去调整代码来适应需求。

除此之外,dev 开发代码进行类型检查也比较费时间,项目大了可能需要顿个几秒才能检查完成,再进行代码编译输出到浏览器。

现在明白了最初的需求,完全可以用 JavaScript + JSDoc 来解决类型声明,现代编辑器是认的 JSDoc,友好支持程度一点不比 TS 差,如果是编写库,需要导出给安装者使用,那就在 .d.ts 文件中定义导出给使用者。

使用 JSDoc 表达类型,不仅省去了构建步骤,不打包都可以直接用,还可以避免编写复杂的类型逻辑,太方便了有没有,代码可以复制到任何 JS 的运行环境心动没有。

我们来实践看看行不行的通,光说不练,假把式。

这里以 Svgo 的一个函数 removeLeadingZero 为例,这个函数可以删除小数的前导零并作为字符串返回,比如 0.5 → .5-0.5 → -.5

 

const removeLeadingZero = (num) => { let strNum = num.toString(); if (0 < num && num < 1) { strNum = strNum.slice(1); } else if (-1 < num && num < 0) { strNum = "-" + strNum.slice(2); } return strNum; };

我们添加如何注释:

 

/** * Remove floating-point numbers leading zero. * * @example * 0.5 → .5 * * @example * -0.5 → -.5 * * @type {(num: number) => string} */

非常好用:

image.png

实际上 VSCode 有智能推断,简单的代码都能推断出来,比如,const num = 23; 会自动感应出来方法:

image.png

说回来 removeLeadingZero 函数,当我们调用的时候,传入错误的参数,没有像 TS 类型强制报错:

image.png

解决办法也很简单,比如:

  1. 利用的 TS @ts-check 注释
  2. 添加 tsconf.json / jsconfig.json 并让 checkJs 为 true。
 

{ "compilerOptions": { "checkJs": true }, "exclude": ["node_modules", "**/node_modules/*"] }

  1. 添加"js/ts.implicitProjectConfig.checkJs": true到您的工作区或用户设置里面即 settings.json 文件。
  2. 更多参考 type-checking-javascript

改正后的效果:

image.png

事实上 JSDoc 的类型注释非常丰富比如还有 @param@const 等等,但不复杂,学习成本很低

相关文章:

还没用熟 TypeScript 社区已经开始抛弃了

根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte 这篇文章的报道&#xff0c; Svelte 计划要把代码从 TS 换到 JS 了。 The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate…...

2023年9月19日

2> 完成文本编辑器的保存工作 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QFontDialog> #include <QMainWindow> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include &l…...

PowerDesigner 与 mysql 同步数据

PowerDesigner 连接上数据库 创建数据库表 table_5 选择&#xff1a; 点击确认后弹出 点击run执行 刷新数据库表&#xff0c;已创建成功 修改测试表1&#xff0c;新增一个字段 取消全选 选择数据库&#xff0c;勾选修改的表&#xff0c;如果全部勾选的话&#xff0c;就…...

[python 刷题] 271 Encode and Decode Strings

[python 刷题] 271 Encode and Decode Strings 题目&#xff1a; Design an algorithm to encode a list of strings to a string. The encoded string is then sent over the network and is decoded back to the original list of strings. Machine 1 (sender) has the func…...

[QT]day3

1.一个闹钟 widget.cpp: #include "widget.h" #include "ui_widget.h"#include <QWidget> #include <QTimerEvent> //定时器事件处理类 #include <QTime>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {//给播…...

《PostgreSQL事务管理深入解析》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…...

深度分析Oracle中的NULL

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 关键点 特殊值NULL意味着没有数据&#xff0c;它声明了该值是未知的事实。默认情况下&#xff0c;任何类型的列和变量都可以取这个值&#xff0c;除非它们有一个NOT N…...

Python入门教学——类和对象

目录 一、面向过程和面向对象 1、面向过程 2、面向对象 二、类 三、类对象与类属性 1、类对象 2、类属性 四、类方法与静态方法 1、类方法 2、静态方法 一、面向过程和面向对象 1、面向过程 是一种以过程为中心的编程思想&#xff0c;强调事件的流程和顺序。思想&…...

【数据库系统概论】关系数据库中的关系数据结构

前言关系关系模式关系数据库关系模型的存储结构感谢 &#x1f496; 前言 上一篇文章【数据库系统概论】数据模型介绍了数据库系统中的数据模型的基本概念。其中提到了关系模型是最重要的一种数据模型。下面将介绍支持关系模型的数据库系统——关系数据库。 按照数据模型的三大…...

LabVIEW对Table中同一行数据分多次增加

LabVIEW对Table中同一行数据分多次增加 在对多个设备采集数据&#xff0c;同时需要记录到表格中。很多时候多台数据并不是同时更新&#xff0c;比如有的是在开关之前读取更新&#xff0c;有的则是在开关闭合后更新。只是用Number Indicator的方式&#xff0c;需要很多个&#…...

微信小程序实现删除功能

1. 前端 项目列表展示是使用的wx&#xff1a;for遍历 每个项目展示有3个模块 1. project-title 2. project-content 3. project-foot 全部代码如下 <t-sticky><view class"search"><t-search model:value"{{conditions.keyword}}" pl…...

整合Shiro+Jwt

整合ShiroJwt大体思路 springboot整合shiro大体上的思路&#xff1a; 1.自定义一个类Realm extends AuthorizingRealm{} 主要是对token授权和认证 重写2个方法 doGetAuthorizationInfo //授权 doGetAuthenticationInfo //认证 认证 代码中手动加上对token校验的判断2.自…...

Python 图形化界面基础篇:创建工具栏

Python 图形化界面基础篇&#xff1a;创建工具栏 引言 Tkinter 库简介步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建工具栏步骤4&#xff1a;向工具栏添加工具按钮步骤5&#xff1a;处理工具按钮的点击事件步骤6&#xff1a;启动…...

基于matlab实现的卡尔曼滤波匀加速直线运动仿真

完整程序&#xff1a; clear clc %% 初始化参数 delta_t 0.1; %采样时间 T 8; %总运行时长 t 0:delta_t:T; %时间序列 N length(t); %序列的长度 x0 0; %初始位置 u0 0; %初速度 U 10; %控制量、加速度 F [1 delta_t 0 1]; %状态转移矩阵 B …...

windows Visual Studio 2022 opengl开发环境配置

1. 安装glew(GL), GLFW, glm, soil2-debug 还需要premake生成visual studio solution cmake for windows也要安装一个&#xff0c; 但是不用安装MinGW64, bug多 下载源码&#xff0c;找到xxx.sln文件用visual stidio打开solution编译代码&#xff0c;找到xxx.lib, xxx.dll文件…...

中国财政科学研究院党委书记、院长刘尚希一行莅临麒麟信安调研

为贯彻落实省委第十二届四次全会精神&#xff0c;加快推动湖南高质量发展&#xff0c;9月16日下午&#xff0c;由中国财政科学研究院党委书记、院长刘尚希&#xff0c;中国电子信息产业发展研究院总工程师秦海林&#xff0c;省委改革办副主任梁仲&#xff0c;省发展改革委党组成…...

基于element-ui的年份范围选择器

基于element-ui的年份范围选择器 element-ui官方只有日期范围和月份范围选择器&#xff0c;根据需求场景需要&#xff0c;支持年份选择器&#xff0c;原本使用两个分开的年份选择器实现的&#xff0c;但是往往有些是不能接受的。在网上找了很多都没有合适的&#xff0c;所以打…...

【已解决】您所使用的密钥ak有问题,不支持jsapi服务,可以访问该网址了解如何获取有效密钥。

您所使用的密钥ak有问题&#xff0c;不支持jsapi服务&#xff0c;可以访问该网址了解如何获取有效密钥。详情查看&#xff1a;http://lbsyun.baidu.com/apiconsole/key#。 问题 百度密钥过期 思路 注册成为开发者 如果还没注册百度地图api账号的&#xff0c;点击以后就进入…...

JS操作数组方法学习系列(1)

目录 数组添加元素 (push)数组移除末尾元素 (pop)数组添加元素到开头 (unshift)数组移除开头元素 (shift)数组查找元素索引 (indexOf)数组反向查找元素索引 (lastIndexOf)数组切割 (slice)数组连接 (concat)数组元素查找 (find 和 findIndex)数组元素过滤 (filter)数组元素映射…...

翻牌闯关游戏

翻牌闯关游戏 3关&#xff1a;关卡由少至多12格、20格、30格图案&#xff1a;12个玩法&#xff1a;点击两张卡牌&#xff0c;图案一到即可消除掉 记忆时长(毫秒)&#xff1a;memoryDurationTime:5000 可配置&#xff1a;默认5000 提示游戏玩法&#xff1a;showTipsFlag:1 可…...

JavaScript代码保护实战:用javascript-obfuscator给你的前端穿上防弹衣

JavaScript代码保护实战&#xff1a;用javascript-obfuscator打造坚不可摧的前端防线 1. 为什么前端代码需要保护&#xff1f; 记得去年参与一个电商项目时&#xff0c;团队花三个月开发的核心促销算法&#xff0c;上线一周就被竞争对手完整"借鉴"。检查发现对方直…...

Jellyfin演员头像总是不全?试试这个TMM刮削+本地导入的终极方案

Jellyfin演员头像缺失难题的工程级解决方案&#xff1a;TMM刮削与本地化元数据管理实践 每次打开精心搭建的Jellyfin影音库&#xff0c;看到那些残缺不全的演员头像&#xff0c;就像翻开一本缺页的相册——这种体验对于追求完美的影音爱好者来说简直难以忍受。经过反复测试发现…...

NaViL-9B效果对比图:同一图片下temperature=0与0.5响应差异

NaViL-9B效果对比图&#xff1a;同一图片下temperature0与0.5响应差异 1. 模型简介 NaViL-9B是由专业研究机构开发的原生多模态大语言模型&#xff0c;具备强大的文本理解和图像分析能力。该模型支持纯文本问答和图片理解两种主要功能&#xff0c;能够处理复杂的多模态任务。…...

Oracle Product Hub Portal Cloud(简称 OPH Cloud)是 Oracle 提供的基于云的主数据管理(MDM)解决方案

Oracle Product Hub Portal Cloud&#xff08;简称 OPH Cloud&#xff09;是 Oracle 提供的基于云的主数据管理&#xff08;MDM&#xff09;解决方案&#xff0c;专为统一、治理和分发产品主数据而设计。它是 Oracle Cloud Enterprise Resource Planning (ERP)、Supply Chain M…...

Nacos如何开启ssl(https)[图文版]

首先,你得有个域名,只有域名才能有ssl 在你的腾讯云或者阿里云控制台把域名解析到nacos所在的ip上面 等待几分钟,打开cmd, ping 刚才的域名,如果返回的是nacos的ip那说明解析成功了 例如你的域名是 ttvv.com 那就 ping ttvv.com 准备证书文件 你的证书通常是 .pem 和 .key …...

解锁论文写作新姿势:Paperzz AI 如何让本科毕业论文从「0 到 1」高效落地

Paperzz-AI官网免费论文查重复率AIGC检测/开题报告/文献综述/论文初稿paperzz - 毕业论文-AIGC论文检测-AI智能降重-ai智能写作https://www.paperzz.cc/dissertation 当毕业论文成为毕业季的「头号难题」&#xff0c;不少本科生都在重复着低效循环&#xff1a;对着空白文档发呆…...

Kinaxis在2026年Gartner®供应链规划魔力象限报告中获评“领导者”

该项认可基于公司在“愿景完整性”与“执行能力”两大评估维度上的卓越表现 全球领先的供应链编排解决方案提供商Kinaxis Inc.&#xff08;多伦多证券交易所代码&#xff1a;KXS&#xff09;今日宣布&#xff0c;公司在《2026年Gartner面向离散行业的供应链规划解决方案魔力象限…...

ChatTTS 自定义样本实战:如何高效构建个性化语音合成模型

最近在做一个需要个性化语音合成的项目&#xff0c;用到了ChatTTS。说实话&#xff0c;直接拿官方流程走自定义样本训练&#xff0c;那个效率真是让人有点头疼。数据准备繁琐&#xff0c;训练时间长&#xff0c;出来的效果还不一定稳定。经过一番折腾和优化&#xff0c;总算总结…...

OpenClaw监控告警:GLM-4.7-Flash任务异常自动通知设置

OpenClaw监控告警&#xff1a;GLM-4.7-Flash任务异常自动通知设置 1. 为什么需要监控告警系统 上周我部署了一个基于GLM-4.7-Flash的自动化日报生成任务&#xff0c;结果连续三天都没收到输出。检查后发现是模型服务意外重启导致任务中断——这种"静默失败"在自动化…...

OpenClaw调试技巧:百川2-13B任务失败时的6种排查方法

OpenClaw调试技巧&#xff1a;百川2-13B任务失败时的6种排查方法 1. 为什么需要专门的调试方法&#xff1f; 上周我让OpenClaw自动整理一批会议录音转文字稿&#xff0c;结果凌晨3点收到飞书报警——任务卡在"正在分析关键内容"阶段。第二天检查发现&#xff0c;百…...