Тематизация эмоций с помощью TypeScript: свойство 'X' не существует для типа 'object'. ts(2339)

#reactjs #typescript #emotion

#reactjs #typescript #эмоция

Вопрос:

Я не могу найти способ заставить тематизацию эмоций работать с TypeScript.

 import React from "react";
import { ThemeProvider } from "emotion-theming";
import styled from "@emotion/styled";

const theme = {
  colors: {
    gray: "#ccc",
  },
};

const MyComponent = styled.div((props) => ({
  color: props.theme.colors.gray,
}));

const App = () => (
  <ThemeProvider theme={theme}>
    <MyComponent />
  </ThemeProvider>
);

export default App;

В документах говорится: «По умолчанию props.theme имеет аннотацию любого типа и работает без каких-либо ошибок». Но у меня есть одно props.theme.colors.gray : свойство ‘colors’ не существует для типа ‘object’.ts(2339)

Я что-то здесь упускаю?

1. Я проверил здесь theme , кажется, объект: github.com/emotion-js/emotion/tree/master/packages /…

2. Да, theme должен быть объект (как в данном случае) или функция, возвращающая объект. Я не знаю, почему TS жалуется.

3. можете ли вы создать codesandbox, воссоздающий это? Я не уверен, что смогу это решить, но я очень хочу посмотреть, что происходит

Ответ №1:

Эмоция 11 упростила это.

Определите вашу тему в emotion.d.ts файле

    declare module '@emotion/react' {
      export interface Theme {
        colors : {
          primary: string;
          secondary: string;
        };
      }
    }

Это обеспечивает переопределение для пустого Theme интерфейса в Emotion.

https://emotion.sh/docs/typescript#define-a-theme

Ответ №2:

Продолжая полезный ответ @ chatian, после того, как вы создали файл .d.ts, поместите его куда-нибудь в свой проект, например, в папку «src», и укажите его как «окружающий файл», который будет использоваться средой выполнения TS вашего редактора, добавив путь к его каталогу, то "src" есть в "include" массиве вашего tsconfig.json файла.

Теперь вы должны иметь возможность использовать как свои собственные типы, так и импортировать типы, которые вы расширяете из emotion, в свои файлы tsx, например, import { Theme } from "@emotion/react" .

Пример codesandbox: https://codesandbox.io/s/9z2md?file=/src/global.d.ts

Обратите внимание, поскольку тип темы в приведенном выше примере не является «расширяющим» типом темы emotion, вам вообще не нужно его импортировать, и у вас есть доступ к нему глобально.

(примечание: эта песочница была создана не мной, поэтому заслуга принадлежит nerdyman.)