Как использовать стилизованные компоненты с плагином babel в приложении create-реагировать, которое использует TypeScript?

Question

Я прочитал документацию по инструментам для стилизованных компонентов.Мне не удалось использовать стилизованные компоненты без плагина babel, но я не смог использовать компоненты стиля с плагином babel.После прочтения документации у меня сложилось впечатление, что я лучше всего использую макрос стилей компонентов.

В моем проекте используется

• un-ejected create-Reaction-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.

Я могу заставить ее работать, удалив часть /macro оператора import, но затем я пропускаю более читаемые имена классов во время отладки, насколько я понимаю..

Answer 1

Вы можете объявить модуль styled-components/macro как имеющий API, идентичный styled-components, добавив следующий код в файл .d.ts в вашем проекте (не внутри другого модуля):

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

Рассмотримпредложение этого объявления в запросе на получение доступа к DefiniteTyped (в правильном формате: там вам понадобится отдельный файл macro.d.ts вместо использования declare module), и, возможно, сопровождающие @types/styled-components будут знать, является ли он полностью точным.