如何将文本文件导入打字稿？

作为一个最小的例子，我想将一个文本文件导入打字稿并将其打印到控制台而不使用读取它fs。像这样的东西：

import text from './foo.txt'

console.log(text)

我发现了很多解决方案的例子，例如this one https://stackoverflow.com/a/47705264/311156我创建了一个typings.d.ts包含内容的文件

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

但是当我构建项目时，我仍然看到“错误 TS2307：找不到模块'./foo.txt'”。

我缺少什么？

示例仓库在这里：https://github.com/gferreri/typescript-import-test https://github.com/gferreri/typescript-import-test

[TypeScript][Webpack][CreateReactApp] 将文件导入为文本

不一定是这样txt。它可以是尚未处理的任何文件扩展名webpack.

如果你没有使用create react app，你可以跳过这一步，尽管我建议保留webpack配置修改到一个单独的文件中。

否则，我发现每个步骤对于使其正常工作都是必要的。我删除了所有不必要的垃圾。

每个项目只需执行步骤 1-7 一次。

1. [终端]进入你的项目目录：cd ./my-app
2. [终端]安装raw-loader: npm i raw-loader --save-dev
3. [终端][CreateReactApp=true] 安装react-app-rewired这样你的自定义配置就不会存在于node_modules: npm i react-app-rewired --save-dev
4. [VS Code][CreateReactApp=true][package.json] 更改start, build and test使用react-app-rewired的脚本：例如，"start": "react-app-rewired start"。如果您发现这太激进，请找到您的webpage.config.js 并对其进行修改。但这会带来被吹走的风险。例如，它无法在往返 GitHub 后继续存在。
5. [VS代码] 添加global.d.ts项目src
6. [VS Code][CreateReactApp=true] 添加config-overrides.js到项目根目录my-app
7. [终端]构建：yarn build
8. [VS Code] 将文本文件添加到项目中：src/mydir/data.txt
9. [VS Code][example.ts]导入文本文件：import mytext from './data.txt'
10. [VS Code][example.ts]正常使用文本变量：myFunc(mytext)
11. [终端]运行：yarn run

全局.d.ts

declare module '*.txt' {}

配置覆盖.js

module.exports = function override(config, env) {
  const newRule = {
    test: /\.txt$/i,
    loader: 'raw-loader',
    options: {
      esModule: false,
    },
  }
  config.module.rules.find((r) => r.oneOf).oneOf.unshift(newRule)
  return config
}

data.txt

hello world

示例.ts

import myText from './data.txt'

var result = myFund(myText)