Vue3+Vite+TypeScript 中 TS 文件export type类型报错

最新推荐文章于 2024-10-23 11:12:19 发布
原创 最新推荐文章于 2024-10-23 11:12:19 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #vue

博客介绍了在Vite+Vue3+TypeScript环境下遇到的报错，即请求的模块 'xx.d.ts' 未提供名为 'CustomRoute' 的导出。并给出解决方法，将 import {xxx} from 'xxx' 改成 import type {xxx} from 'xxx'。

使用的环境为Vite+Vue3+TypeScript。

报错信息如下:

Uncaught SyntaxError: The requested module 'xx.d.ts' does not provide an export named 'CustomRoute'

定义的对应的ts文件如下:

import { RouteRecordRaw } from "vue-router";

export type CustomRoute = RouteRecordRaw & {
  hidden?: boolean;
};

解决方法：
在 import 的时候将 import {xxx} from 'xxx'  改成 import type {xxx} from 'xxx'

vue3中的Vue.prototype.xxx = xxx
我的博客
04-12 2077
vue3中的Vue.prototype.xxx = xxx。
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3958
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
vue3 + vite + ts import type时 does not provide an export named ‘xxx‘
jiaweiliao的博客
01-16 3748
我最近再使用vite构建vue + ts项目时，出现找不到导入的类型，而代码却未提示报错，在dev或build时却会出现报错，所以将这个坑发出来避免大家踩坑却找不到原因。解决方法：在导入类型前面加上type，目前还没时间找原因，为什么不加type会报错。不过这样做确实能够解决这个问题。目前这个方法能够在dev或build时，找到对应的类型，能够解决以上问题。
typescript——使用export报错
一叶的博客
06-05 2648
使用export default导出多个对象报错 /* ts中使用export default导出多个内容时会出错 */ /* export default { MongoDb, MysqlDb, save, getData } */ // 应该改为直接export export class... export function... 直接在浏览器中使用ts编译后的js文件报错 // 编译后的js文件有 exports.__esModule = true; 需要在node环境下或者使用w.
ts import type和export type 解决vite中导入类型报错的问题
阿豪
03-11 8904
原文链接: ts import type和export type 解决vite中导入类型报错的问题 ...
ts报错SyntaxError: The requested module ‘interfaceType.ts?t=1676801910376‘ does not provide an export
qq_44472790的博客
02-19 1783
开发经验总结
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 2124
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
Vue3 + TypeScript + Vite + Echarts
热门推荐
桃李不言下自成蹊
10-08 1万+
Vue3 + TypeScript + Vite + Echarts
Vue3 + TypeScript + Vite + Echarts + DataV
桃李不言下自成蹊
10-09 1万+
Vue3 + TypeScript + Vite + Echarts + DataV
vue3.0+vite+typescript入门到精通
weixin_41308072的博客
10-10 1万+
vue3.0入门到精通 vue3.0beta+vite+typescript+vue-router4beta+vuex4beta基于compositionAPI入门到实战 附csdn学院免费讲解视频 ​ www.bilibili.com 图标 vue3.0 安装 前安装过vue的2.0版本，你需要把2.0相关的删除 npm uni -g vue-cli 安装vue/cli脚架 npm i -g @vue/cli 检查版本号,目前安装vuecli 4.5.4 vue -V 创建:在命令窗口输入指令 选择def
解决vue3+ts+vite报错：The requested module ‘.../src/..‘ does not provide an export named ‘XXX‘
Grace_yue_wr的博客
02-27 5105
解决vue3+ts+vite报错：The requested module '.../src/..' does not provide an export named ‘XXX‘
Vue3+Vite+TypeScript中声明ts文件导出接口报错
tonetwo的博客
02-15 2955
Vue3+Vite+TypeScript中声明ts文件导出接口报错
【Vue】Vue3.0（十六）Vue 3.0 中 export的类型及使用场景
qq_39666711的博客
10-23 2409
在 Vue 3（以及许多现代 JavaScript 和 TypeScript 项目）中，模块化是组织和重用代码的一种重要方式。这些机制为在 Vue 3 和其他现代 JavaScript/TypeScript 项目中组织代码提供了极大的灵活性和能力。重新导出允许你将一个模块中的导出导入到另一个模块中，然后再次导出。在使用 TypeScript 时，你还可以导出类型定义，这对于在项目中维护类型安全和一致性非常重要。类型导出（TypeScript）：用于导出类型定义。重新导出：用于从其他模块导入并再次导出值。
引入定义ts类型文件报错SyntaxError: The requested module ‘xxx‘ does not provide an export named ‘xxx‘
laf211的博客
07-02 2693
解决方法： import type { xxx } from 'xxxx'vite映入ts定义数据类型的模块爆出处理方式。
vite中引入插件报错记录,1此模块是使用 “export =“ 声明的，2无法找到模块“XXX”的声明文件具有隐模式any类型
YOUHUNANMA的博客
06-20 2425
vite中引入插件报错，1此模块是使用 “export =“ 声明的，2无法找到模块“XXX”的声明文件具有隐模式any类型
Vue中export
Meraln的博客
09-11 2521
Vue中export export default 向外暴露的成员，可以使用任意的变量来接收 在一个模块中，export default只允许向外暴露一次 在一个模块中，可以同时使用export default 和 export向外暴露成员 // test.vue export default { address：'深圳' } export var title = '星星' export v...
vue3+ts，导入vue项目文件或者应用组件，代码出现红色波浪线
m0_64901660的博客
12-10 1248
VScode使用vue3+ts导入vue文件的时候，路径一切都是对的，却偏偏报错：找不到模块“./XXX.vue”或其相应的类型声明。可能是Vetur插件引起的，禁用或禁用再重新启用恢复正常(要重启vscode)在uniapp的vue代码里的uni-app组件代码没有高亮显示。
vue export 模型_Vue通用模型
cuk5340的博客
07-31 1056
vue export 模型 Vue通用模型 (Universal Model for Vue) Universal model is a model which can be used with any of following UI frameworks: 通用模型是可以与以下任何UI框架一起使用的模型： Angular 2+ universal-model-angular 角2+通用模型角...
vue3.0+ts文件引入出现红色下划波浪线如何解决
weixin_45380518的博客
09-20 1631
找到项目根目录下tsconfig.json----》配置include。根据自己项目配置检测文件路径：例如src下的文件需要配置。
旧的vue3+vite项目添加TypeScript的方法
最新发布
09-06
<think> 首先，用户的问题是：“我想查找在旧的vue3+vite项目中添加TypeScript的方法”。这是在旧的基于Vue 3和Vite的项目中添加TypeScript的指南。 我从系统级指令中回想关键点： - 使用中文回答。 - 结构清晰，逐步解决问题。 - 行内数学表达式使用$...$，但这里没有数学内容，所以可能不需要。 - 独立公式用$$...$$，但不适用。 - 生成相关问题。 - 在引用的段落末尾添加引用标识，如[^1]。 - 参考站内引用：用户提供了引用[1]和[^1]，但用户说“上述引用仅供参考，并不是用户真正的需求”，所以我应该更多参考用户的上一次问题和我的回答。然而，用户的上一个问题就是这个，因为这是连续的对话。回顾上下文，用户之前的问题是关于在旧的 Vue3 + Vite 项目中添加 TypeScript 的方法，所以我需要基于这个回答。 用户提供的引用： - 引用[1]：关于Vue3 + Vite + TypeScript项目搭建总结。 - 引用[2]：关于Vue3 + Vite2 + TypeScript4搭建企业级项目框架，提到了安装依赖命令。 用户说这些引用仅供参考，不是真正的需求，但它们在上下文中提到了安装依赖，这可能相关。所以我应该适当参考它们。 我的回答结构： 1. **逐步指南**：提供添加TypeScript到现有Vue3+Vite项目的清晰步骤。 2. **使用中文**。 3. **生成相关问题**：在回答末尾添加相关问题。 4. **引用标识**：如果我引用内容，添加[^1]等。但引用是用户提供的，我应该基于它们整合信息。 核心步骤： - 在现有Vue3+Vite项目中添加TypeScript。 - 步骤可能包括： 1. 安装必要的依赖。 2. 配置TypeScript（如创建tsconfig.json）。 3. 更新项目文件（如重命名.js文件为.ts或.vue文件添加lang="ts"）。 4. 处理Vite配置。 5. 测试和运行。 从引用[2]中，有一个命令：`npm install @vitejs/plugin-vue vue@next vite typescript --save-dev`。但用户的项目已经是Vue3+Vite了，所以我需要调整。 标准过程： - 安装TypeScript和必要的插件：`npm install typescript @vitejs/plugin-vue @vitejs/plugin-vue-jsx --save-dev`（假设使用Vue单文件组件）。 - 创建tsconfig.json文件。 - 更新vite.config.js以支持TypeScript。 - 修改.vue文件以使用TypeScript。 确保回答真实可靠：基于Vue和Vite的官方文档。 结构回答： - 引言：简要说明添加TypeScript的好处。 - 步骤： 1. 安装依赖。 2. 配置TypeScript。 3. 配置Vite。 4. 更新代码文件。 5. 测试项目。 - 提示：注意事项。 - 相关问题。 引用：用户提供了[^1]和[^2]，所以我可以在相关部分添加引用标识。例如，在提到安装命令时引用[^2]。 最终，添加相关问题。 </think> ### 在旧的 Vue3 + Vite 项目中添加 TypeScript 的逐步指南 如果您的项目已经是基于 Vue 3 和 Vite 构建的（例如使用 JavaScript），添加 TypeScript 可以提升代码可维护性和类型安全。以下是详细步骤，确保过程平滑且兼容现有代码。整个过程基于官方文档和最佳实践[^1][^2]。 #### **步骤 1: 安装必要的依赖** 首先，在项目根目录下打开终端，安装 TypeScript 和相关插件。这些插件帮助 Vite 处理 TypeScript 文件： ```bash npm install typescript @vitejs/plugin-vue @vitejs/plugin-vue-jsx @types/node --save-dev ``` - `typescript`: TypeScript 核心库。 - `@vitejs/plugin-vue`: Vite 的 Vue 单文件组件插件，支持 TypeScript。 - `@vitejs/plugin-vue-jsx`: 可选，如果项目使用 JSX。 - `@types/node`: 为 Node.js API 提供类型定义。 此命令参考了企业级项目搭建的标准流程[^2]。 #### **步骤 2: 创建 TypeScript 配置文件** 在项目根目录下创建 `tsconfig.json` 文件，配置 TypeScript 编译选项： ```json // tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` - 此配置确保严格的类型检查和兼容 Vue 3/Vite。 - 如果项目使用别名（如 `@/`），需在 `paths` 中映射。 #### **步骤 3: 更新 Vite 配置文件** 修改 `vite.config.js`（或创建 `vite.config.ts`），添加 TypeScript 支持： ```javascript // vite.config.js import { defineConfig } from &#39;vite&#39; import vue from &#39;@vitejs/plugin-vue&#39; import vueJsx from &#39;@vitejs/plugin-vue-jsx&#39; export default defineConfig({ plugins: [ vue(), vueJsx() // 如果使用 JSX ], resolve: { alias: { &#39;@&#39;: path.resolve(__dirname, &#39;src&#39;) // 确保路径别名与 tsconfig 一致 } } }) ``` - 如果需要，将文件重命名为 `vite.config.ts` 并使用 TypeScript 语法。 - 此步骤基于 Vite 官方插件推荐[^1]。 #### **步骤 4: 更新源代码文件** 逐步将现有文件转换为 TypeScript： 1. **重命名文件**： - 将 `.js` 文件改为 `.ts`（例如 `main.js` → `main.ts`）。 - 将 `.vue` 文件的 `<script>` 标签添加 `lang="ts"`： ```vue <script lang="ts"> import { defineComponent } from &#39;vue&#39; export default defineComponent({ // 组件逻辑 }) </script> ``` 2. **添加类型定义**： - 在 `src` 目录下创建 `shims-vue.d.ts` 文件，声明 Vue 文件类型： ```typescript // shims-vue.d.ts declare module &#39;*.vue&#39; { import type { DefineComponent } from &#39;vue&#39; const component: DefineComponent<{}, {}, any> export default component } ``` - 为自定义模块添加 `.d.ts` 文件（如缺少类型）。 #### **步骤 5: 测试和运行项目** 1. 启动开发服务器： ```bash npm run dev ``` 2. 检查控制台错误：修复类型错误（例如添加缺失的 `import` 或类型注解）。 3. 构建生产版本： ```bash npm run build ``` #### **注意事项** - **渐进式迁移**：无需一次性转换所有文件。从新文件开始使用 `.ts`，逐步迁移旧文件。 - **错误处理**：常见错误包括类型不匹配或路径问题，使用 `tsc --noEmit` 检查类型而不编译。 - **兼容性**：确保 Vue 3 版本 >= v3.4.19，Vite >= v5.1.4 以获得最佳支持[^1]。 - **参考文档**：详见 [Vue TypeScript 指南](https://vuejs.org/guide/typescript/overview) 和 [Vite 文档](https://vitejs.dev/guide/)。 通过以上步骤，您的旧项目即可无缝集成 TypeScript。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值