随笔分类 -  typescript

摘要:前言 本文主要记录个人在使用 typescript 时的一些用法,介绍 typescript 。建议在阅读前先了解 typescript 的基础语法。 互斥键的类型 在 ts 官网的联合类型文档中有这样一种情况: type Shape = | { kind: "circle"; radius: nu 阅读全文
posted @ 2024-07-03 19:44 Grewer 阅读(22) 评论(0) 推荐(0) 编辑
摘要:前言 在富文本编辑器场景中, 表格是一种不可忽视的功能, 但是在当前 quill.js 的正式版本(1.x)中, 却不支持此功能 所以本文承接上文 链接, 来讲述下 quill.js 升级到 2.x 的问题以及添加表格功能 为什么需要升级 在目前的 1.x 版本中并不支持表格的元素, 而我们想要这个 阅读全文
posted @ 2022-11-03 01:11 Grewer 阅读(4227) 评论(0) 推荐(0) 编辑
摘要:前言 在前端开发中, 富文本是一种常见的业务场景, 而本文要讲的就是富文本框架 quill.js 中的自定义工具栏的开发 介绍 Quill.js 是一个具有跨平台和跨浏览器支持的富文本编辑器。凭借其可扩展架构和富有表现力的 API,可以完全自定义它以满足个性化的需求。由于其模块化架构和富有表现力的 阅读全文
posted @ 2022-09-30 00:43 Grewer 阅读(6488) 评论(0) 推荐(0) 编辑
摘要:位置 首先我们要知道 loader 插件是写在哪里的 打开 webpack.config.js 文件, 在 module.rules 中加入我们的自定义 loader: { test: /.ts$/, use: [ { loader: path.resolve(__dirname,'./build/ 阅读全文
posted @ 2020-11-24 00:29 Grewer 阅读(132) 评论(0) 推荐(0) 编辑
摘要:接口的创建 可以使用 type 和 interface 来创建类型 type 特有的优点: 1. 声明基本类型别名,联合类型,元组等类型 2. 可使用 typeof 获取实例的类型赋值 interface 特有的优点 interface 能够声明合并 关于对象 获取对象 以IFoo作为例子 获取接口 阅读全文
posted @ 2020-02-18 21:03 Grewer 阅读(857) 评论(0) 推荐(0) 编辑
摘要:最近找了一些文档的生成工具,结果发现了这个 可以通过注释,自动生成对应的文档,对于 react 库来说十分方便 安装 typescript 支持 配置 这次的例子是使用 cra 来创建的项目,还有其他项目也是支持的 "点击参考" 在根文件夹下创建 文件 可以使用如下的配置 更加具体的配置项可以 "点 阅读全文
posted @ 2020-01-08 18:02 Grewer 阅读(2490) 评论(3) 推荐(0) 编辑
摘要:关于 mobX 在 react 16.8.0 以上的用法 以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; const Hooks = observer(() => { const todo = useLo 阅读全文
posted @ 2020-01-01 17:52 Grewer 阅读(6602) 评论(0) 推荐(2) 编辑
摘要:说实话,作为前端来说,单元测试,并不是一种必须的技能,但是确实一种可以让你加法的技能 之前我一个库添加了单元测试,加完之后感悟颇深,所以写下这篇文章来记录 环境搭建 一般来说,普通的库,如果没有添加 babel 的话,在 test 里面,也是不能使用 es6 的语法的 总结来说 test 文件的兼容 阅读全文
posted @ 2019-12-31 17:11 Grewer 阅读(1449) 评论(0) 推荐(0) 编辑
摘要:针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 github 链接 "redux react hook" 一个简单的使用例子: 使用方法和以前一致 二.使用 use 阅读全文
posted @ 2019-06-05 17:31 Grewer 阅读(2846) 评论(0) 推荐(0) 编辑
摘要:本文所有东西尽可在 typescript 官网文档寻找,但是深浅不一 高级类型 lib 库中的五个高级类型 以下所有例子皆以 person 为例 Partial 源码: 实例: Required 源码: 实例: Readonly 源码: 实例: Pick 源码: 实例: Record 源码: 实例: 阅读全文
posted @ 2019-06-04 15:16 Grewer 阅读(11385) 评论(0) 推荐(0) 编辑
摘要:useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: 区别在于第一个参数,还有参数的传递,另外 useCallback 中 DependencyList 是一个必须值 这两个 api 的作用基本就是缓存数据/方法 使用过 react 的人都知道,在组 阅读全文
posted @ 2019-04-14 21:24 Grewer 阅读(934) 评论(0) 推荐(0) 编辑
摘要:useState 经典案例: 此例子中, 是最新的 hooks api; 语法: 其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值 useState initialState 该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了 ( 阅读全文
posted @ 2019-04-07 15:22 Grewer 阅读(14018) 评论(0) 推荐(3) 编辑
摘要:基础配置: 1. 准备一个使用 vue cli 生成的项目 2. 使用 npm 一建安装基础配置 3. 修改配置文件 3.1 文件 bulid/webpack.base.conf.js 3.2 在 src 下新建文件 ,用于识别单文件vue内的ts代码 3.3 修改 main.js 后缀为 main 阅读全文
posted @ 2018-06-16 18:23 Grewer 阅读(653) 评论(0) 推荐(0) 编辑
摘要:最近经历了一波辞职,找工作,搬家这样一个过程,所以没有空写博客,现在稳定了下来,写一下过年时写过的一些东西; 这次要写的是一个颜色选择器,也许很多人都认为是不需要的,因为有h5的 api 提供类似的功能,但是作为一个探索者,怎么能不直接实现一个呢 1. 首先是样式的编写 关于样式方面我仿照的是 el 阅读全文
posted @ 2018-03-26 17:51 Grewer 阅读(815) 评论(0) 推荐(0) 编辑
摘要:前言:之前在网上看到了这个效果,之后我在做项目的时候,正好将他放进了项目里面,这篇博客就介绍一下该效果的原理; 1.首先是基础的设置 canvas 的大小是占据整个屏幕; 2.绘出字 typescript const str: string = '404'; ctx.textBaseline = ' 阅读全文
posted @ 2018-01-30 21:17 Grewer 阅读(285) 评论(0) 推荐(0) 编辑
摘要:前言:之前做过一个 snow 效果,但是是直接用 HTML 做的 点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下, snow效果是一个很简单的效果,但是用来练手还是不错的; 首先创建基本变量: 在获取 canvas 的 dom 时可能后报错,所以要用断言或者 这 阅读全文
posted @ 2018-01-14 16:39 Grewer 阅读(2041) 评论(0) 推荐(0) 编辑