核心内容摘要
日本“XXXX69老师”
Vue TS 报错「Argument not assignable」3 步教你把类型对齐函数立刻可调用正文目录报错含义TypeScript 在挑剔什么参数5 大高频翻车场景 修复代码万能兜底类型断言与重载预防 checklist不再踩坑一句话
总结
报错含义TypeScript 在挑剔什么参数当你在 VSCode 或控制台看到Argument of type xxx is not assignable to parameter of type xxx.TypeScript 在告诉你「你传给函数的参数类型和函数声明的类型不一致。
」本质参数类型太宽泛或太具体TS 无法匹配。
5 大高频翻车场景 修复代码① 异步数据初始为 any/unknown// ❌ 初始 anyconstuserrefany();user.value.id;// ❌ 没有 id 属性修复给具体接口类型interfaceUser{id:number;name:string}constuserrefUser|null(null);// ✅ 具体类型② 函数参数类型不匹配// ❌ 参数类型不匹配functionadd(a:number,b:number):number{returnab;}add(1,
;// ❌ string 不是 number修复对齐类型或转换add(Number(
,
;// ✅ 转换后匹配③ 泛型未约束返回 unknown// ❌ 泛型未约束返回 unknownfunctionloadDataT():T{return{}asT;// T 被推断为 unknown}constdataloadData();data.id;// ❌ unknown 没有 id修复给泛型加约束functionloadDataTextends{id:number}():T{return{}asT;// ✅ 约束为对象}④ 第三方库返回 unknown// ❌ 库返回 unknownimport{load}fromlodash;constdataload(user);// unknowndata.id;// ❌ unknown 没有 id修复断言或封装constdataload(user)as{id:number};// 或封装functionloadUser():{id:number}{returnload(user)as{id:number};}⑤ 组件 props 类型不匹配!-- ❌ 父组件传 string子组件期望 number -- MyComp :id123 / !-- 子组件 -- script setup langts defineProps{ id: number }(); // ❌ string 不是 number /script修复父组件传数字或允许多类型!-- ✅ 父组件传数字 -- MyComp :id123 /或允许多类型defineProps{id:number|string}();// ✅ 允许多类型
万能兜底类型断言与重载场景工具示例运行时校验typeof / instanceoftypeof arg number类型断言asarg as number函数重载overloadfunction fn(a: number): number; function fn(a: string): string;
预防 checklist异步数据给具体接口类型而非any/unknown函数参数对齐类型或转换泛型加约束T extends { ... }第三方库断言或封装组件 props对齐类型或允许多类型控制台「not assignable」 立即**对齐类型或断言」
一句话
总结「Argument not assignable」 参数类型和函数声明不匹配。
」用「具体类型 泛型约束 as 断言」三件套让函数永远收到对类型的参数错误瞬间消失最后问候亲爱的朋友们并邀请你们阅读我的全新著作 《Vue.js 3企业级项目开发实战微课视频版》