Typescript Visual Studio代码不正确报告错误'；找不到模块'；导入XML文件时，此错误不会出现'；不出现在构建中

我正在编写一个Typescript测试用例，它需要一些静态xml，从作为项目一部分的文件加载。我在一个节点/类型脚本项目中使用webpack，发现VSC类型脚本与项目的类型脚本不同步

导致问题的行（从VSC的角度来看）是这样的（testcase和xml文件位于同一目录中）：

从“./app.config.xml”导入数据

为了使导入工作（在项目中），我必须做以下事情（）：

1） 确保我在Web包中为xml文件使用了原始加载程序：

  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader'
      },

2） 在声明文件（./lib/declarations.d.ts）中声明模块

3） 在tsconfig的types属性中包含此定义文件

"types": [
  "mocha", "node", "./lib/declarations"
],

在我的测试用例中，我尝试如下导入：

从“./app.config.xml”导入数据

但是，VSC中的Typescript正在报告此错误：

找不到模块'./app.config.xml'.ts（2307）

然而，当我构建项目时，这不是一个问题。如果我从声明文件中删除模块声明，那么构建确实会失败，并出现相同的错误。因此，VSC中的Typescript与项目中安装的Typescript并不同步。VSC中的typescript版本与项目相同（版本3.7.2）

由于构建工作正常，我不知道它是否“可以签入”。我不喜欢在VSC中看到错误，因为它与项目不同步。到目前为止，在我的Typescript之旅中，项目中的Typescript和VSC中的Typescript一直是同步的，所以我无法理解这里发生了什么。我曾试图清理我的回购和重建，但这没有什么不同

在VSC中，我使用的是“Typescript扩展包（0.2.0）”（包括TSLine、Typescript Hero、json2ts、Move TS、Path Intellisense、Tyescript Imperter、Prettier、Chrome调试器），但是，我不相信这些插件中的任何一个对VSC报告的错误负责。我认为错误来自于直接内置在VSC中的Typescript支持

为了完整起见，我的tsconfig是：

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "types": [
      "mocha", "node", "./lib/declarations"
    ],
    "lib": [
      "es5",
      "es2015",
      "es6",
      "dom"
    ]
  },
  "include": [
    "lib/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

和网页包文件：

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  devtool: 'source-map',
  mode: 'development',
  entry: ['./tests/all-tests-entry.js', './lib'],
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader'
      },
      { test: /\.ts(x?)$/, loader: 'ts-loader' },
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']
  },
  watchOptions: {
    ignored: /node_modules/
  },
  output: {
    filename: 'test-bundle.js',
    sourceMapFilename: 'test-bundle.js.map',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs'
  }
};

和./tests/all-tests-entry.js：

var context = require.context('./', true, /.spec.ts$/);
context.keys().forEach(context);
module.exports = context;

和目录结构以及相关文件：

/project-root/
tsconfig.json
webpack.config.test.ts

/project-root/lib/
declaration.d.ts

/project-root/tests/
widget.class.spec.ts
app.config.xml

以下是VSC（禁用所有扩展）的快照，报告项目生成中不存在的错误：

---

不匹配的存在是因为您使用命令行中的webpack来编译代码，而VS代码使用普通的TypeScript来增强其IntelliSense功能

TypeScript本身不知道如何导入任意数据文件（如xml）。如果您尝试使用tsc而不是webpack编译代码，您将看到与VS代码中相同的错误

有关更多信息以及如何解决普通TS中的问题，请参阅。基本上，您需要向项目中添加一个

d.TS

文件，声明如下：

declare module "*.xml" {
const value: string;
  export default value;
}

---

解决此问题的方法是在文件顶部添加一个三重斜杠指令。由于import语句依赖于./declarations.d.ts中定义的模块声明，因此需要在前面加一个三斜杠引用指令（在我的项目中）：

//

另外，我发现解决这个问题的另一个解决方案是将声明文件放在导入文件的同一文件夹中。这不需要三个斜杠指令

---

唯一的问题是，为什么VSC Typescript与webpack构建的项目Typescript的情况有所不同？

嗨，Matt，谢谢你的评论。您提供的代码示例正是我在我的帖子的早期所做的（作为我研究的一部分）。我对此做了广泛的研究，但我没有看到您发现的问题，因此我将对此进行研究。尝试在您的普通项目中包含声明（而不是在

类型下）。为了进行测试，请将其粘贴到包含xml importSorry Matt的文件的顶部，我不清楚“尝试在普通项目中包含声明”是什么意思。正如您所说，我从tsconfig.json中的“类型”中删除了“声明”，但我不知道您所说的“普通项目”是什么意思本质上，我所寻找的只是修复VSC。该项目使用webpack构建正常，因此VSC出现问题。您是否尝试使用
tsc
编译项目？要将声明添加到项目中，只需创建一个
d.ts
文件，粘贴到该声明中，然后运行
TypeScript：转到项目配置
。这将打开正常ts文件所属的tsconfig。如果没有，请确保您的tsconfig包含该
d.ts
文件（通过
include
/
exclude
，而不是
类型
）
declare module "*.xml" {
const value: string;
  export default value;
}

/// <reference types="../../lib/declarations" />