首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用TypeScript编译器消除错误TS18003

问题背景

TS18003 错误通常表示 TypeScript 编译器在解析模块时遇到了问题,具体来说,可能是由于模块解析路径不正确或模块不存在导致的。

基础概念

TypeScript 编译器在编译过程中会检查代码中的模块引用,确保每个模块都能正确解析。如果编译器无法找到某个模块,就会报 TS18003 错误。

解决方法

1. 检查模块路径

确保你引用的模块路径是正确的。例如:

代码语言:txt
复制
// 错误的路径
import { foo } from './nonexistent-module';

// 正确的路径
import { foo } from './existing-module';

2. 配置 tsconfig.json

确保你的 tsconfig.json 文件配置正确,特别是 baseUrlpaths 配置。例如:

代码语言:txt
复制
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

这样你可以使用 @ 作为项目源代码目录的别名:

代码语言:txt
复制
import { foo } from '@/existing-module';

3. 确保模块存在

确保你引用的模块文件确实存在。例如,如果你引用 ./existing-module,确保 src/existing-module.ts 文件存在。

4. 使用绝对路径

在某些情况下,使用绝对路径可以避免相对路径解析的问题。你可以通过配置 tsconfig.json 来启用绝对路径:

代码语言:txt
复制
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

然后你可以这样引用模块:

代码语言:txt
复制
import { foo } from '@/existing-module';

5. 检查文件扩展名

确保你在引用模块时包含了正确的文件扩展名。例如:

代码语言:txt
复制
// 错误的引用
import { foo } from './existing-module';

// 正确的引用
import { foo } from './existing-module.ts';

示例代码

假设你有以下目录结构:

代码语言:txt
复制
project/
├── src/
│   ├── existing-module.ts
│   └── index.ts
└── tsconfig.json

existing-module.ts 内容:

代码语言:txt
复制
export const foo = 'bar';

index.ts 内容:

代码语言:txt
复制
import { foo } from './existing-module';
console.log(foo);

tsconfig.json 内容:

代码语言:txt
复制
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

参考链接

通过以上方法,你应该能够解决 TS18003 错误。如果问题仍然存在,请检查是否有其他配置或环境问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

比较Go、Rust、Scala、Java、Kotlin、Python、Typescript 和 Elm中的编译器错误

我们比较了 Go、Rust、Python、Typescript、Scala 和 Java 中的编译器消息。...语言 编译器消息 Java 非常简短的编译器错误,措辞令人困惑 Scala 良好的编译器错误,显示了有问题的数值 Kotlin 简短、不清楚的错误消息 Python 运行时错误,简短但比 Java 更清晰的措辞...Rust 冗长的编译器错误消息,错误对应的源代码的不同部分。...今天我们将研究编译器错误编译器错误越完善、越有帮助,开发人员就能越快地解决问题并继续编码。...比较第一批编译器错误,我认为 Java 最糟糕,它的简短 cannot find symbol 与 Typescript 并列,因为它们没有显示有问题的源代码行。

