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

CilckHouse创建表

一、引擎 一开始没注意有引擎选择&#xff0c;要用什么引擎去官方文档看看自己建的表适合什么引擎&#xff0c;大部分用MergeTree 二、用sql语句生成表 1、MergeTree引擎 原文地址&#xff1a;https://blog.csdn.net/qq_21383435/article/details/122812921?ops_request_misc%…...

高级运维学习(八)Ceph 概述与部署

ceph概述 ceph可以实现的存储方式&#xff1a; 块存储&#xff1a;提供像普通硬盘一样的存储&#xff0c;为使用者提供“硬盘”文件系统存储&#xff1a;类似于NFS的共享方式&#xff0c;为使用者提供共享文件夹对象存储&#xff1a;像百度云盘一样&#xff0c;需要使用单独的客…...

【图像处理】VS编译opencv源码,并调用编译生成的库

背景 有些时候我们需要修改opencv相关源码&#xff0c; 这里介绍怎么编译修改并调用修改后的库文件。 步骤 1、下载相关源码工具&#xff1a; 下载opencv4.8源码并解压 https://down.chinaz.com/soft/40730.htm 下载VS2019&#xff0c;社区版免费 https://visualstudio.micro…...

STM32 EtherCAT 总线型(1 拖 4)步进电机解决方案

第 1 章 概述  技术特点  支持标准 100M/s 带宽全双工 EtherCAT 总线网络接口及 CoE 通信协议一 进一出&#xff08;RJ45 接口&#xff09;&#xff0c;支持多组动态 PDO 分组和对象字典的自动映射&#xff0c;支持站 号 ID 的自动设置与保存&#xff0c;支持 SDO 的…...

Postman应用——测试脚本Test Script

文章目录 Test Script脚本CollectionFolderRequest 解析响应体断言测试 测试脚本可以在Collection、Folder和Request的Pre-request script 和 Test script中编写&#xff0c;测试脚本可以检测请求响应的各个方面&#xff0c;包括正文、状态代码、头、cookie、响应时间等&#x…...

JS的网络状态以及强网弱网详解

文章目录 1. online 和 offline 事件2. navigator.onLine2.1 什么是 navigator.connection&#xff1f;2.2 如何使用 navigator.connection&#xff1f;2.3 总结 1. online 和 offline 事件 online 和 offline 事件是浏览器自带的两个事件&#xff0c;可以通过添加事件监听器来…...

大数据-kafka学习笔记

Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列&#xff08;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域。 Kafka可以用作Flink应用程序的数据源。Flink可以轻松地从一个或多个Kafka主题中消费数据流。这意味着您可以使用Kafka来捕获和传输…...

详述RPA项目管理流程,RPA项目管理流程是什么?

RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;是一种通过软件机器人模拟人类在计算机上执行重复性任务的技术。RPA可以帮助企业提高工作效率、降低成本、减少错误并提高客户满意度。然而&#xff0c;为了确保RPA项目的成功实施&#xff…...

爬虫 — Js 逆向

目录 一、概念1、爬虫2、反爬虫3、加密解密4、加密5、步骤 二、常用加密方式1、加密方式2、常见加密算法3、JS 中常见的算法4、MD5 算法4.1、MD5 加密网站4.2、特点 5、DES/AES 算法6、RSA 算法7、base64 算法 三、环境配置1、node.js 环境配置2、PyCharm 环境配置 一、概念 1…...

Python 网络爬取的时候使用那种框架

尽管现代的网站多采取前后端分离的方式进行开发了&#xff0c;但是对直接 API 的调用我们通常会有 token 的限制和可以调用频率的限制。 因此&#xff0c;在一些特定的网站上&#xff0c;我们可能还是需要使用网络爬虫的方式获得已经返回的 JSON 数据结构&#xff0c;甚至是处理…...

wordpress做产品页教程/网络推广网站电话

注&#xff1a;如果没有 root 权限也是可以试试&#xff0c;一般情况下&#xff0c;都需要 root 权限&#xff0c;才能连接成功。1.需要确保你的开发 PC 和 Android 手机都连上了 wifi 并处于同一网段下&#xff1b;2.开启 usb 调试&#xff0c;且用 usb 将 Android 设备连接到…...

网站建设2000字论文/收录优美图片找不到了

开发过程中&#xff0c;中文乱码的问题&#xff0c;一直都是一个老生常谈的问题困扰这开发人员。 1. 通过后台解决 public String youMethodName(HttpServletRequest req,...){String yourParam req.getParameter("paramName");Matcher m Pattern.compile("…...

装修网站建设/百度网站快速优化

https://community.fs.com/blog/do-you-know-the-differences-between-hubs-switches-and-routers.html 介绍hub&#xff0c;switch&#xff0c;router&#xff0c;有动图&#xff0c;很形象 http://blog.csdn.net/wuruixn/article/details/8350773 介绍交换机和路由器 http://…...

专业网站建设首选公司/网络运营具体做什么

http://blog.csdn.net/0210/article/details/5437368 http://blog.csdn.net/vebasan/article/details/5515235 ifconfig 如果不能用&#xff0c;就用/sbin/ifconfig ifconfig -a 所有的网卡情况 ifconfig 就会出现当前正在使用的网卡的情况&#xff0c; eth0 eth0:0 //和上…...

长沙协会网站设计专业服务/郑州靠谱seo整站优化

/*下列题目考查关系运算的相关概念(1)关系运算包含五种基本的运算&#xff0c; 即不能由其他基本运算推导出来的运算。 则下列说法不正确的是_____。(A)基本运算有&#xff1a;并、交、笛卡尔积、选择、投影;(B)基本运算有&#xff1a;并、差、笛卡尔积、选择、联结;(C)基本运算…...

powered by wordpress/云南今日头条新闻

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于java的外卖点菜系统&#xff0c;管理员通过后台添加菜品&#xff0c;用户浏览器登录&#xff0c;查看菜品、购买、下单等。根据需求&#xff0c;本系统采用的是BS&#xff08;Browser Server简称浏览器服…...