前情提要在github找了一个原生代码写的Toast库，安装后发现没有ts类型声明，通过安装@types/库名 也没有现成的对应的类型声明库，于是想着自己写一份声明文件用，也是第一次，所以找了好些教程，这里做个笔记。npm仓库： Toastify说实话这个库不太行，不支持多个toast，权当练手了。类型声明文件在项目中，比如我是在src目录下创建一个types目录，专门存放这些类型声明文件，创建一个名为Toastify.d.ts的文件。内容如下：declare module "toastify" { /** toast定位 */ export type Toa...

前言用于判断当前元素是否出现在视口区域，以此来实现懒加载已经是日常业务必须的东西了，但是如何去判断这个元素是否出现在视口中，是一个非常头疼的地方。很久以前，我们通过dom.offsetTop的方式，不断的累加自身和父级元素的offsetTop值，得到元素具体文档顶部的距离，然后判断这个距离是否小于等于当前视窗的高度+滚动条scrollTop，如果是的话，说明用户已经滚动到了，或者滚过去了，这个时候就得触发图片懒加载。但是这种方式十分痛苦，需要递归计算offsetTop的值，而且性能不是很好。后来浏览器又提供了getBoundClientRect的方法，这个方法会返回当前元素距离视窗的四个...

前言希望存储一个对象的时候能自动JSON转成字符串，存储一个string类型的值时，不需要再JSON化了，不然又多两引号，和原生存储使用会有出入，我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。拿取的时候就会有一些顾虑了，因为拿到的值就是字符串类型，所以我加了一个额外的参数来判断是否需要JSON解析，默认是需要的，这个配置用于这个值我可能自己手动转成字符串存的，它的源值是一个对象，我不希望取值的时候被解析出来，我就要它原样给我，应对这种情况加了一个配置判定。在拿取的时候返回的值类型是any，显然这不是我想要的，我希望能准确判定这个类型，于是通过泛型的方式进行约束。另一个考量是...

前言主题的切换研究过好久了，个人认为目前最好的两种实现：原生css变量实现，性能好，但是不太兼容旧设备利用预处理scss这种做一个主题类名，通过最上层类名变化从而改变嵌套的子类名的颜色，兼容性好，但是需要把所有的类都抽出来单独设置。本着简单+性能的目标，我采用了第一种方案，这种方案也是大佬张鑫旭提供了，文章是：《link rel=alternate网站换肤功能最佳实现》有兴趣弄的话可以先看看大佬的文章了解原理。封装主题的链接引入采用如下格式：<!-- theme --> <link href="<?php $this->options->th...

/** 类型守卫：key是否是指定对象的属性 */ function isLanguageKey(key: string, object: Object): key is keyof typeof object { return Object.prototype.hasOwnProperty.call(object, key); }这个一般用于对象object是其他人提供的，但是我们知道它一定会有某个key值，但是由于这个object它被类型推断为已知key的类型，比如：{ title: "xxx", age: "xxx" }当我们使用...

批量设置属性全部只读interface ObjInterface { a: number; b: number; c: number; } //全部设为只读 type readonlyObj = Readonly<ObjInterface>;鼠标移动到readonlyObj可以发现所有的属性全部设置为只读了。type readonlyObj = { readonly a: number; readonly b: number; readonly c: number; }我们按住ctrl+鼠标左键点击Readonly；可以看到...

再for循环中我们经常遇到类似这种写法const obj = { a: 1, b: 2, c: 3 }; //遍历obj拿到指定key对应的val数组 function getObjVal(obj:any,keys:string[]) { return keys.map(key => obj[key]); } console.log(getObjVal(obj, ["a", "b"])); console.log(getObjVal(obj, ["d", "e"]...

ts默认要求class中声明的属性必须初始化，所以，如果存在没有被初始化的属性，就会报这个错误。如果我们让他或者等于null，那么在调用属性的时候又会提示值可能为null，极度麻烦class A { data: { name: string } | null = null; } const a = new A(); console.log(a.data.name);然后你又不得不搞个非空断言。console.log((a.data!).name);每次都这么写非常麻烦。赋值方案既然他要赋值那么我们就赋值class A { data: { name: string }; c...