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

Question

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中。 但现在它没有，结果我被迫单独投射每一个进口。 有什么办法可以直接做到这一点？

Answer 1

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

如文档中所述，此文件必须包含在tsconfig.json文件的include数组中，但我发现顺序也很重要 - 附加文件必须包含在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!
}

这为 SVG 提供了我们的首选类型，同时保留了next-env.d.ts的其他理想行为。

这似乎比简单地替换内置类型文件更可取，因为 Next 团队保留了将来调整类型的权利，这意味着复制的类型需要手动保持最新，而这种方法不会似乎是一种记录在案的方法。

Answer 2

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

• 添加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数组中指定的模式处理。