4

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用于工作的资产文件夹中。但现在它没有了,因此我被迫单独转换每个导入。有什么办法可以直接做到这一点?

4

1 回答 1

7

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

  • 添加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
    }
    
于 2021-06-25T09:51:59.417 回答