使用styled-components v5.3.5创建全局样式时找不到模块声明文件报错

使用styled-components v5.3.5编写全局样式时，TypeScript抛出报错：Could not find a declaration file for module 'styled-components'，相关业务代码如下：

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    :root {
        --background: #f0f2f5;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: var(--background);
        -webkit-font-smoothing: antialiesed;
    }
`;

styled-components v5.x版本没有内置TypeScript类型声明文件，TS编译时无法从模块包内读取到对应的类型定义，就会抛出该错误。

• 第一步：安装匹配版本的TS类型声明包
  安装和主版本完全对齐的@types/styled-components，避免版本不兼容引发的其他类型问题，根据你使用的包管理器执行对应命令：

  # npm
  npm install --save-dev @types/styled-components@5.3.5
  
  # yarn
  yarn add -D @types/styled-components@5.3.5
  
  # pnpm
  pnpm add -D @types/styled-components@5.3.5
  

  安装完成后重启TS服务/IDE，绝大多数场景下报错会直接消失。

• 第二步：校验tsconfig.json配置
  如果安装类型包后报错仍然存在，检查项目根目录的tsconfig.json配置，确保类型查找路径覆盖了node_modules/@types目录，参考配置如下：

  {
    "compilerOptions": {
      // 其他配置省略
      "typeRoots": [
        "./node_modules/@types",
        "./src/types" // 自定义类型存放路径可按需保留
      ]
    }
  }
  

  如果你在compilerOptions中显式配置了types字段，需要手动把styled-components加入该数组，否则TS不会自动加载对应类型包。

• 第三步：临时兜底方案
  如果暂时不需要完整的类型校验，可以在项目全局类型声明文件（通常是src/global.d.ts/src/vite-env.d.ts）中添加如下声明，跳过该模块的类型检查：

  declare module 'styled-components';
  

额外提示：你贴的代码里-webkit-font-smoothing的属性值存在拼写错误，正确值为antialiased，可以顺手修正避免样式不生效。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas