下一个图像的类型定义答案

【问题标题】：Type definitions for next-images下一个图像的类型定义
【发布时间】：2019-11-04 16:40:02
【问题描述】：

我正在使用带有 NextJs 和 next-images 的 typescript。代码是：

import css from "./style.sass";
import img from './logo.svg';
import Link from 'next/link';

export default () => <Link href="/">
        <img src={img} className={css.logo}/>
    </Link>;

如果没有输入，则会显示此错误：

Cannot find module './logo.svg'.ts(2307)

目前我使用以下类型（typings.ts）：

declare module "*.svg" {
    const value: string;
    export default value;
}

declare module "*.png" {
    const value: string;
    export default value;
}

declare module "*.jpg" {
    const value: string;
    export default value;
}

使用这些 typings.ts 文件应该可以解决错误，但事实并非如此。有人在使用时遇到同样的错误吗？有没有更好的方法来编写 typings.ts 文件？

【问题讨论】：

模块是否试图解析为.svg 或.ts？你能澄清错误信息吗？
@Yeysides 这有帮助吗？
你可以访问 webpack 配置吗？基于this answer，看起来您可以使用next.config.js 来使用svgr 模块加载器，它可以让您导入svgs。由于您正在使用反应，您可能想要import { ReactComponent as Logo } from './logo.svg'
@Yeysides 我已经在使用具有类似功能的下一个图像
只有 typescript linter 抱怨缺少类型信息

标签： typescript next.js

【解决方案1】：

经过数小时的尝试和错误，我找到了解决方案。我不得不将 typings.ts 移动到 src/ 目录并将其重命名为 images.d.ts

在此解释：https://webpack.js.org/guides/typescript/#importing-other-assets

如果能回答如何以更通用的方式编写类型仍然会很好。

【讨论】：

【解决方案2】：

2020 年更新：

next-images 包现在支持 TypeScript。

您需要做的就是在 next-env.d.ts 中添加定义

https://github.com/twopluszero/next-images#typescript

【讨论】：