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

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

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

  • невыгруженное приложение create-реагировать
  • Машинопись.

Я установил следующие пакеты:

  "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 часть оператора импорта, но тогда я упускаю более читаемые имена классов во время отладки, как я это понимаю.


typescript create-react-app styled-components
person user1283776    schedule 16.10.2018    source источник
comment
@types/styled-components не знает о модуле styled-components/macro. Вы всегда можете написать declare module "styled-components/macro"; в новом .d.ts файле, чтобы объявить модуль как тип any, но это не даст вам информации о типе. Как на самом деле выглядит API для модуля styled-components/macro? Он действительно идентичен основному модулю styled-components?   -  person Matt McCutchen    schedule 16.10.2018
comment
Я считаю, что это идентично.   -  person user1283776    schedule 16.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете объявить модуль 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;
}

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

person Matt McCutchen    schedule 16.10.2018