Question

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

我的项目使用

未弹出的create-react-app
TypeScript。

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

  "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部分来使其正常工作，但是据我所知，在调试过程中我错过了可读性更好的类名。

Answer 1

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

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

考虑在对DefinitelyTyped的拉取请求中提出此声明（采用正确的格式：您将需要一个单独的macro.d.ts文件而不是使用declare module），并且可能需要@types/styled-components维护者会知道它是否完全准确。

如何在使用TypeScript的create-react-app中将样式化的组件与babel插件一起使用？

1 个答案: