当使用 Webpack 的 require 引入 CSS/图片资源时，Typescript 编译器会报错 "找不到模块"。

Question

我正在编写纯JavaScript，但使用Typescript编译器的checkJs选项在VSCode中进行类型检查。 我已经设置了Webpack来加载各种资源类型（CSS、图像等），这对构建工作正常，但是Code将这些语句视为错误。 例如，在此代码中：

require("bootstrap");
require("bootstrap/dist/css/bootstrap.css");
var img = require("../img/image.png");

第一行没问题，但接下来两行都在使用 require() 的 (string) 参数处显示错误，错误提示为 "Cannot find module (name)"。

我已经安装了 @types/webpack 和 @types/webpack-env，可以解决 resolve() 和 resolve.context() 的问题。我是否还缺少其他类型包，或者这是我需要在 DT问题跟踪器 上解决的问题？

- Coderer

---

你可以让它工作，但你必须创建一个类型声明文件。没有办法使用原生JS表达资产合成模块。 - Aluan Haddad

你可能有一个链接可以说明如何做到这一点吗？我不太了解Typescript，我只是想利用类型检查，但我不想在我的代码中满是//@ts-ignore，所以我正在尝试正确地修复它。 - Coderer

Answer 1

目前由TypeScript服务器提供支持的VS Code的JavaScript和TypeScript智能感知不支持非JS或TS资源。这里是跟踪此问题的链接：https://github.com/Microsoft/TypeScript/issues/15146

作为解决方法，请尝试在项目中创建一个包含以下内容的d.ts文件：

declare module '*.css' { export default '' as string; }
declare module '*.png' { export default '' as string; }

您还可以通过在require之前添加// @ts-ignore来忽略个别错误：

// @ts-ignore
var img = require("../img/image.png");

- Matt Bierner

---

我在各个地方都放置了 @ts-ignore，但是有一个更一致的默认行为会更好。谢谢！ - Coderer

我可能说得太早了——现在我看到 [js] Type 'typeof '*.svg'' is not assignable to type 'string'。但是我正在导出“作为字符串”——这是怎么回事？（您的示例确实消除了 require("path/to/whatever.css") 的错误，因为返回值从未分配给任何东西。） - Coderer

现在，这很有趣。我按照你的建议，在我的globals.d.ts中添加了许多declare module行。将require("path/to/my.svg")分配给一个string类型的变量会出现“不可分配”的错误，但是import mySvg from "path/to/my.svg"; aStringVar = mySvg;效果很好。也许我发现了require()中的一个错误？目前，我正在将所有的require更改为import，因为Webpack显然可以很好地处理它们两个。 - Coderer

TS编译器告诉我“export必须是标识符”。我改用const val: string; export default val。 - General Grievance