如果有人在寻找这个答案的答案。使用import是最好的选择-它将被键入，并允许在输出import与require时从Rollup和Webpack 3+等模块捆绑包进行优化：
您需要创建一个raw-loader.d.ts，并确保它包含在您的tsconfig.json文件中。输入以下内容：

declare module '!!raw-loader!*' {
  const contents: string
  export = contents
}

字符串
tsconfig.json：

{
    "compilerOptions": {
        "types": ["raw-loader.d.ts", "node"]
    }
}

型

似乎以下是工作：

import DemoComponent from './demo'
const demoCode = require('!!raw-loader!./demo')

字符串
但我不确定这有多正确。我很想找到一些关于装载机的顺序和机制的文档。
另外，我更喜欢使用import语句来保持一致性。但是如果我直接转换，TypeScript会抱怨它：

import DemoComponent from './demo'
import demoCode from '!!raw-loader!./demo'

型
错误是一个简单的

error TS2307: Cannot find module '!!raw-loader!./demo'.

型

我在这里写了一个完整的解释：https://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/
总的来说：
可以使用以下语法导入：第一个月
要使其适用于任何类型的文件，您需要：
1.设置模块声明：raw-loader.d.ts个

declare module '!!raw-loader!*' {
  const contents: string
  export default contents
}

字符串
1.在tsConfig.json中使用它并添加allowSyntheticDefaultImports属性，以允许以这种方式导入没有默认导出的模块：

{
  "compilerOptions": {
    "types": ["raw-loader.d.ts", "node"],
    "allowSyntheticDefaultImports": true
}

型
在这篇文章中，我还解释了如果（由于某些非常奇怪的原因）您想使用template.default，如何实现这一点。

对于您的错误：
raw-loader.d.ts：

declare module '!!raw-loader!*' {
  const contents: string
  export default contents
}

字符串

对我来说，去掉“！！”来自@Nicolas的回答作品

declare module 'raw-loader!*' {
  const contents: string
  export default contents
}

字符串
我没有时间去潜水，但以防万一有人需要它。我使用的是typescript@4.9.5和next@13.4.7