如何在使用 TypeScript 的 create-react-app 中使用带有 babel 插件的样式化组件？

Posted 2023-03-16

【中文标题】如何在使用 TypeScript 的 create-react-app 中使用带有 babel 插件的样式化组件？

【英文标题】：How to use styled components with babel plugin in create-react-app that uses TypeScript?

【发布时间】：2019-03-20 17:17:43

【问题描述】：

我已阅读有关样式化组件工具的文档。我已经能够在没有 babel 插件的情况下使用样式组件，但是我无法在 babel 插件中使用样式组件。通过阅读文档，我的印象是我最好的选择是使用样式化组件宏。

我的项目使用

未弹出的 create-react-app 打字稿。

我已经安装了以下软件包：

  "dependencies": 
    "styled-components": "^4.0.0"
  ,
  "devDependencies": 
    "@types/styled-components": "^4.0.1",
    "babel-plugin-macros": "^2.4.2",
    "babel-plugin-styled-components": "^1.8.0"
  ,

这里我在 .tsx 文件中使用样式化组件：

import styled from 'styled-components/macro';

很遗憾，我收到了这个错误：

[ts] Could not find a declaration file for module 'styled-components/macro'. '/Users/.../styled-components/dist/styled-components-macro.cjs.js' implicitly has an 'any' type.

我可以通过删除 import 语句的 /macro 部分来使其工作，但据我了解，在调试期间我错过了更具可读性的类名。

【问题讨论】：

@types/styled-components 不知道 styled-components/macro 模块。您始终可以在新的.d.ts 文件中写入declare module "styled-components/macro"; 以将模块声明为类型any，但这不会为您提供类型信息。 styled-components/macro 模块的 API 实际上是什么样的？真的和styled-components主模块一样吗？

我相信是一样的。

【参考方案1】：

您可以通过将以下代码添加到项目中的.d.ts 文件（不在另一个模块中）来声明styled-components/macro 模块具有与styled-components 相同的API：

declare module "styled-components/macro" 
    export * from "styled-components";
    import styled from "styled-components";
    export default styled;

考虑在一个pull request中提出这个声明到DefiniteTyped（以正确的格式：在那里你需要一个单独的macro.d.ts文件而不是使用declare module），也许@types/styled-components维护者会知道它是否完全准确。