TypeScript Gatsby中gatsby-plugin-dark-mode类型缺失报错咨询

对应疑问的直接回应 #

• 现有操作无功能性配置遗漏：通过yarn安装插件、在gatsby-config.js注册插件、编写ThemeToggler组件的逻辑，完全符合插件的官方使用规范
• gatsby-plugin-dark-mode 不存在TypeScript版本兼容问题，可在TS开发的Gatsby项目中正常运行全部功能
• 本次触发的类型报错，本质是插件官方未配套提供TypeScript类型声明文件，触发TS严格类型校验规则，和插件运行逻辑无关

补充配置步骤 #

1. 为插件创建自定义类型声明
   在项目src目录下新建types文件夹，在路径src/types/gatsby-plugin-dark-mode.d.ts写入匹配插件实际API的类型定义：

   declare module 'gatsby-plugin-dark-mode' {
     import { FC, ReactNode } from 'react'
   
     interface ThemeTogglerProps {
       children: (renderProps: {
         theme: 'light' | 'dark'
         toggleTheme: (theme: 'light' | 'dark') => void
       }) => ReactNode
     }
   
     export const ThemeToggler: FC<ThemeTogglerProps>
   }
   

2. 校验tsconfig.json的扫描路径
   确认根目录下tsconfig.json的include字段覆盖了自定义类型声明的存放路径，保证TS可以正常识别该声明文件，参考配置片段：

   {
     "include": ["src/**/*", "src/types/**/*.d.ts"]
   }
   

完成以上配置后重启项目，原有“找不到模块类型声明”的报错会自动消除，主题切换功能可按原有逻辑正常运行。

内容的提问来源于stack exchange，提问作者Ryoma Kishimoto