使用tailwind-styled-components遇TS(2589)无限类型实例化错误如何解决？

问题场景 #

在Next.js项目中使用tailwind-styled-components库编写了以下代码：

module.style.ts 文件 #

import tw from "tailwind-styled-components";

export const Container = tw.div`
 bg-blue-600
`;

export const Button = tw.button`
 p-2
`;

index.tsx 文件 #

import React from "react";
import { Button, Container } from "./module.navbarStyles";

type Props = {};

const index = (props: Props) => {
  return (
    <Container>
      <Button>Hello Next.js</Button>
    </Container>
  );
};

export default index;

运行时出现TypeScript错误：

Type instantiation is excessively deep and possibly infinite.ts(2589)

解决方案 #

1. 降级TypeScript版本 #

该错误多出现于TypeScript 4.8+版本中，将TypeScript降级至4.7.x版本可直接缓解问题。修改package.json中的依赖版本：

{
  "devDependencies": {
    "typescript": "~4.7.4"
  }
}

执行npm install或yarn install更新依赖即可。

2. 显式声明组件Props类型 #

为生成的styled组件指定明确的Props类型，避免TypeScript进行无限制的深层类型推导：

// module.style.ts
import tw from "tailwind-styled-components";

export const Container = tw.div<React.HTMLAttributes<HTMLDivElement>>`
 bg-blue-600
`;

export const Button = tw.button<React.ButtonHTMLAttributes<HTMLButtonElement>>`
 p-2
`;

3. 安装/更新类型依赖 #

确保已安装正确的类型定义包，若已安装则尝试重新安装依赖：

npm install -D @types/tailwind-styled-components
# 或使用yarn
yarn add -D @types/tailwind-styled-components

若问题仍存在，删除node_modules、package-lock.json（或yarn.lock）后重新执行依赖安装命令。

4. 升级tailwind-styled-components版本 #

库的新版本可能修复了TypeScript类型推导的bug，执行升级命令：

npm update tailwind-styled-components
# 或使用yarn
yarn upgrade tailwind-styled-components

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