Как можно правильно использовать интерфейсы в TypeScript вместе с React?

Question

Инга

react , typescript

Как можно правильно использовать интерфейсы в TypeScript вместе с React?

Я пишу свой первый крупный проект на TypeScript + React и у меня возник вопрос о том, нужно ли записывать данные в качестве объекта, чтобы использовать интерфейс в state. Почему нельзя просто написать const [filter, setFilter] = useState<IQuestionsFilter>('New')? Вот сам интерфейс:

export interface IQuestionsFilter {
  filter: 'New' | 'Interesting' | 'Not Answer'
}

Мне приходится использовать setFilter({ filter: 'New' }), и я хотел бы знать, есть ли другой способ это сделать. Буду благодарен за любую информацию о том, как лучше сделать, вопросы как это делают другие и т.д. Спасибо!

18 октября 2023 г. 19:48

Ответы на вопрос 3

Похожие вопросы

Answer 1

В React с использованием TypeScript рекомендуется использовать интерфейсы для типизации состояния компонентов. 

В вашем случае, вы можете определить интерфейс для состояния компонента и использовать его как тип для useState хука. Но вместо того, чтобы использовать одно значение типа IQuestionsFilter, вы должны использовать объект, который соответствует интерфейсу IQuestionsFilter. Например:

```typescript
const [filter, setFilter] = useState<IQuestionsFilter>({ filter: 'New' });
```

Предположим, вы хотите изменить значение фильтра на "Interesting". Вы можете сделать это следующим образом:

```typescript
setFilter({ filter: 'Interesting' });
```

Если вы хотите изменить только одно поле объекта состояния, вы можете использовать функцию обновления состояния, чтобы объединить существующий объект состояния с новым значением. Например, чтобы изменить значение фильтра на "Not Answer", вы можете сделать следующее:

```typescript
setFilter(prevState => ({ ...prevState, filter: 'Not Answer' }));
```

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

Answer 2

export type IQuestionsFilter = 'Новые' | 'Интересные' | 'Без ответа'

Answer 3

 interface позволяет определять только типы для объектов и функций, а type является более гибким в этом отношении.