当前位置: 首页 > 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 可…...

RCX自定义主题和外观设置:如何打造个性化的云管理界面

RCX自定义主题和外观设置&#xff1a;如何打造个性化的云管理界面 【免费下载链接】rcx Rclone for Android 项目地址: https://gitcode.com/gh_mirrors/rc/rcx RCX作为一款功能强大的Android云管理工具&#xff0c;不仅提供了全面的Rclone功能支持&#xff0c;还允许用…...

19 - 语言模型为何是AGI的开端?——从“知识压缩”到“智能涌现”的第一性原理

本专题系列文章共 21 篇,前 5 篇限时免费阅读 01 - 眩晕时代的定海神针:大模型落地的“第一性原理”与算力丰裕悖论 02 - 95%的AI投资打了水漂:五大错配如何扼杀你的“第二增长曲线” 03 - 从电力到AI:标准化已死,个性化永生——大模型时代的三大商业终局 04 - 你的护城…...

GoFrame+Vue3后台管理框架的WebSocket即时通讯实战:架构设计与消息推送

在 GoFrame Vue3 后台管理框架的开发中&#xff0c;即时通讯&#xff08;IM&#xff09;是一个高频需求——从站内信到客服系统&#xff0c;从通知推送到协作消息&#xff0c;都离不开 WebSocket 长连接。 XYGo Admin 基于 gorilla/websocket 实现了一套完整的即时通讯体系&a…...

微服务架构:使用Docker+Kubernetes部署应用

微服务架构&#xff1a;使用DockerKubernetes部署应用 大家好&#xff0c;我是欧阳瑞&#xff08;Rich Own&#xff09;。今天想和大家聊聊微服务架构以及如何使用Docker和Kubernetes进行部署。作为一个全栈开发者&#xff0c;我经历过单体应用到微服务的转型&#xff0c;深刻体…...

Java集成Gemma大模型:本地推理与生产部署实战指南

1. 项目概述&#xff1a;当Gemma遇上Java 最近在开源社区里&#xff0c;一个名为 mukel/gemma4.java 的项目引起了我的注意。光看这个标题&#xff0c;熟悉AI模型和Java生态的朋友可能已经会心一笑。没错&#xff0c;这个项目直指一个核心痛点&#xff1a;如何让Google最新推…...

基于Vue 3与Express的私有化ChatGPT Web客户端部署指南

1. 项目概述与核心价值最近在折腾一个自用的AI对话工具&#xff0c;核心需求很简单&#xff1a;想在一个自己完全掌控的界面上&#xff0c;方便地使用大语言模型&#xff0c;比如ChatGPT的API。市面上虽然有很多现成的网页应用&#xff0c;但要么功能太臃肿&#xff0c;要么部署…...

用PTA题库学C语言:手把手教你拆解‘选择与循环’的嵌套逻辑

用PTA题库学C语言&#xff1a;手把手教你拆解‘选择与循环’的嵌套逻辑 学习C语言时&#xff0c;最让初学者头疼的莫过于那些层层嵌套的选择结构和循环结构。面对一堆if-else和for/while语句&#xff0c;很多人会感到无从下手。本文将通过PTA题库中的典型题目&#xff0c;教你一…...

Linux终端美化:cmatrix屏保的安装与个性化配置指南

1. 初识cmatrix&#xff1a;从黑客帝国到你的终端 第一次看到cmatrix运行效果时&#xff0c;我正窝在咖啡馆调试服务器。黑色背景上不断下落的绿色字符&#xff0c;瞬间让我想起《黑客帝国》里尼奥看到的数字雨。这个诞生于2002年的开源项目&#xff0c;最初只是开发者Chris Al…...

AI建站+全链路运营,让你一个人活成一个团队

AI建站全链路运营&#xff0c;让你一个人活成一个团队去年这个时候&#xff0c;我为了搞独立站&#xff0c;头发掉了不少。那时候我觉得&#xff0c;只要网站做得漂亮&#xff0c;订单就会像雪花一样飞来。结果呢&#xff1f;网站是上线了&#xff0c;但支付接不通&#xff0c;…...

【Unity 2D实战】巧用Cinemachine Confiner:告别穿帮镜头,实现精准地图边界限制

1. 为什么需要地图边界限制&#xff1f; 在2D游戏开发中&#xff0c;摄像机跟随角色移动是最基础的功能之一。但很多新手开发者都会遇到一个尴尬的问题&#xff1a;当角色走到地图边缘时&#xff0c;摄像机依然会继续移动&#xff0c;导致玩家看到地图之外的空白区域或者未设计…...