13410
  • TypeScript必知三部曲(二)JSX的编译与类型检查

    在本三部曲系列的第一部中,我们介绍了TypeScript编译的两种方案(tsc编译、babel编译)以及二者的重要差异,同时分析了IDE是如何对TypeScript代码进行类型检查的。...对于JSX的编译方案,已知的有两种: babel编译方案 tsc编译方案 就像TypeScript编译一样,只要涉及到了编译环节,我们总是离不开编译三要素模型:源代码、编译器以及编译配置: 接下来将分别详细介绍这两种编译体系的编译过程...目录下只有jsx文件,于是会出现报错: error TS18003: No inputs were found in config file '/Users/w4ngzhen/projects/web-projects...不难想到,我们实际运行脚本进行编译的时候,会出现同样的错误: 细心的小伙伴会看到dist目录下依然生成了index.js代码,因为类型检查结果实际上不妨碍实际js代码的生成。...不难想到在实际运行过程中,React内部是无法处理这个所谓的a-custom-tag的“内置标签”的,它就不明白这个"a-custom-tag"是什么,所以在运行时一定会有错误

    51510

    TypeScript 演化史 — 第二章】基于控制流的类型分析 和 只读属性

    TypeScript 2.0 之前,编译器无法推断出上面的语义。...因为 x 是只读的,如果尝试这么,TypeScript 编译器会给出错误提示: image.png 相反,moveX 应该返回一个具有更新的属性值的 point,它类似这样的: function...也就是说,它是类型系统的另一个特性,通过让编译器TypeScript 代码库中检查意外的属性分配,帮助你编写正确的代码。...也就是说,它是类型系统的另一个特性,通过让编译器TypeScript 代码库中检查意外的属性分配,帮助你编写正确的代码。...可以通过消除 null 和undefined 类型来简化可空变量的处理。最后,控制流分析防止引用在给定位置没有明确分配的变量。

    2K10

    【TS 演化史 -- 16】数字分隔符和更严格的类属性检查

    2.7 引入了一个新的编译器选项,用于类中严格的属性初始化检查。...与所有其他严格的编译器选项一样,咱们可以将--strict设置为true,并通过将--strictPropertyInitialization设置为false来有选择地退出严格的属性初始化检查。...and is not definitely assigned in the constructor username: string; } 接下来,看看四种不同的方法,可以正确地输入User类来消除类型错误...解决方案1:允许定义 消除类型错误的一种方法是为username属性提供一个包含undefined的类型: class User { username: string | undefined; }...user.username.toLowerCase() : "n/a"; 解决方案2:显式属性初始化 消除类型错误的另一种方法是向username属性添加显式初始化。

    1.3K50

    TypeScript 演化史 — 第八章】字面量类型扩展 和 无类型导入

    image.png 上一篇更好的类型推断的文章中,解释了 TypeScript何用 const 变量和 readonly 属性的字面量始化来推断字面量类型。...现在来看看非扩展字面量类型,名所示,它们不会自动地扩展。...以前,编译器过于严格,当导入一个没有附带类型定义的模块时,会出现一个错误: image.png 从 TypeScript 2.1 开始,如果模块没有类型声明,编译器将不再报错。...这样做的好处是,将现有的 JS 项目迁移到 TypeScrip t可以减少编译时错误。缺点是,不会得到任何自动完成建议或细粒度类型检查,因为编译器对模块或其导出一无所知。...隐式any错误只会在编译器无法知道一个没有类型注解的变量的类型时才会报告。

    4.6K10

    Bosque语言问世,超越结构化编程,开启第二个开发黄金年代

    微软方面介绍说:Bosque 受 TypeScript 启发,是一种超越了结构化编程且没有循环的编程语言,他们认为,这种规范化的编程模型将极大地提高开发人员的生产力,提高软件质量,并使编译器和开发人员工具的开发进入第二个黄金时代...Bosque 的灵感来自于 TypeScript 的语法和类型以及 ML 和 Node/JavaScript 的语义。...Marron 在他的技术论文中解释说:“这个模型建立在结构化编程和抽象数据类型成功的基础上,它将现有的编程模型简化为一种正则化的形式,这种形式消除了主要的错误来源,简化了代码理解和修改,并将许多代码上的自动化推理任务转换为琐碎的命题...在这种情况下,大量细节必须予以跟踪和恢复,这可能会急剧增加发生错误和疏忽的机会。 等式和混叠:编程语言处于数学和工程学的边界上。...Marron 说,Bosque 的最初目标是构建自动化的零工作量代码验证、自动化的 SemVer 检查和编译,以使用 SIMD 硬件, AVX 或 SSE。

    69010

    将超过5000万行JS代码迁移到TypeScript,我们得到的10大见解

    这样一来,工程师可以专注于代码编写,而无需操心如何让 TypeScript 与打包程序或测试框架完美搭配。我们的 DevTools 和错误栈正确使用了源映射。...虽然 TypeScript 在努力保持兼容性,但是这些类型检查改进会对构建流程引入重大更改,因为以前看起来没有错误的代码库中会因此出现新的错误。...2、如果 TypeScript 对我们知道是私有的依赖项中的文件生成路径,则工具链会报错。当 TypeScript 意识到它正在生成一个依赖项的潜在危险路径时,也会报错,这两种错误很像。...这就是死类型消除(DTE),或更确切地说是摇树。我们编写了一个工具来执行这一操作——它只从声明文件中消除代码,这样任务最轻松。它不会重写或重定位代码——毕竟它不是打包器。...当我们需要支持时,社区和 TypeScript 团队的反馈让我们沐春风。使用共享开源技术的一个明显好处是,当你遇到问题时,常常会发现自己并不孤单。当你找到答案时,也会分享它们。

    1.7K30

    TS_React:使用泛型来改善类型

    TypeScript 提供最新的和不断发展的 JavaScript 特性,包括那些来⾃ 2015 年的 ECMAScript 和未来的提案中的特性,⽐异步功能和 Decorators,以帮助建⽴健壮的组件...⻚ 可以在「编译期间」发现并纠正错误 作为⼀种「解释型语⾔」,「只能」在运⾏时发现错误 「强类型」,⽀持静态和动态类型 「弱类型」,没有静态类型选项 最终被编译成 JavaScript 代码,使浏览器可以理解...可以直接在浏览器中使⽤ ⽀持模块、泛型和接⼝ 不⽀持泛型或接⼝ ---- 获取 TypeScript 命令⾏的 TypeScript 编译器可以使⽤ npm 包管理器来安装。...这些⽂件将被 TypeScript 编译器,根据配置的编译选项编译成 3 个 js ⽂件,即 a.js、b.js 和 c.js。...箭头函数在jsx中的泛型语法 在前面的例子中,我们只举例了如何用泛型定义常规的函数语法,而不是ES6中引入的箭头函数语法。

    5.2K20

    Bun 原生 JavaScript 打包器登场,引入宏

    Bun 是一个用于 JavaScript 和 TypeScript 应用程序的一体化工具包,旨在取代 Node.js。...该工具包作为“bun”可执行文件发布,提供了各种功能,测试运行器、脚本运行器和包管理器。...原生的 Bun 打包器试图简化复杂的 JavaScript 和 TypeScript 打包所面临的挑战,运行 TypeScript 文件、为生产环境构建和打包代码、处理依赖关系以及启用类似于源映射这样的功能...这个限制确保宏只在应用程序代码中运行,试图从 node_modules 调用宏将触发特定的错误消息。 虽然 Bun 宏提供了增强的代码执行能力,但也存在一些限制。...Rust 的编译器级 API 可以接受节点(token)并运行任意代码,然后吐出新的节点(token)。”

    39940

    如何写出优雅的代码?试试这些开源项目「GitHub 热点速览」

    作者:HelloGitHub-小鱼干 又是一期提升开发效率的热点速览,无论是本周推特的检查 Python 语法和代码格式的 ruff,或者是 JS、TS 编译器 oxc,都是不错的工具,有意思的是它们都是...特性: ⚡️ 比现有的语法检查器( Flake8)和格式化程序( Black)快 10-100 倍 可通过 pip 安装 ️ 支持 pyproject.toml 兼容 Python 3.12 ⚖️...与 Flake8、isort 和 Black 完全兼容 内置缓存,避免重复分析未更改的文件 支持自动修复错误(例如,自动移除未使用的导入) 超过 700 条内置规则,包括对像 flake8-bugbear...GitHub 地址→https://github.com/astral-sh/ruff 1.2 JS 编译器:oxc 主语言:Rust 如何用 Rust 写个编译器?...GitHub Trending 周榜 2.1 UI 组件:fluentui 本周 star 增长数 850+,主语言:TypeScript Fluent UI 是微软开源的用于构建 Web 应用的工具,

    56030

    为什么说 TypeScript 的火爆是必然?

    TypeScript 这些年越来越火,可以说是前端工程师的必备技能了,各大框架都基于它实现。 那么,TypeScript 的出现和爆火是偶然发生的吗?...但这也埋下了类型不安全的隐患,比如对 string 做了乘除,对 Date 对象调用了 exec 方法,这些都是运行时才能检查出来的错误。...静态类型检查则是在源码中保留类型信息,声明变量要指定类型,对变量做的操作要和类型匹配,会有专门的编译器在编译期间做检查。...不过,静态类型也消除了类型不安全的隐患,因为在编译期间就做了类型检查,就不会出现对 string 做了乘除,调用了 Date 的 exec 方法这类问题。...所以,静态类型虽然代码写起来要考虑的问题多一些,会复杂一些,但是却消除了代码中潜藏类型不安全问题的可能。

    66510

    分享 40 道关于 Typescript 的面试题及其答案

    答案:TypeScript 中的静态类型可以在开发过程中指定变量、函数参数和返回值的数据类型。这有助于及早捕获与类型相关的错误,从而提高代码质量和可维护性。...答:TypeScript 提供了多种好处,包括静态类型、更好的代码分析和工具支持、改进的代码可读性、早期错误检测、更轻松的代码重构以及增强的代码文档。...) 24.TypeScript 中的“keyof”和“typeof”关键字有何用途?...答案:TypeScript 中的“noUncheckedIndexedAccess”编译器选项用于在使用索引访问属性时捕获潜在的未定义或空值。它通过避免运行时错误来帮助提高代码安全性。...) 37.TypeScript 中的“keyof”运算符有何用途?

    66930
    领券