修复有关 Webpack 加载程序处理的导入的 TypeScript 警告？

如何解决修复有关 Webpack 加载程序处理的导入的 TypeScript 警告？

我正在使用 Svelte、Webpack 和 TypeScript 建立一个新项目。它基于 this template，并在初始设置后运行 scripts/setupTypeScript.js 脚本以切换到 TypeScript。

当尝试导入不是 TypeScript 文件的资源时，VSCode 和 TypeScript 会显示有关它们的错误：

import myContent from './some-file.txt';
// -> Cannot find module './some-file.txt' or its corresponding type declarations.ts(2307)

从技术上讲，这是可行的，但错误很吵，似乎阻止了实时重新加载。有没有办法让 TypeScript 忽略这些导入并相信 Webpack 会处理它们？其中一些是二进制文件，因此我也不能将它们复制/粘贴到 .ts 文件中。

Webpack 和 TS 配置如下：

webpack.config.js：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const sveltePreprocess = require('svelte-preprocess');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
    entry: {
        'build/bundle': ['./src/main.ts']
    },resolve: {
        alias: {
            svelte: path.dirname(require.resolve('svelte/package.json'))
        },extensions: ['.mjs','.js','.ts','.svelte'],mainFields: ['svelte','browser','module','main']
    },output: {
        path: path.join(__dirname,'/public'),filename: '[name].js',chunkFilename: '[name].[id].js'
    },module: {
            rules: [
                {
                    test: /\.ts$/,loader: 'ts-loader',exclude: /node_modules/
                },{
                    test: /\.svelte$/,use: {
                        loader: 'svelte-loader',options: {
                            compilerOptions: {
                                dev: !prod
                            },emitCss: prod,hotReload: !prod,preprocess: sveltePreprocess({ sourceMap: !prod })
                        }
                    }
                },{
                    test: /\.css$/,use: [
                        MiniCssExtractPlugin.loader,'css-loader'
                    ]
                },{
                    test: /\.(txt)$/,use: ['raw-loader']
                },{
                    test: /\.(ttf|wasm)$/,use: ['file-loader']
                },{
                    // required to prevent errors from Svelte on Webpack 5+
                    test: /node_modules\/svelte\/.*\.mjs$/,resolve: {
                        fullySpecified: false
                    }
                }
        ]
    },mode,plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],devtool: prod ? false : 'source-map',devServer: {
        hot: true
    }
};

tsconfig.json：

{
        "extends": "@tsconfig/svelte/tsconfig.json","include": ["src/**/*.ts","src/node_modules/**/*.ts"],"exclude": ["node_modules/*","__sapper__/*","static/*"]
}

解决方法

添加一个包含以下内容的 global.d.ts 文件，并确保它被您的 include 选中：

declare module "*.txt";

这告诉 TS“任何以 .txt 结尾的导入都可以，将其视为 any”。或者，使用另一种类型导出默认值：

declare module "*.txt" {
    const content: string;
    export default content;
}