【前端】TypeScript 在 .d.ts 声明文件中使用import语法导入报错解决方案

原创 已于 2023-08-03 09:16:19 修改 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #typescript

于 2023-03-16 14:57:28 首次发布
在.d.ts文件中，如果包含import，外部可能无法找到该声明导致类型检查错误。通过注释import可以消除错误，但需要在多个地方同步修改。文章提供了一种方法，允许正确引入已定义的类型，避免了重复修改的问题。

在.d.ts 声明文件中，规定不允许 import 否则外部将无法使用声明，从而导致类型校验失败，具体表现如下：
在这里插入图片描述一片飚红。。。因为外面找不到这个声明文件了

在这里插入图片描述把他注释掉就不会飚红了，可我们怎么引入已经写好的类型呢？看下面

在这里插入图片描述
这样就行了，避免了每次要修改两个地方的困境

参考文章：https://www.5axxw.com/questions/content/fbqkul

少年歌行s
关注
深入理解 Vue 3 的 `vue-tsc` (TypeScript 命令行工具) 如何进行类型检查和生成声明文件 (`.d.ts`)。
weixin_41455464的博客
07-31 1095
这玩意儿就像是咱们写代码时候的“老中医”，专门给代码“把脉”，看看有没有啥“病症”，比如类型不匹配、变量未定义等等。是 Vue 3 + TypeScript 项目中一个非常重要的工具，它可以帮助你发现类型错误，生成声明文件，提高代码质量和可维护性。可以根据你的 TypeScript 代码，自动生成声明文件 (.d.ts)，用来描述你的组件的类型信息。的工作原理和使用方法，保证各位听完之后，也能成为“老中医”，给自己的 Vue 3 项目好好“把把脉”。接下来，在你的 Vue 3 项目中安装。
【TS】TypeScript声明文件：打通JavaScript和TypeScript的桥梁
鑫宝的博客
08-02 9080
声明文件是以.d.ts为扩展名的文件，它们不包含实现代码，而是包含了TypeScript的类型声明。这些文件的主要目的是为JavaScript库提供类型信息，使TypeScript能够进行类型检查和提供智能提示。
TypeScript从入门到精通（二十四）使用import语法
qq_42251357的博客
12-06 1760
上节我们学到命名空间，其实我们的代码也可以使用import进引入的 修改component.ts文件 现在去掉components.ts里的namespace命名空间代码，写成 ES6 的 export 导出模式。代码如下： export class Header { constructor(){ const cdiv = document.createElement("div") cdiv.innerT
TypeScript 报错汇总
青蛙king的博客
12-28 1723
方案一：使用 require 代替 import，这需要额外的在 .eslintrc.js 文件中的 env 对象中引入 commonjs 环境。先在 src 目录下创建一个 types 文件夹，然后在里面新建一个 declare.d.ts 文件。以 declare 声明的变量和模块后，其他地方不需要引入，就可以直接使用了。这样，在项目中使用所有的 jsx 和 tsx 文件就不会报错了。文件中声明模块（推荐）
vue3的unplugin-auto-import自动引入
热门推荐
weixin_52020362的博客
11-14 1万+
vue3中unplugin-auto-import自动引入
ts import type和export type 解决vite中导入类型报错的问题
阿豪
03-11 8902
原文链接: ts import type和export type 解决vite中导入类型报错的问题 ...
.d.ts文件引用报错
Martin 的博客
04-16 6232
Could not find a declaration file for module 'open-graph-scraper'. '/home/fngying/文档/Educator/dev/educator-fyi-api/node_modules/open-graph-scraper/index.js' implicitly has an 'any' type. Try `npm in...
深入解析 TypeScript 中的 .d.ts 语法
bighead的博客
05-23 4010
TypeScript 的类型系统是其最重要的特性之一。它允许我们在编码过程中显式地定义变量、函数、接口、类等的类型，并进行静态类型检查。通过类型系统，我们可以在编码阶段就发现并修复许多常见的错误，避免在运行时才暴露出问题。类型系统还提供了智能的代码补全、导航和重构功能，帮助我们更快速、更准确地编写代码。接口和类型别名是定义自定义类型的重要工具。接口用于描述对象的形状，而类型别名用于为类型定义一个别名。x: number;y: number;
在Vue.js中使用TypeScript的方法
11-21
在此，我们将探讨如何在现有版本中使用Vue.js与TypeScript的结合。 首先，为了创建一个包含TypeScript的Vue项目，推荐使用Vue CLI（Vue命令行工具）。通过运行`vue create`命令，并选择手动选择特性（Manually ...
jsdoc-tsimport-plugin:一个支持Typescript模块导入语法的JSDoc插件
05-01
jsdoc-tsimport-plugin 一个JSDoc插件，用于支持Typescript导入语法。 它是什么？ VSCode和WebStorm不支持​​JSDoc typedef... 只需在您的文档注释中使用typescript样式的导入，然后在您构建jsdocs时该插件就会翻译
ts中声明引入未使用的报错——解决方案
m0_62058782的博客
06-14 1044
这是因为导入的模块暂时没有使用，ts给的一个。设置为false即可。中的所有导入都未使用。
解决报错：import引入antd中的组件，ts报错：xxx.d.ts类型声明仅跟xxx.d.ts类型文件有大小写区分
qq_38969618的博客
04-23 1566
即可（关闭ts大小写校验）。
VUE+TS 引入文件报错以及@文件引入配置
qq_37757270的博客
02-27 582
引入文件红色波浪线提示
typescript项目中import 图片时报错：TS2307: Cannot find module ‘...’
weixin_55042716的博客
10-24 8449
如果在js中引入本地静态资源图片时使用import img from './img/bd_logo1.png'这种写法是没有问题的，但是在typscript中是无法识别非代码资源的，所以会报错TS2307: cannot find module '.png'。
*.d.ts导入import其它类型导致全局类型失效问题
博客简介
03-13 5458
declare global { // 你的全局类型 } import { PageConfig } from "@tarojs/taro"; declare global { interface QyPageConfig extends PageConfig {} } 参考： https://www.cnblogs.com/sefaultment/p/10244685.html https://koharubiyori.gitee.io/2020/08/24/Typescrip.
typescript 解析import语法
weixin_43294560的博客
07-21 3454
1
typescript中d.ts文件使用外部定义的typescript类型
qq_40816649的博客
07-01 3299
在写ts的时候遇到这样的一个情况：我需要将mongodb链接的实例对象挂载到node全局上，这个时候如果直接将类型设置为any的话在编写业务的时候回少掉很多语法提示，因此我需要在我的types.d.ts上给node全局变量的设置相关的类型。 /// <reference types="node" /> // 会导致types.d.ts文件失效 // import GriFiled from 'gridfs-stream' declare interface nameType { na
vue3+ts import引用报错Could not find a declaration file for module ‘three-obj-mtl-loader‘.
小小只程序媛
03-18 4517
vue3+ts import引用报错记录及解决方式报错描述问题分析解决方式一解决方式二 报错描述 TS7016: Could not find a declaration file for module 'three-obj-mtl-loader'. 'D:/xx/xx/node_modules/three-obj-mtl-loader/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/three-obj-mtl-l
ts文件引入外部资源报错问题
weixin_51353891的博客
08-09 1609
ts文件引入外部资源报错问题
typescript 3.9.10报错shims-tsx.d.ts
最新发布
07-19
在使用 TypeScript 3.9.10 时，如果遇到与 `shims-tsx.d.ts` 文件相关的报错，通常与类型定义文件的配置、模块声明或全局扩展有关。以下是可能的原因分析及解决方案： ### 原因分析 1. **模块声明不完整或冲突** `shims-tsx.d.ts` 文件通常用于声明 `.tsx` 文件的处理方式。如果未正确配置模块映射，或者与其他类型定义文件（如 `shims-vue.d.ts`）存在命名冲突，可能会导致 TypeScript 报错。例如，未正确声明 `*.tsx` 文件应由 `react` 模块处理，可能导致模块解析失败[^1]。 2. **全局变量扩展不正确** 如果在 `shims-tsx.d.ts` 中尝试扩展全局变量（如 `global` 对象），但未正确使用 `declare module` 语法，可能会导致 TypeScript 无法识别新增的模块或类型。例如，未在模块中正确添加扩展接口，会导致全局变量无法访问新定义的属性[^2]。 3. **类型定义文件路径未包含在 `tsconfig.json` 中** 如果 `shims-tsx.d.ts` 文件未被包含在 `tsconfig.json` 的 `include` 或 `typeRoots` 字段中，TypeScript 编译器将无法识别该类型定义文件，从而导致类型声明无效。 4. **TypeScript 版本兼容性问题** TypeScript 3.9.10 对类型定义文件的处理方式与更高版本略有不同，尤其是对 `.d.ts` 文件中模块声明和全局扩展的支持。如果项目中存在较新的语法或模块声明方式，可能会在 3.9.10 中引发兼容性问题。 ### 解决方案 1. **检查并修正模块声明** 确保 `shims-tsx.d.ts` 文件中的模块声明正确无误。例如，若项目使用 React，则应声明如下内容以确保 `.tsx` 文件由 `react` 模块处理： ```ts declare module '*.tsx' { import React from 'react'; const component: React.ComponentType; export default component; } ``` 2. **确保全局变量扩展正确** 如果在 `shims-tsx.d.ts` 中扩展了全局变量，应使用 `declare global` 语法包裹模块扩展内容，例如： ```ts declare global { namespace NodeJS { interface Global { readonly myGlobal: MyType; } } } ``` 3. **确认类型定义文件路径被包含在 `tsconfig.json` 中** 检查 `tsconfig.json` 文件中的 `include` 和 `typeRoots` 配置是否包含 `shims-tsx.d.ts` 所在目录。例如： ```json { "compilerOptions": { "typeRoots": ["./node_modules/@types", "./types"] }, "include": ["src/**/*", "types/**/*"] } ``` 4. **升级 TypeScript 版本（如可能）** 如果项目允许，建议将 TypeScript 升级到较新版本（如 4.x 或以上），以获得更好的类型定义支持和兼容性改进。3.9.10 已较为老旧，可能存在已知的类型定义处理问题。 5. **验证其他类型定义文件是否存在冲突** 检查 `shims-vue.d.ts` 等其他类型定义文件是否与 `shims-tsx.d.ts` 存在命名空间或模块声明冲突。例如，避免在多个 `.d.ts` 文件中重复声明相同的模块或全局变量[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值