如何在typescript

Question

我正在尝试在打字稿中导入自述文件但是找不到错误模块＆＃34;

我的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;
}

我发现在typescript 2.0 https://github.com/Microsoft/TypeScript/wiki/What＆＃39; s-new-in-TypeScript＃typescript-20  他们在模块名称中引入了＃34;通配符＃34;使用它我们可以包括任何扩展文件。

我刚刚关注了https://hackernoon.com/import-json-into-typescript-8d465beded79示例，该示例适用于json文件，我为markdown文件执行了相同操作但没有成功。

我没有使用webpack和任何加载器，所以我只想从typescript

中获取它

Answer 1

在您的链接示例中，他们正在导入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。

内容的字符串

Answer 2

Angular 8，TypeScript 3.5.2

在 globals.d.ts 文件夹中创建文件src（必须在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

对于那些使用带有Typescript的React的人：

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

declare module "*.md";

然后像这样导入它：

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

Answer 4

@Mitch的答案对我不起作用。使用angular v7，我发现我可以使用以下语法：import * as documentation from 'raw-loader!./documentation.md';