如何在打字稿本機項目中導入降價文件？

Question

我嘗試以兩種方式將 Markdown 文件導入到我的 typescript react-native 項目中。

import * as readme from "./sample.md"

import readme from "./sample.md"  

兩者都不起作用。 所以我發現了之前報告的類似問題，並提到了創建用於聲明模塊的typings.d.ts 文件，我也嘗試過這個，但它仍然不起作用。

declare module "*!txt" {
    const value: any;
    export default value;
}

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

編輯：在 Vscode 上沒有導入錯誤，但是在 react-native 應用程序本身上，它說它找不到模塊 './sample.md' 因為它只是在尋找 (.native|.ios|.json|.ts等）文件。

任何幫助將不勝感激，被困在這太久了。 謝謝！

Answer 1

1. 在項目目錄之一中創建一個類型定義（ index.d.ts ）文件並放置以下代碼。

declare module "*.md";

2. 添加tsconfig.json -> CompilerOptions -> typeRoots如下

{
     "compilerOptions": {
         ...
         "typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"],
         ...
     }
}

3. 在您的組件中

import React, { useEffect, useState } from 'react';
import readme from 'path/filename.md';

export default function ComponentName() {
    const [md, setMD] = useState("");

    //Use componentDidMount(): if class based component to load md file
    useEffect(() => {
        fetch(readme)
            .then(data => data.text())
            .then(text => {               
                setMD(text);
            })
    }, []);

    return (
        <div>{md}</div>
    )
}