如何覆盖 Next.js `*.svg` module声明？

IT技术 reactjs typescript next.js nextjs-image
2021-05-15 18:35:35

Next.js 最近做了一个修改（在 v11.0.x 中），它具有以下类型定义：

在next-env.d.ts（不可修改，在每次构建时重新生成）：

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

在node_modules/next/image-types/global.d.ts（不可修改，不想使用patch-package）：

declare module '*.svg' {
  const content: any
  export default content
}

现在的问题是我正在使用@svgr/webpack，因此我需要执行以下操作：

declare module '*.svg' {
  const content: React.FC<React.SVGAttributes<SVGElement>>
  export default content
}

之前将此代码放在index.d.ts用于工作的资产文件夹中。但现在它没有，因此我被迫单独转换每个导入。有什么办法可以直接做到这一点？

1个回答

我正在使用以下解决方法：

  • 添加next-env.d.ts到排除数组中tsconfig.json：

    {
  // ...
  "exclude": ["node_modules", "next-env.d.ts"]
}

  • 添加next-env.d.ts到.gitignore/ .eslintignore。

  • 创建新文件custom.d.ts：

    /// <reference types="next" />
/// <reference types="next/types/global" />

// additional things that one used to put here before Next.js v11

  • 创建新文件images.d.ts：

    type StaticImageData = {
  src: string;
  height: number;
  width: number;
  placeholder?: string;
};

declare module '*.png' {
  const content: StaticImageData;
  export default content;
}

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGSVGElement>>;
  export default content;
}

declare module '*.jpg' {
  const content: StaticImageData;
  export default content;
}

declare module '*.jpeg' {
  const content: StaticImageData;
  export default content;
}

declare module '*.gif' {
  const content: StaticImageData;
  export default content;
}

declare module '*.webp' {
  const content: StaticImageData;
  export default content;
}

declare module '*.ico' {
  const content: StaticImageData;
  export default content;
}

declare module '*.bmp' {
  const content: StaticImageData;
  export default content;
}

  • 确保这些文件是由include数组中指定的模式处理的tsconfig。

  • *.avif如果您在以下内容中使用它们，也添加声明next@12：

    declare module '*.avif' {
  const content: StaticImageData
  export default content
}
其它你可能感兴趣的问题
上一篇虽然长丝加载挤出的长丝摆动 下一篇第一层问题？