我试图在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;
}
型
我发现在typescript 2.0 https://github.com/Microsoft/TypeScript/wiki/What的-new-in-TypeScript#typescript-20中,他们引入了“模块名称中的通配符”,我们可以使用它来包含任何扩展文件。
我只是按照https://hackernoon.com/import-json-into-typescript-8d465beded79的例子,这是json文件,我按照同样的markdown文件,但没有成功。
我没有使用webpack和任何加载器,所以我只想从typescript
7条答案
按热度按时间gcxthw6b1#
对于使用React with Typescript的用户:
使用以下代码在根目录 (例如
src/
) 中创建一个globals.d.ts
文件:字符串
然后像这样导入:
型
qnyhuwrf2#
Angular 8,TypeScript 3.5.2
在**
src
**文件夹中创建一个文件globals.d.ts
(必须在src
中才能工作),添加:字符串
在组件或服务导入中,使用:
型
在本例中,
page.md
与我导入它的组件处于同一级别。这对serve
和build --prod
也有效。如果第一次在live reload模式下测试serve
,请确保重新启动它。导入
json
有一个更清晰的过程-请参阅TypeScript 2.9发布文档注意:您不必将文件命名为
globals.d.ts
,也可以将其命名为anything-at-all.d.ts
,但这是惯例wnrlj8wa3#
在你链接的例子中,他们导入的是JSON,而不是Markdown。他们能够导入JSON,因为有效的JSON也是有效的JavaScript/TypeScript。Markdown不是有效的TypeScript,所以像那样导入它是不会像那样开箱即用的。
如果你想在运行时访问Markdown文件,然后发出一个AJAX请求来检索它的内容。如果你真的想在你的JavaScript本身中构建它,那么你将需要某种构建脚本。你提到你没有使用Webpack,但是它可以通过添加一个将
/\.md$/
绑定到raw-loader
的模块规则来实现你想要的功能。编辑:
看起来你每天都在学习新的东西。正如OP在评论中指出的那样,TypeScript 2.0支持导入非代码资源。
尝试以下操作:
字符串
readme
值应该是包含README.md内容的字符串。qfe3c7zg4#
@Mitch的回答对我不起作用。使用angular v7,我发现我可以使用这个语法:
import * as documentation from 'raw-loader!./documentation.md';
e4eetjau5#
对于未来的读者来说,这个设置对我没有任何作用:Vite + React + Typescript
第一步
我最终做的是在
vite.config.ts
中创建一个自定义插件来从markdown文件中获取原始内容:字符串
第二步
然后我只是告诉typescript在
vite-env.d.ts
中正确导入markdown文件型
p8h8hvxi6#
对于使用React with Typescript的用户:
使用以下代码在
src/react-app-env.d.ts
文件中查找文件:字符串
然后像这样导入:
型
7uhlpewt7#
除了Other的答案,我还需要添加一个fetch请求
因此,总体步骤是:
第一步:创建一个文件markdown.d.ts,代码如下:
字符串
第二步:将此代码添加到您想要的.tsx文件中
型