如何在typescript中导入markdown(.md)文件

Question

我正在尝试导入typescript格式的自述文件，但得到“找不到错误模块”

我的TS代码

import * as readme from "./README.md"; // here i am getting error module not found

我也试过了: typings.d.ts

declare module "*.md" {
    const value: any;
    export default value;
}

我发现在TypeScript2.0 https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-20中，他们引入了“模块名称中的通配符”，使用它我们可以包含任何扩展文件。

我只是遵循了json文件的示例https://hackernoon.com/import-json-into-typescript-8d465beded79，对于markdown文件也遵循了同样的方法，但没有成功。

我没有使用webpack和任何加载器，所以我只是想从typescript中获得它

Answer 1

对于那些使用React with Typescript的用户：

使用以下代码在根目录中创建一个globals.d.ts文件：

declare module "*.md";

然后像这样导入：

import readme from "../README.md" // substitute this path with your README.md file path

Answer 2

Angular 8，TypeScript 3.5.2

在src文件夹中创建一个globals.d.ts文件(必须在src中才能工作)，添加：

declare module '*.md';

在您的组件或服务导入中，使用：

import * as pageMarkdown from 'raw-loader!./page.md';

在本例中，page.md与我要将其导入到的组件处于同一级别。这也适用于serve和build --prod。如果第一次在实时重载模式下测试serve，请确保重新启动它。

有一个更干净的导入json的过程-请参阅TypeScript 2.9 Release Documentation

注意:您不必将文件命名为globals.d.ts，可以将其命名为anything-at-all.d.ts，但这是惯例

Answer 3

在您链接的示例中，他们导入的是JSON，而不是Markdown。他们能够导入JSON，因为有效的JSON也是有效的JavaScript/TypeScript。Markdown不是有效的TypeScript，所以像那样导入它不会像那样开箱即用。

如果您想在运行时访问Markdown文件，那么可以发出一个AJAX请求来检索它的内容。如果你真的想在你的JavaScript中构建它，那么你需要一些构建脚本。您提到您没有使用Webpack，但是通过添加一个将/\.md$/绑定到raw-loader的模块规则，它将能够实现您想要的结果。您将需要使用某种等效项。

编辑：

似乎你每天都能学到一些新东西。正如OP在评论中指出的那样，TypeScript 2.0支持导入非代码资源。

尝试以下操作：

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

import readme from "./README.md!txt";

然后，readme值应该是包含README.md内容的字符串。