如何覆盖 Next.js `*.svg` 模块声明?
How to override Next.js `*.svg` module declaration?
Next.js 最近进行了修改(在 v11.0.x 中),具有以下类型定义:
在 next-env.d.ts
中(不可修改,每次构建时重新生成):
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
In 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
中用于工作的资产文件夹中。但现在它没有,结果我被迫单独投射每一个进口。有什么办法可以直接做到这一点?
我正在使用以下解决方法:
添加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;
}
确保这些文件由 tsconfig
的 include
数组中指定的模式处理。
如果您在 next@12
中使用 *.avif
,也请添加声明:
declare module '*.avif' {
const content: StaticImageData
export default content
}
Next.js 最近进行了修改(在 v11.0.x 中),具有以下类型定义:
在 next-env.d.ts
中(不可修改,每次构建时重新生成):
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
In 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
中用于工作的资产文件夹中。但现在它没有,结果我被迫单独投射每一个进口。有什么办法可以直接做到这一点?
我正在使用以下解决方法:
添加
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; }
确保这些文件由
tsconfig
的include
数组中指定的模式处理。如果您在
next@12
中使用*.avif
,也请添加声明:declare module '*.avif' { const content: StaticImageData export default content }