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

Question

Next.js最近做了一个修改(在11.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中。但是现在它没有了，因此我不得不把每一个导入都分开。有什么直接的办法吗？

Answer 1

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

• 添加next-env.d.ts以排除tsconfig.json中的数组： { // .“排除”："node_modules"，"next-env.d.ts“}
• 将next-env.d.ts添加到.gitignore/.eslintignore。
• 创建新文件custom.d.ts： /用于在Next.js v11之前放在这里的其他东西
• 创建新文件images.d.ts： 键入StaticImageData ={ src: string；高度: number；宽度: number；占位符？：string；}；声明模块'*.png‘{ const内容: StaticImageData；导出默认内容；}声明模块'*.svg’{ const内容: React.FC；导出默认内容；}声明模块'*.jpg‘{ const内容: StaticImageData；导出默认内容；}声明模块'*.jpeg’{ const内容: StaticImageData；导出默认内容；}声明模块'*.gif‘{ StaticImageData；导出默认内容；}声明模块'*.webp’{ const内容: StaticImageData；导出默认内容；}声明模块'*.ico‘{ const内容: StaticImageData；导出默认内容；}声明模块'*.bmp’{ const内容: StaticImageData；导出默认内容；}
• 确保这些文件由tsconfig的tsconfig数组中指定的模式处理。
• 如果在*.avif中使用声明，也要为next@12添加声明： 声明模块'*.avif‘{ content: StaticImageData导出默认内容}

Answer 2

替代next-env.d.ts的另一种方法是添加一个附加的声明文件，例如additional.d.ts，如https://nextjs.org/docs/basic-features/typescript中所描述的。

正如在文档中所指出的，这个文件必须包含在您的include文件的tsconfig.json数组中，但是我发现顺序也很重要--附加文件必须包含在 next-env.d.ts之前的中。

这似乎是因为当同一个模块有多个包含默认导出的声明时，第一个声明就赢了。

// additional.d.ts
declare module "*.svg" {
  import React from "react";

  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  export default content;
}

// tsconfig.json
{
  "include": ["additional.d.ts", "next-env.d.ts"] // The order matters!
}

这为SVGs提供了我们的首选类型，同时也保留了来自next-env.d.ts的其他可取行为。

这似乎比像下一个团队将来有保留调整类型的权限那样简单地替换内置类型文件更可取，这意味着复制的类型需要手动更新，而且这种方法似乎不是一种文档化的方法。