How to import markdown(.md) file in typescript

问题:

I am trying to import readme files in typescript but getting "error module not found"

My TS code

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

I also tried: typings.d.ts

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

I found that in typescript 2.0 https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-20 they have introduced "Wildcard character in module names" using that we can include any extension file.

I just followed example https://hackernoon.com/import-json-into-typescript-8d465beded79 which is for json files I followed same for markdown files but no success.

I am not using webpack and any loader, so I just wanted it only from typescript

回答1:

For those using React with Typescript:

Create a globals.d.ts file in your root directory with the following code:

declare module "*.md";

then import it like this:

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

回答2:

Angular 8, TypeScript 3.5.2

Create a file globals.d.ts in the src folder (has to be in src to work), add:

declare module '*.md';

In your component or service import with:

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

In this case page.md was at the same level as the component I was importing it into. This worked with serve and build --prod also. Make sure to restart your serve if testing it in live reload mode for the first time.

There's a cleaner process for importing json - see the TypeScript 2.9 Release Documentation

Note: you don't have to name the file globals.d.ts, it could be called anything-at-all.d.ts, but that's the convention

回答3:

In your linked example, they are importing JSON, not Markdown. They are able to import the JSON because valid JSON is also valid JavaScript/TypeScript. Markdown is not valid TypeScript and so importing it like that just isn't going to work out of the box like that.

If you want to access the Markdown file at runtime, then make an AJAX request to retrieve its contents. If you really want it built within your JavaScript itself, then you will need to have some sort of build script. You mentioned you aren't using Webpack, but it will be able to achieve what you're looking for by adding a module rule tying /\.md$/ to raw-loader. You'll need to use some sort of equivalent.

Edit:

It seems you learn something new every day. As OP pointed out in comments, TypeScript 2.0 has support for importing non-code resources.

Try the following:

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

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

The readme value should then be a string containing the contents of README.md.

回答4:

@Mitch's answer didn't work for me. Using angular v7, I found I could just use this syntax: import * as documentation from 'raw-loader!./documentation.md';