分类 TypeScript 下的文章

木灵鱼儿 5天前 TypeScript

利用索引访问类型完整预览出交叉类型定义的属性

前言在越来越深入使用ts的时候，我们会遇到这种痛点，有人声明了一个类型A，然后另一个人声明了B类型，此时我需要将A、B类型交叉起来，再增加一些新属性，这很好，但是当我们将鼠标移动到定义的新类型C上面的时候，你会发现你只能看到自己新增的属性，A、B类型只能看到一个名字，你无法感知到它们具体都有哪些属性。当然，这在开发中并不会有多大的影响，大不了跳转查看就是了，但是我们能不能不跳转进行预览呢？于是晚上刷小破站看到国外的一个大神的视频，讲述了一个有趣的分享，他分享了一个自定义的Prettify类型，通过使用这个类型我们就能查看到完整的属性了。不多说，上教程。教程 interface...

59 12 0

TypeScript 索引访问类型预览类型

正确引入ts的类型

木灵鱼儿 2月前 TypeScript

正确引入ts的类型

引入ts类型在我们刚开始学习ts的时候，常常是会创建一个types.ts文件，然后在里面声明一个类型并导出： export interface User { name: string; age: number; } 使用的时候通过import导入： import { User } from "./types"; const user:User = { name: "a", age: 18 }; 很高兴你已经学会了如何引入ts类型，教程结束！当然，这是骗你的，但是这种用法确实是最开始ts所提供的，你不能说它错了，我们需要思考一下ts是如何被转为js，就会发现一些问题。...

229 0 0

type 类型 TypeScript

typescript 封装一个Cookie工具类

木灵鱼儿 4月前 TypeScript

typescript 封装一个Cookie工具类

前言之前用ts封装过一个处理本地缓存localStorage和sessionStorage的类，这次在做一些落地页的时候，对接了Facebook的像素打点，其中需要获取到像素生成的fbc和fbp参数，用于渠道统计，但是这两个参数我看了下，像素方法fbq并没有提供专门获取的方式，所以只能自己手动获取了。但是大家都知道，cookie的获取是很麻烦的，因为通过document.cookie获取的是一个所有cookie的字符串值，我们需要一个个拆分获取。如果是拿一个数据还好说，但是拿两个如果不封装的话就显得代码重复了，于是封装了一个对应的类。首先api保持和之前的一致，都是采用getIt...

385 21 0

cookie 缓存 TypeScript

进阶中级TypeScript需要掌握的一些类型定义用法

木灵鱼儿 4月前 TypeScript

进阶中级TypeScript需要掌握的一些类型定义用法

前言使用ts也有一段时间了，但是一直在入门阶段不得要领，看着那些热门仓库的类型定义花里胡哨的，想着自己啥时候也能这么强啊，但是日常项目开发，顶多就是定义下type、interface，用一用泛型封装一下，对于一些特殊需求，不知道该如何下手。比如：一些第三方插件它虽然提供了类型声明，但是可能个别声明没有导出，如果你想使用这个类型，该怎么办呢？我们在定义类型的时候，如果存在多个类型嵌套组合成一个大类型声明，一定要先声明小的类型，然后组合成大的类型吗？这种方式会导致大的类型在预览定义时会十分痛苦，因为只能看到小类型声明的名称，看不到具体定义的内容。这几天逛b站发现了一个宝藏视频，介绍...

426 1 0

exclude required TypeScript

全局声明遇到的一些问题

木灵鱼儿 4月前 TypeScript

全局声明遇到的一些问题

前提本来是想给全局window挂载一个属性，但是vite这个不知道怎么，采用之前的全局类型写法一直类型推断不出来，头疼了好久，也没想到啥原因，先把问题解决方案记一下。解决方案创建了一个global.d.ts文件，内容如下： /** 安卓套壳包提供的api */ interface AndroidEMInterface { /** 清理缓存方法 */ cleanCache(): void; } declare global { interface Window { AndroidEM?: AndroidEMInterface; } } declare c...

319 0 0

TypeScript declare 全局声明

数值转百分比的方法

木灵鱼儿 5月前 TypeScript

数值转百分比的方法

要求传入一个数字，转成10%这种百分比的形式，如果存在小数则四舍五入保留2位小数，如果小数位是0则不保留。代码 function toPercent(num: number): string { if (num % 1 !== 0) { let percentageNum = (num * 100).toFixed(2); percentageNum = percentageNum.endsWith('.00') ? percentageNum.slice(0, -3) : percentageN...

782 31 0

数值百分比转换

装饰器 Decorators

木灵鱼儿 6月前 TypeScript

装饰器 Decorators

前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。 typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置： { "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimentalDecorators": true, } } 其中targ...

400 0 0

装饰器 Decorators 类装饰器

ts实战：给没有类型声明的第三方库编写一个类型声明文件

木灵鱼儿 6月前 TypeScript

ts实战：给没有类型声明的第三方库编写一个类型声明文件

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

692 0 0

TypeScript keyof 类型声明

利用发布订阅模式封装一个IntersectionObserver

木灵鱼儿 6月前 TypeScript

利用发布订阅模式封装一个IntersectionObserver

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

648 3 0

TypeScript IntersectionObserver 发布订阅模式

ts封装一个localStorage和sessionStorage的类

木灵鱼儿 6月前 TypeScript

ts封装一个localStorage和sessionStorage的类

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

674 0 0

TypeScript localStorage sessionStorage

利用typescript实现原生css变量的主题切换功能类

木灵鱼儿 6月前 TypeScript

利用typescript实现原生css变量的主题切换功能类

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

590 0 0

typecho TypeScript 主题切换

类型守卫：判断某个key是某个对象的合法key值

木灵鱼儿 7月前 TypeScript

类型守卫：判断某个key是某个对象的合法key值

/** 类型守卫：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" } 当我们使用一个string类型的key去获取...

693 0 0

is 类型守卫 keyof

映射类型，对象属性批量设置约束

木灵鱼儿 1年前 TypeScript

映射类型，对象属性批量设置约束

批量设置属性全部只读 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；...

1440 0 0

TypeScript 映射类型 Readonly

索引类型，key的约束

木灵鱼儿 1年前 TypeScript

索引类型，key的约束

再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"])); 当我们需要遍历一些对象的key值时，可能会有这种情况，但是这样写ts无...

1386 0 0

TypeScript 索引类型 keyof T

关于ts 属性“xxx”没有初始化表达式，且未在构造函数中明确赋值的解决方案

木灵鱼儿 1年前 TypeScript

关于ts 属性“xxx”没有初始化表达式，且未在构造函数中明确赋值的解决方案

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: stri...

5354 193 0

TypeScript 赋值

分类：TypeScript

利用索引访问类型完整预览出交叉类型定义的属性

正确引入ts的类型

typescript 封装一个Cookie工具类

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

数值转百分比的方法

装饰器 Decorators

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

类型守卫：判断某个key是某个对象的合法key值

映射类型，对象属性批量设置约束

索引类型，key的约束

关于ts 属性“xxx”没有初始化表达式，且未在构造函数中明确赋值的解决方案

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：TypeScript

利用索引访问类型完整预览出交叉类型定义的属性

正确引入ts的类型

typescript 封装一个Cookie工具类

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

数值转百分比的方法

装饰器 Decorators

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

类型守卫：判断某个key是某个对象的合法key值

映射类型，对象属性批量设置约束

索引类型，key的约束

关于ts 属性“xxx”没有初始化表达式，且未在构造函数中明确赋值的解决方案

最近评论

博客文章RSS订阅

博客评论RSS订阅