typescript
文章平均质量分 62
业火之理
这个作者很懒,什么都没留下…
展开
-
【typescript】推断字面量联合类型的几种方式
为了更好的开发体验,很多时候我们会将string转换为字面量联合类型。而被转换的对象通常也不是写死的,需要进行推断,而没有技巧去做推断很容易又推断出string类型,本文提供几个示例便于触类旁通。原创 2022-09-07 11:06:59 · 585 阅读 · 0 评论 -
【stencil】stencil快速上手
官网https://stenciljs.com/docs/api初始项目pnpm init stencil选择component安装完毕后启动npm run start页面出现helloworld即可。新增组件使用npm run generate命令生成组件。注意!组件名要带着-往里面加个btn/* * @Author: yehuozhili * @Date: 2022-04-11 22:53:51 * @LastEditors: yehuozhili *原创 2022-04-12 00:59:09 · 1241 阅读 · 0 评论 -
【typescript】依赖注入与反射框架实现原理
前言最近感觉自己水平再度上升,研究起了依赖注入与反射框架。后来了解了原理后感觉不过如此。。于是又跑到另一个问题上,这玩意到底是解决啥问题的?啥时候适合去使用?反射框架反射框架和依赖注入并不是一回事,虽然他们喜欢一起使用。这个思想貌似起源于java,因为java可以通过注解+反射去拿类上的方法之类。一般js里是结合装饰器去使用,通过装饰器给类标记,另一边运行时去收集标签,在适当时候去处理对应内容。装饰器主要还是靠reflect-metadata,这个库在Reflect上加上了几个api,其一原创 2021-04-26 22:59:40 · 1644 阅读 · 2 评论 -
【React】如何用优雅的方法写connect?
前言我在使用taro脚手架时,选择react+redux+ts模板时,会拉到一个写着装饰器connect的模板,事实上用该模板在那页会看到@connect那里完全报错,并没有很好的解决这个问题,那么如何优雅的写connect呢?对此我查阅了些资料。万能ANY我们先讨论如何才能不报错,最简单的写法当然是利用any了。方案1装饰器后使用any解决:@(connect(mapStateToProps,mapDispatchToProps) as any)方案2利用require进来原创 2021-04-24 20:47:40 · 680 阅读 · 0 评论 -
【vue】taro-vue+ts开发小程序快速上手
前言最近有个小程序项目需要用taro-vue+ts来开发,用的是vue2,正好总结一下。项目入口微信开发者工具里的编译旁边可以选择入口,要能出现在那需要配置project.config.json和project.priviate.config.json字段:"miniprogram": { "list": [ { "name": "pages/testhello/index", "pathName": "pages/test原创 2021-04-20 17:59:36 · 1175 阅读 · 4 评论 -
【typescript】tsdx入门
前言最近浏览别人库时发现别人使用tsdx打包typescript,这个库确实挺有优势的,解决了ts打包成库的一些配置设置问题。另外,还非常方便的整合了example和watch,文档,三位一体,相当方便。今天来玩玩这个包。官网https://www.npmjs.com/package/tsdxhttps://tsdx.io/#quick-start安装首先创建项目,使用:npx tsdx create mylib然后有3个选项,basic,react,react-with原创 2021-03-12 11:43:13 · 3280 阅读 · 2 评论 -
【typescript】断言签名与谓词签名!详解ts中神奇的asserts与is
前言最初发现有这玩意是在styledcomponents的声明中,很神奇的写了个is。后来翻阅官方文档后发现,除了is是谓词签名外,还有assert断言签名。官方文档对于这种东西讲解,最好的方法就是先甩个官方文档。文档:https://www.typescriptlang.org/docs/handbook/release-notes/overview.html看一下官方给的例子:function yell(str) { assert(typeof str === "string"原创 2020-10-09 01:40:59 · 5904 阅读 · 2 评论 -
【typescript】js装饰器与ts装饰器梳理
前言本篇梳理ts装饰器,装饰器很多文章里都有讲,不过很多文章少讲漏讲现象很多,先总结第一波,因为我暂时没理解透,结合nest还有很多地方有点问题,如果照nest写法,有些实现应该报错才对。这篇差点把我写吐了,一开始还想写,写后面越来越不想写。聊一下JS装饰器为了有更好的学习效果,我们可以比较一下js装饰器,实际上,js装饰器和ts装饰器并不兼容,而且js装饰器曾有过大变动,这些在我百度的资料里都没有找到,都是我去github上翻到的。js装饰器曾经有巨大改版,主要是在2个方面:第一个方面是多原创 2020-09-14 22:18:53 · 1407 阅读 · 0 评论 -
【typescript】ts协变逆变双向协变高级用法
前言本篇主要说一下协变逆变与双向协变的概念与高级用法对于部分干货文章,决定采用粉丝可见,反正也是白嫖不花钱。协变逆变以前初学ts感觉协变与逆变是个很复杂的东西,最近重新复习了下发现尼玛,其实就是参数可以接受比其定义的类型更宽广的类型,而返回值可以接受比其定义的类型更狭窄的类型。这里狭窄和宽广意思就是比限定的属性多还是少。比如我们做组件库时,参数会限定个比各种可能都宽广的类型,最宽广的类型自然是any了。而函数的返回值则会比限定更狭窄类型,返回值情况用的较少,一般都是明确返回值类型与其相等。可原创 2020-09-13 22:57:18 · 2352 阅读 · 4 评论 -
【typescript】infer的理解与使用
前言以前一直不会用infer,要么直接就是returnType,压根不需要用infer,网上那些教程只给示例不给具体场景就无法让人很好理解这玩意,并且很好原创 2020-08-28 07:45:43 · 4886 阅读 · 0 评论 -
【Typescript】探究为什么TS对EventTarget类型判断的比较大?
前言一般写addEventListener,我们的listener都会收到一个事件对象,而这个事件对象的类型TS却认为是Event类型,而其target判断为EventTarget类型,给的类型比较大,往往都需要我们进行断言,为什么不好判断?难道真的有意料之外的结果?特别是一些我们感觉很确定的东西,比如MouseEvent,是click后的事件,不管屏幕上怎么点击,点的怎么看都是个HTMLElement,难道还会有别的东西?Event EventTarget Node Document HTMLE原创 2020-05-28 12:54:42 · 11149 阅读 · 2 评论 -
【Typescript】cra使用storybook并支持typescript的几个坑
前言storybook现在已经升到5了,在配置时有几个坑记录下。安装部分的坑按官方说明,配合cra安装storybook使用命令:npx -p @storybook/cli sb init --type react_scripts这个自动安装会去拉脚本,然后使用npm去装依赖然后改配置。如果,之前有使用cnpm安装的包,npm会去尝试删掉他们,这样就会出各种找不到包的报错。最合适的做法就是在装storybook之前,别使用cnpm安装任何包,全部npm进行安装。这样确保没有各种奇怪原创 2020-05-10 23:27:24 · 1326 阅读 · 10 评论 -
【React】前后端手写分片上传秒传与断点续传
前言上传一般都用别人写好的。自己实现遍比较有意思,同时理解更透彻。流程一、制作基本样式首先,需要做出个上传的基本样式。由于原生的上传文件样式太丑。所以需要自己额外写个div,放个图标上去来替代原生样式:function SpliceUpload(){ const fileRef = useRef<HTMLInputElement>(null) con...原创 2020-03-29 14:54:21 · 3188 阅读 · 1 评论 -
【React】手写地区级联选择组件
前言级联选择不少组件都有,但是如果是选地区,大部分的组件需要提供的数据就变得要求数据带children以获得下级选项。如果不能复制粘贴,那还不如自己写个地区级联选择组件。数据我在网上翻到一个数据接口提供的中国省市区数据接口地址。这个接口地址的数据就是key value下来,毫无children分级。此次就以这个接口为例制作。思路一开始制作这个的思路是懵逼的,因为难点还是比较...原创 2020-03-24 13:40:04 · 2539 阅读 · 3 评论 -
【typescript】eslint代码风格工具入门配置
前言我在网上翻到TSLint不维护了,eslint里这么写的:The ESLint team will no longer be maintaining typescript-eslint-parserThe repository will be archived as of todayThere will be no further releases of typescript-es...原创 2020-03-13 05:49:44 · 4430 阅读 · 1 评论 -
【typescript】interface里面用new表示什么类型
前言今天群里一个人问了个ts问题,说类型不正确,我一看,他的interface里面用了new,一般写ts很少有interface里写new的,interface里写new的一般都是在d.ts里写的。答案我翻了ts文档,其中有句是这么说的:The function signature is prefixed with the keyword ‘new’ indicating that t...原创 2020-03-08 02:33:33 · 6829 阅读 · 3 评论 -
【React】滚动性能优化——惰性加载的几种方式
前言惰性加载是一种优化手段,也可以看作是懒加载。这段时间我在写个项目,然后遇到滚动性能优化的问题,还踩了些坑,特此记录下。需求有个长列表,数据是后端发来渲染出来的,这个列表如果特别长,要么做分页,要么做无限滚动。无限滚动下,我们希望某些静态资源(比如图片),只有用户向下滚动,它们进入视口时才加载,这样可以节省带宽,提高网页性能。(这句阮一峰博客原文)。我这次踩坑总结了3种方法...原创 2020-03-06 01:57:54 · 1563 阅读 · 4 评论 -
【typescript】配置ts-import-plugin按需加载antd导致Inline JavaScript报错解决方案(非网上常见2种)
场景复现为了按需引入,于是我引用了ts-import-plugin,当时这么配置的: { test: /\.(j|t)sx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { transpileOnly: true, getCustom...原创 2020-02-22 02:36:38 · 6927 阅读 · 3 评论 -
【typescript】redux-thunk中间件派发函数导致connect类型报错解决方案
场景复现由于使用redux-thunk,所以action是允许派发函数的。但是写个action函数后做成mapDispatchToProps传给组件后,connect检测类型产生报错,报错如下:function Profile(props: React.PropsWithChildren<RouteComponentProps<{}, StaticContext, Histor...原创 2020-02-21 08:54:18 · 2188 阅读 · 4 评论 -
【typescript】express结合ts制作注册登录接口
前言记录下ts实现后端接口的操作。安装先进目录初始化,然后安装依赖cnpm i express mongoose body-parser bcryptjs jsonwebtoken morgan cors validator helmet dotenv multer http-status-codes -Scnpm i typescript @types/node @types...原创 2020-02-15 10:28:37 · 2372 阅读 · 0 评论 -
【typescript】用ts一步步重构简易axios(带思考)
背景typescript写法比较麻烦,开发库的时候效果特别棒,对于各种逻辑组合而产生的结果可以进行有效预测,让写出来的库更好用。同时用ts书写也方便大家对于这个库使用的理解。此次从手写axios入手,一步步实现。准备工作为了方便,直接使用react的ts脚手架,没安装的可以安装下npm i create-react-app -g,然后create-react-app 项目名 --ty...原创 2019-11-15 18:55:08 · 3717 阅读 · 0 评论