WithStyles в интерфейсе материалов?

Question

import { WithStyles, createStyles } from '@material-ui/core';

const styles = (theme: Theme) => createStyles({
  root: { /* ... */ },
  paper: { /* ... */ },
  button: { /* ... */ },
});

interface Props extends WithStyles<typeof styles> {
  foo: number;
  bar: boolean;
}

Я беру приведенный выше пример непосредственно из документации по пользовательскому интерфейсу. У меня вопрос, почему в документации предлагается использовать WithStyles<typeof styles> вместо WithStyles<string>. Может кто-нибудь объяснить подробно, что оценивает typeof стили? В моем понимании это будет строка?

Answer 1

Кажется, я отвечаю на свой вопрос здесь.

При условии, что в файле для машинописи есть следующее

const styles = {a: 1, b: 2, c: 3};

Затем мы можем объявить другой объект, который, как мы ожидаем, будет иметь такой же Имена свойств в качестве стилей с использованием следующего синтаксиса

const stylesV2: typeof styles = {a: 10, b: 20, c: 24}

Таким образом, если в stylesV2 отсутствует свойство, присутствующее в стилях, TypeScript будет жаловаться, что свойство "x" отсутствует ..... но обязательно.

Следовательно, в случае WithStyles<typeof styles> мы ожидаем привести тип к тому, что в данный момент включено в стили.