前言在使用 Prisma 的 seed 功能时，我遇到了一个非常棘手的问题：默认情况下，ts-node 会将其运行的脚本视为一个独立的文件进行转换，这导致无法识别较新的 JavaScript API 或路径别名。这在一些复杂场景中特别麻烦，因为我们往往需要复用项目中的工具函数，而由于文件层级的原因，往往不得不使用大量的 ../../../ 路径。更糟糕的是，如果 A 文件引入 B 文件，而 B 文件又无法使用路径别名，这种链式问题使得项目结构变得更加复杂且难以维护。因此，我开始思考一下如何能够简化这一过程，并复用已有的 TypeScript 配置。教程[hide]首先我们先看下我的运行命...
前言当我们使用Object.keys获取某个对象的key数组的时候，ts推导出来的类型是string[]，当我们再通过forEach去遍历这个key数组时，由于string类型与对象具体的key不一致，导致报错：素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型。我感觉ts这里的推导能力太差了，明明已经把具体的对象传递给他了，结果它直接返回一个string[]类型来一劳永逸，导致后续通过string类型去拿对象的value，就导致类型不匹配了。解决办法以前的我会这样写：const kindMap = { balance: 1, gpu: 2 };...
前言在做node后端服务开发的时候，使用环境变量已经是基操了，但是在ts中默认的环境变量是第一个非常宽泛的类型：interface Dict<T> { [key: string]: T | undefined; } interface ProcessEnv extends Dict<string> { /** * Can be used to change the default timezone at runtime */ TZ?: string; }这就导致我们自定义的环境变量是没有属性提示的，有点难受，所以需要我们自己去声明一个...
前言一直很想体验下websocket，苦于一直没有机会，乘着这次优化，封装了一个原生的websocket处理类，本来是想用Socket.io的，但是它只能和它配套的server端使用，对于一些非封装的服务端，没法直接使用，于是只能自己封装了。功能：支持失败重连支持心跳支持重新初始化事件订阅ts愉悦的类型推断，传入事件名和回调函数，能自动推断出结果类型支持手动断卡，重新初始化即可重新连接为什么需要重新初始化，因为我们的spa项目中，用户退出登录需要断开socket连接，用户登录后又需要重新连接，所以重新初始化承接的是切换用户重连的功能。事件订阅是由于socket传递消息全靠原生的onmes...
any类型在ts中我们只有有很多类型，比如：string、number、boolean等等，那么any这个类型怎么去理解呢？我们可以将其看做是一个超级类型集合，下面举个例子：type A = string; type B = number; type C = string | number; type D = string | number | boolean;可以看到，C和D里面都包含了string和number，那么他们都可以包含类型A和类型B，而any类型则是一个包含都有类型的一个集合。因为包含了所有，所以它可以很自由的去使用，从某种角度来看，any就是告诉ts，不需要来检测我...
前言最开始的时候写ts的时候遇到过这种问题，为什么String类型不能赋值给string类型，他们不都是字符串吗？在js中不是万物皆对象吗？同类型为什么不可以？const a: string = "a"; const b: String = a; const c: string = b;可以看到string类型可以赋值给String，而String类型不能赋值给string。解惑在JavaScript中，String、Number这种被称为包装器，你可以理解为他是一个类或者是构造函数，它返回的是一个对象，而string是一个字面量，被称为原始数据类型。原始数据类型（P...
前言在越来越深入使用ts的时候，我们会遇到这种痛点，有人声明了一个类型A，然后另一个人声明了B类型，此时我需要将A、B类型交叉起来，再增加一些新属性，这很好，但是当我们将鼠标移动到定义的新类型C上面的时候，你会发现你只能看到自己新增的属性，A、B类型只能看到一个名字，你无法感知到它们具体都有哪些属性。当然，这在开发中并不会有多大的影响，大不了跳转查看就是了，但是我们能不能不跳转进行预览呢？于是晚上刷小破站看到国外的一个大神的视频，讲述了一个有趣的分享，他分享了一个自定义的Prettify类型，通过使用这个类型我们就能查看到完整的属性了。 不多说，上教程。教程interface Test ...
引入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是如何被...
前言之前用ts封装过一个处理本地缓存localStorage和sessionStorage的类，这次在做一些落地页的时候，对接了Facebook的像素打点，其中需要获取到像素生成的fbc和fbp参数，用于渠道统计，但是这两个参数我看了下，像素方法fbq并没有提供专门获取的方式，所以只能自己手动获取了。但是大家都知道，cookie的获取是很麻烦的，因为通过document.cookie获取的是一个所有cookie的字符串值，我们需要一个个拆分获取。如果是拿一个数据还好说，但是拿两个如果不封装的话就显得代码重复了，于是封装了一个对应的类。首先api保持和之前的一致，都是采用getItem这种...
前言使用ts也有一段时间了，但是一直在入门阶段不得要领，看着那些热门仓库的类型定义花里胡哨的，想着自己啥时候也能这么强啊，但是日常项目开发，顶多就是定义下type、interface，用一用泛型封装一下，对于一些特殊需求，不知道该如何下手。比如：一些第三方插件它虽然提供了类型声明，但是可能个别声明没有导出，如果你想使用这个类型，该怎么办呢？我们在定义类型的时候，如果存在多个类型嵌套组合成一个大类型声明，一定要先声明小的类型，然后组合成大的类型吗？这种方式会导致大的类型在预览定义时会十分痛苦，因为只能看到小类型声明的名称，看不到具体定义的内容。这几天逛b站发现了一个宝藏视频，介绍了常用的1...
前提本来是想给全局window挂载一个属性，但是vite这个不知道怎么，采用之前的全局类型写法一直类型推断不出来，头疼了好久，也没想到啥原因，先把问题解决方案记一下。解决方案创建了一个global.d.ts文件，内容如下： /** 安卓套壳包提供的api */ interface AndroidEMInterface { /** 清理缓存方法 */ cleanCache(): void; } declare global { interface Window { AndroidEM?: AndroidEMInterface; } } declare const...
前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置：{ "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimen...
前情提要在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...
没有更多了
最近评论