Vue3 中创建 useHooks 遇到的一个 TS 泛型和 Reactive 响应式类型冲突的问题

TIP
不推荐使用 reactive() 的泛型参数,因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。

这段时间总算是得空可以把早些时候快速开发时期挖的坑填一下了,所以准备着手改造一下前人遗留下来的 useTable 这个组合式函数。
期望可以在使用 useTable 的时候可以正确推导出来 tableDataqueryParams 对应的数据类型。

一开始的改造非常顺利,使用泛型可以正确的推导出来我需求的属性类型,直到我遇到了下面这两个TS告警:

Cannot assign type 'T[]' to type 'UnwrapRefSimple<T>[]'. ts(2322) 
不能将类型“T[]”分配给类型“UnwrapRefSimple<T>[]”。ts(2322)
Argument of type 'T' is not assignable to parameter of type 'UnwrapRefSimple<T>'.ts(2345)
类型“T”的参数不能赋给类型“UnwrapRefSimple<T>”的参数。ts(2345)

当然可以选择简单暴力的使用 as 来解决这个问题,但是我总觉得是不是有一些其他更好的方式来解决。

阅读全文

一个关于 Date() 构造函数的误解

最近在业务中遇到一个使用 Day.js 创建 UTC 时间再转换时区的异常。纠正了长久以来一个自己对于 Date() 构造函数的误解。
展示一段示例代码,以便让大家来理解我的误解:

// 引入 dayjs 并扩展 utc
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)

// 示例时间文本
const demoTimeStr = '2025-08-20 00:00:00'
// 使用 dayjs 创建一个 UTC 模式的 dayjs 实例
const utcDayjsInst = dayjs.utc(demoTimeStr)
// 输出格式化后的时间文本
console.log('utcDayjsInst1.format:', utcDayjsInst.format('YYYY-MM-DD HH:mm:ss'))
// utcDayjsInst1.format: 2025-08-20 00:00:00

// 使用示例时间文本创建一个 Date 实例
const demoDateInst = new Date(demoTimeStr)
// 使用 Date 实例创建一个 UTC 模式的 dayjs 实例
const utcDayjsInst2 = dayjs.utc(demoDateInst)
// 输出格式化后的时间文本
console.log('utcDayjsInst2.format:', utcDayjsInst2.format('YYYY-MM-DD HH:mm:ss'))
// utcDayjsInst2.format: 2025-08-19 16:00:00

可以非常直接明显的看到两个UTC模式下输出的时间文本是不一样的。

当然在事后写回顾的时候真的觉得自己特别的蠢 😂,但确实在当时困扰了我一段时间。

阅读全文