TypeScript导入tippy.js的CSS文件提示缺少类型声明如何解决

这个报错是因为TypeScript默认无法识别非代码资源的导入类型，你将CSS文件作为默认导入、且需要拿到CSS字符串内容注入到styled-components的样式模板中，需要给对应的CSS资源补充类型声明。

解决方案 #

方案1：全局声明所有CSS文件导入类型（适用范围广，一次配置所有CSS导入都生效） #

在项目的类型声明目录下新增/编辑通用声明文件（比如src/global.d.ts或者typings/index.d.ts），添加以下内容：

declare module '*.css' {
  const content: string;
  export default content;
}

方案2：仅声明tippy相关CSS文件的类型（不想全局覆盖CSS导入规则时使用） #

在声明文件中单独声明你用到的两个tippy CSS文件：

declare module 'tippy.js/dist/tippy.css' {
  const content: string;
  export default content;
}

declare module 'tippy.js/themes/material.css' {
  const content: string;
  export default content;
}

配置验证 #

确保你的tsconfig.json的include字段包含了你存放声明文件的路径，比如你将声明放在src目录下，配置示例：

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

配置完成后重启TypeScript服务即可生效。

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