vue3 - 详细解决definedProps无法引入外部Typescript类型定义问题，vue3+ts项目中使用definedProps引入外部ts类型定义时报错（type argument pa

已于 2025-01-15 17:16:43 修改
阅读量3k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) Vue组件与功能(工作经验) 文章标签： definedProps vite typescript vue3 ts无法引入外部类型怎么办 vue3解决无法引入外部类型 使用引入外部ts类型定义报错
于 2024-02-28 17:58:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/136352418
版权
本文介绍了在Vue3 + Vite + TypeScript项目中遇到的使用definedProps引入外部类型定义时的报错问题。通过分析问题和排查，提供了包括使用vite-plugin-vue-type-imports插件以及参考Element Plus源码中的解决方案，详细阐述了如何正确地将props类型抽取并确保其为必选属性。最后总结了类型声明方式和运行时声明方式的优缺点，并给出了具体的解决步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

在vue3+vite+ts项目开发中，使用definedProps语法无法使用外部引入的类型定义，提示报错：[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.，详细解决方法。

如果情况一样，便可以完美解决。

在这里插入图片描述

问题排查

首先，出现这种情况

了解本专栏 订阅专栏 解锁全文
vue-cli3 js项目中引入ts混用typeScript1
08-08
在Vue.js项目中引入TypeScript混用TypeScript是一种常见的实践，尤其在Vue 3.0之后，TypeScript的强类型和静态分析能力可以显著提高代码质量和可维护性。以下是如何在基于vue-cli 3的JavaScript项目中逐步集成...
vue3-ts-cesium-map-show-Typescript资源
02-10
结合TypeScript，Vue3的项目将拥有更强的类型检查，提升代码的可维护性和可靠性。 在介绍的资源中，包含了使用Vue3和TypeScript开发Cesium地图应用所需的配置和设置。.browserslistrc文件用于配置目标浏览器的范围...
defineProps( ) 传入的泛型不能来自外部导入（Vue3 + TypeScript）
yzjandyyyYYDS的博客
03-06 1681
defineProps( ) 传入的泛型不能来自外部导入（Vue3 + TypeScript）。
解决：Vue3 - defineProps 设置默认值报错问题
qq_40147756的博客
09-12 1742
解决：Vue3 - defineProps 设置默认值报错问题
vue3中defineProps的使用说明
最新发布
BillKu的博客
04-09 1384
type: Object as PropType<ApplyBasicInfo>, // 使用标准的PropType进行对象类型定义required: true // 表示父组件必须传递这个prop，不能与 default 同时使用},default: "info-view" // 表示当父组件没有传递时使用默认值，不能与 required 同时使用});
[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to
weixin_44995391的博客
07-24 1728
[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps‘ is not defined
澎湖Java架构师的博客
03-10 7801
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps’ is not defined Vue 3 的 Script Setup 语法引入了 defineProps、defineEmits、defineExpose、withDefaults 的编译器宏。然而某些情况下，ESLint 会报错以上编译器宏函数未定义。 本文将介绍两种解决方案来解决这个问题（假定你的项目使用 Vue-Cli 进行初始化）。 Step 1. 检查 eslint-plugin-vue 的
Vue3报错： ‘defineProps‘ is not defined，解决方法
学习，是熵减的最有效途径。
12-15 6903
查了一下资料，这是因为eslint的语法校验导致的问题。，配置完之后需要重启项目，即可解决。如果你的项目根目录下没有。
使用defineProps和withDefault时遇到的一些问题
weixin_52075774的博客
05-06 1092
1. 使用definePros用ts传入interface或type类型时，interface或type不支持从外部移入，需定义在vue文件里面，否则会报以下错误。2. 使用withDefault时，第二个默认值对象同样必须定义在内部，不能先定义一个对象，然后引入，否则同样会报错。
TypeScript基础结合Vue3应用
weixin_43323097的博客
08-17 1051
TypeScript基础结合Vue3应用
defineprops() must be a literal type or a reference to an interface or literal type
少油少盐不要辣
11-03 889
vue3 defineProps不支持使用外部导入的类型，会报错。就是直接在脚本标签区域写类型声明，然后引用即可。
defineProps定义类型
TW934440653的博客
06-07 1557
Props中的可选参数通常除了指定类型之外还需要提供默认值，可以使用。原因：确保给组件传递的props是类型安全的。
defineProps
热门推荐
过客如期的博客
09-01 4万+
1.在vue2中，我们使用选项api中的props来接受父组件传递来的数据。2.在vue3的setup中，我们使用来定义父组件传递的props。
vue3+vite+ts--withDefaults+defineProps的使用(父传子)
m0_60893808的博客
05-29 1697
defineProps父组件绑定的属性值接收- withDefaults是defineProps绑定默认值的api。
vue中Props属性中type类型怎么声明了多个类型
weixin_41814742的博客
08-12 2889
需求： 今天我想在声明Props中属性的类型，既想是String类型，也想为Number类型。 解决： 怪我自己学Vue太浅，没怎么去看官网，查了一下官网用数组即可解决，例如：type: [Number,String]。 参考官网 ...
使用 Vite 和 TypeScript 从零打造一个属于自己的 Vue3 组件库
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-19 2364
前言随着前端技术的发展，业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?读完这篇文章你将学会:如何使用pnpm搭建出一个Monorepo环境如何使用vite搭建一个基本的Vue3脚手架项目如何开发调试一个自己的UI组件库如何使用vite打包并发布自己的UI组...
三分钟掌握ref reactive computed define props define emits 的类型注解
m0_57103064的博客
07-11 338
类型注解的作用:限制变量赋值的数据类型 并 给出提示类型注解的语法:变量：类型1.ref函数类型2.reactive函数类型3.在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担3.computed函数类型2.利用 TS 类型推导的能力（推荐）之前的:父传子，把props传递给子组件内部使用。可以通过defineProps来接收defineProps配合vue默认语法进行类型校验（运行时声明）配合TS使用defineProps配合ts的泛型定义props，这样更直接。
[@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported
我的开发博客(公众号:Web后端技术)
08-24 3万+
Vue Vite项目启动后，控制台报错: [@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported. 具体报错提示如： 终端使用 npm run dev 启动项目 $ npm run dev > vite-project@0.0.0 dev > vite Pre-bundling dependencies: vue (this will be run
Vue.js项目中使用vue-ts-loader进行TypeScript类型检查
资源摘要信息:"vue-ts-loader-在vue-loader中对脚本进行类型检查。-Vue.js开发" 知识点一：Vue-loader的TypeScript加载器 Vue-loader的TypeScript加载器是一种在Vue-loader中进行脚本类型检查的工具。它能够帮助...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值