原生JS以后也支持类型注解意义

目录
  • 引言
  • 为什么需要原生类型注解?
  • 和TS的关系
  • 对开发者意味着什么
  • 总结

引言

在布达佩斯2022 JSConf会议上,tc39(ES标准委员会)成员Gil Tayar介绍了一份当前仍处于stage 1阶段的提案 —— Type Annotations,意在让原生JS支持类型注解。

换句话说,如果提案通过,很多.ts文件将后缀改为.js后就能直接在浏览器中运行。

一份tc39提案通常会经历5个阶段:

  • stage 0:被提出
  • stage 1:接受审议
  • stage 2:规范基本完成
  • stage 3:等待被实现
  • stage 4:纳入语言标准中

所以Type Annotations当前仍处于接受审议的状态。

但是提案发起者Gil Tayar对这份提案的通过很有信心,本文我们来聊聊这份提案的相关内容。

为什么需要原生类型注解?

根据20年、21年state of JS的统计,静态类型高票当选JS中当前最欠缺的功能

同时,在Github报告中,TS被列为第四大最常用的语言

所以,对前端工程师来说,类型注解需求很大。

那么,既然已经有了TS,为什么还需要原生JS支持类型注解呢?

通常来说,从开发者编写的源代码线上生产环境代码间需要经过代码编译

代码编译主要包括两个步骤:

  • 降级编译(包括高级语法转换为低级语法,高级方法的polyfill
  • 代码转译(比如压缩、混淆、tree-shaking、类型擦除)

所谓类型擦除,是指擦除代码中的类型注解,让其变成符合原生JS规范的代码,比如:

// 擦除前
function add(a: number, b: number): number {
  return a + b;
}
// 擦除后
function add(a, b) {
  return a + b;
}

随着时间的推移,各主流浏览器兼容性越来越好,步骤1在可预见的未来重要性会逐渐降低。

对于TS开发者,从源代码线上生产环境代码间可能只需要类型擦除

如果原生JS支持类型注解,就能省去类型擦除对应的编译流程,让代码更容易在宿主环境执行。

和TS的关系

这份提案的目的,并不是另起炉灶,独立实现一套原生JS的类型注解。而是与TS团队合作,提出一套合适的规范。

新的规范与TS规范的关系类似下图:

一方面,Type Annotations提案从TS中借鉴了很多特性,这就是图中相交的部分。

你可以到grammar-conventions看到规范当前定义的类型

另一方面,TS迭代速度很快,新的特性产出很快。而Type Annotations作为JS语言的一部分,迭代会更加保守,所以TS中一些特性在Type Annotations中并不支持。

此外,TS中一些结构(比如EnumsNamespaces)存在运行时的语义,Type Annotations也不会支持。

这些就是TS中存在,而Type Annotations中不存在的部分。

最后,Type Annotations设计的初衷并不是与TS强绑定,而仅仅是提供一套类型规范,开发者编写代码时的类型检查还是由各种类型检查器(比如TSFlow)实现。

所以,Type Annotations还有一部分特性是TS当前未定义的,这也是为了规范更广泛的适用性考虑的,也就是图中Type Annotations存在,而TS不存在的部分。

这部分特性需要TS后续实现,这也是为什么Type Annotations要与TS团队合作的一大原因。

对开发者意味着什么

如果Type Annotations最终出现在ES20xx版中,届时开发者编写代码的步骤是:

  • 选择合适的类型检查器(比如TS),这个类型检查器需要完全遵循Type Annotations规范(而不是自己的规范,比如TS规范)
  • 编写带类型声明的原生JS代码
  • 类型检查器会检查类型错误,并给予报错或提示

对于如下原生JS代码,如果开发者传入了错误的类型,JS会报错么?

function add(a: number, b: number): number {
  return a + b;
}
// 错误的类型传参
add('KaSong', 123);

答案是:不会。

Type Annotations仅仅是一套规范,该规范由各种类型检查器执行。

JS的宿主环境(比如浏览器)在执行带类型声明的JS代码时,会忽略类型声明。

总结

有同学可能会问:就为了减少编译时类型擦除这一步,就提出原生类型规范,有必要么?

甚至当Type Annotations落地后,开发者上线前在进行代码压缩时,类型擦除也会作为代码压缩的职责之一。

从这个角度看,甚至没有减少编译时的工作量。

所以提出原生的类型规范,有必要么?

前端的发展实际是一个努力去编译时流程的过程。

比如,编译时代码需要降级,需要polyfill?随着IE11停止服务,主流浏览器纷纷跟进标准落地,降级与polyfill的需求逐渐变少。

再比如,代码需要打包?随着ESM规范落地,在当前,至少在开发环境中代码已经不需要打包(使用Vite)。

Type Annotations的出现,就是遵循努力去编译时流程这一趋势的产物。

从这个角度看,还是很有必要的。

以上就是原生JS以后也支持类型注解意义的详细内容,更多关于原生JS支持类型注解的资料请关注我们其它相关文章!

(0)

相关推荐

  • 如何利用原生JS实现图片预览加上传(前后端交互)

    目录 前言 效果大致如下 前端代码 后端代码 总结 前言 最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件,就好奇了一下下,于是萌生了一个自己手写一个图片上传的组件的想法,您猜怎么着,还真给我实现了,那今天就和大家分享一下,大家有兴趣的可以了解一下啦,写进项目中可能会是个加分点哦!! 我们知道文件上传是需要前后端交互的,所以我这边给出前后端代码. 文件上传大致分为以下几个步骤 前端文件选择上传的文件类型 拿到文件信息 将选择的文件(视频或图片)在前端页面预览出来 将文件

  • 使用原生JS获取select元素选中的value和text值

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>select元素</title> </head> <body id="bodyform"> &l

  • 原生js实现下拉刷新和上拉加载更多

    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)

  • 基于原生JS实现分页效果的示例代码

    这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o

  • 7个你应该知道的JS原生错误类型

    概述 从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误.本文的重点是概述我们在js开发过程中可能遇到的错误类型. 提示:良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别.在编写可重用的代码时,请确保自己在编写清晰易懂的错误处理代码. 1. RangeError 当数字超出允许的值范围时,将会抛出此错误. 例如 const l = console.logconst arr = [90,88] arr.length=90**99 我们有一个数组,带有两个元素的

  • 原生JS以后也支持类型注解意义

    目录 引言 为什么需要原生类型注解? 和TS的关系 对开发者意味着什么 总结 引言 在布达佩斯2022 JSConf会议上,tc39(ES标准委员会)成员Gil Tayar介绍了一份当前仍处于stage 1阶段的提案 —— Type Annotations,意在让原生JS支持类型注解. 换句话说,如果提案通过,很多.ts文件将后缀改为.js后就能直接在浏览器中运行. 一份tc39提案通常会经历5个阶段: stage 0:被提出 stage 1:接受审议 stage 2:规范基本完成 stage

  • 原生js实现手风琴功能(支持横纵向调用)

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q

  • 原生js实现下拉框功能(支持键盘事件)

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时-多种格式调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&qu

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'

  • 原生JS查找元素的方法(推荐)

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func

  • 原生JS实现几个常用DOM操作API实例

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o

  • 原生JS封装Ajax插件(同域、jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

  • 原生js仿jquery animate动画效果

    jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    js的 bug 类型:  Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1.  document.getElementById('test1').style.display='none' 2.  document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

随机推荐