详解Anyscript开发指南绕过typescript类型检查


Posted in Javascript onSeptember 23, 2022

前言

随着越来越多的前端项目采用 typescript 来开发,越来越多前端开发者会接触、使用这门语言。它是前端项目工程化的一个重要帮手,结合 vscode 编辑器,给予了前端开发者更严谨、高效的编码体验。但同时,严格的类型检查也会使部分开发者的编码效率有所降低,将时间花费在解决类型冲突、类型不匹配上,从而导致望而却步,迟迟不敢上手。

本文描述了几种绕过 typescript 类型检查的方法,帮助ts开发者在遇上第三方库类型声明有误、上线时间紧张却还被ts类型耽搁开发进度、以及其他奇奇怪怪ts类型声明的场景时,能够快速摆脱ts类型检测,保障项目尽快上线。

注意,本文所提到的方法,只能作为一种最后不得已的hack手段,其目的是为了尽快完成需求而非代码取巧,读者不应该将其当成一种常用的写法并在项目内任意使用!

场景设定

假设存在一个第三方库,允许开发者通过 json 定义一个表单,其 typescript 类型定义如下:

interface FormItem{
    /** 表单类型 */
    type:string
    /** 显示文本 */
    label:string
}
interface FormSelectItem extends FormItem{  
    /** 将表单类型指定为'select' */
    type:'select'
    /** 新增一个options属性,类型为数组,此类型定义存在错误,没有定义options数组里面的内容 */
    options:[]
}
type FormRule = (FormSelectItem|FormItem)[]

代码里,FormSelectItem.options期望的是一个有内容的数组,但因为第三方库给定的类型文件编写错误,没有给出数组内部项的结构,只留下[]空数组类型定义,导致开发者给FormSelectItem.options赋予一个有内容的数组都会导致 typescript 报错。

详解Anyscript开发指南绕过typescript类型检查

解决方法

注释忽略

//@ts-ignore会让typescript编译器跳过注释下一行代码,不对其进行类型检查。通过不检查类型的方式,绕过类型检查

//@ts-ignore
window.aaaa = "使用示例(ts里不允许通过此行代码往全局对象挂载属性)"

场景用例

详解Anyscript开发指南绕过typescript类型检查

加上//@ts-ignoreoptions属性之上,编译器跳过了options属性的检查,因此报错消失。使用起来十分简单快捷,但是加了注释忽略之后,开发者为options赋予任何值都是合法的,如非数组的对象、null、undefined等容易引起程序出错的类型。同时加了//@ts-ignore之后,编辑器无法再对此行进行代码提示和自动补全。

类型断言

类型断言是typescript中一种将一个类型指定为另一个类型的语法。通过指定任意类型为目标类型的方式,达到编译器不报错的效果。

(window as unknown as {aaa:string}).aaa = "使用示例(ts里不允许通过此行代码往全局对象挂载属性)"

场景用例

详解Anyscript开发指南绕过typescript类型检查

上图使用了断言语法,且用到两种断言方式:

  • 第一种写法是给赋值数据下断言,将数据类型强制断言为定义类型,即在上图中,将{label:string,value:string}[]断言为[],使得能够与options 的类型匹配上。在属性赋值中只能使用此种断言写法。
  • 第二种写法是反过来,通过将定义类型强制断言为数据类型,即在上图中,将[]断言为{label:string,value:string}[],使得select.options能够按照开发者的数据类型进行工作。并且通过此种方式,对select.options进行操作时,编辑器还会根据开发者的断言类型进行语法提示。

相比注释忽略,类型断言原本就是typescript语法的一部分,本身就会接受类型检查,因此后续的代码补全提示功能是完整的。但同时开发者主观上应当明白类型断言的作用,避免将不正确的数据类型传入导致代码出错。

泛型转换

泛型是typescript最强大的功能,它提供给了开发者们对类型“编程”的能力。通过定义泛型辅助函数,在类型断言的基础上,利用函数返回泛型的手段,巧妙地将类型匹配上,从而达到缩小代码量且编译器不报错的效果。

function _any<T>(obj:any):T{
    return obj as unknown as T
}
_any<{aaa:string}>(window).aaa='使用示例(ts里不允许通过此行代码往全局对象挂载属性)'

实际上,辅助函数也只是将参数当作是返回值而已,只不过利用泛型可以指定为任意类型。

甚至可以设置两个泛型:一个是目标泛型,也就是函数要返回的数据类型,一个是参数泛型,也就是传入的数据类型。当显式地赋予泛型P一个类型时,typescript可以为参数提供类型检查和语法补全。

function _any<T,P=any>(obj:P):T{
    return obj as unknown as T
}
const select:FormSelectItem = {
    type:'select',
    options:_any<[],{label:string,value:string}[]>([{
        label:'',
        value:''
    }])
}
_any<{label:string,value:string}[]>(select.options).push({
    label:'',
    value:''
})

场景用例

详解Anyscript开发指南绕过typescript类型检查

相比类型断言,使用泛型转换辅助函数的做法最大的作用,是简化了as unknow as xxx的写法,本质上还是一样的。开发者同样需要明白转类型的作用,避免使用错误的类型导致代码错误。

总结

遇上类型对不上,项目又急着上线,缺乏足够的时间跟typescript编译器慢慢折腾的情况下,可以酌情使用注释忽略、类型断言、泛型转换的方法来强行指定类型。

其中注释忽略是利用编译器跳过的方式,停止类型检查,带来的后果就是该行其他数据无法获得类型校验;

类型断言、泛型转换都通过断言的语法,强行指定类型,使类型对应上,进而通过编译;

而泛型转换是利用辅助函数的写法,来减少断言代码的编写。

但这三种方式都存在风险,开发者都需要明白赋予的数据类型的含义,避免数据错误导致代码出错。

以上就是详解Anyscript开发指南绕过typescript类型检查的详细内容,更多关于Anyscript绕过typescript类型检查的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
TS 类型兼容教程示例详解
Sep 23 #Javascript
TS 类型收窄教程示例详解
Sep 23 #Javascript
JavaScript实现简单的音乐播放器
Aug 14 #Javascript
vue实现简易音乐播放器
Aug 14 #Vue.js
Vue3实现简易音乐播放器组件
Aug 14 #Vue.js
element tree树形组件回显数据问题解决
Aug 14 #Javascript
You might like
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python简单实现基数排序算法
2015/05/16 Python
Python 序列的方法总结
2016/10/18 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
留学自荐信的技巧
2013/10/17 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
英语老师推荐信
2014/02/26 职场文书
党支部承诺书范文
2014/03/28 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
付款承诺函范文
2015/01/21 职场文书
邀请函的格式
2015/01/30 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
员工离职证明范本
2015/06/12 职场文书
学校少先队工作总结
2015/08/12 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Python 中面向接口编程
2022/05/20 Python