Как правильно использовать interface в TS + React?

Question

[Max Sagaidak]

Пишу первый + - крупный проект на TypeScript + React и задался вопросом, неужели что бы использовать interface в state нужно записывать данные как объект:

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

и почему нельзя просто написать:

const [filter, setFilter] = useState<IQuestionsFilter>('New')

вот сам interface:

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

Ну это все бы ничего если бы не приходилось засорять код такими изменениями:
setFilter({ filter: 'New'})

Согласен, что можно было бы написать так:

const [filter, setFilter] = useState<'New' | 'Interesting' | 'Not Answer'>('New')

Но у меня много, где используются эти данные New' | 'Interesting' | 'Not Answer' именно по этому они и в interface.

Кто может подсказать любую информацию, как это правильно сделать, как делают другие, и тд. Спасибо)

Comments

[WbICHA]

IQuestionsFilter['filter']?

[Max Sagaidak]

WbICHA, Да, спасибо большое, 3 раз работаю с TS поэтому так пока что) А можешь подсказать в этом же куске кода такой прикол, вроде бы как устанавливаю только те строки которые разрешены, но TS ругается:

['New', 'Interesting', 'Not Answer'].map((item, index: number) => {
          return (
            <ButtonSecondary
              text={item}
              handler={() => setFilter(item)}
              type={filter === item ? 'active' : 'inactive'}
              key={index}
            />
          )
        })

Я про эту строчку handler={() => setFilter(item)}
Вот какая ругань на setFilter(item):

Argument of type  string  is not assignable to parameter of type
SetStateAction<'New' | 'Interesting' | 'Not Answer'>

Хотя перебираю массив только с разрешенными строками.

Но когда я указываю

handler={() => setFilter(item as IQuestionsFilter['filter'])}

ошибки отпадают, можешь объяснить, нормально ли это, и почему так происходит. Спасибо)

[WbICHA]

Max Sagaidak, потому что тип строка несоответствует типу IQuestionsFilter['filter'].

(['New', 'Interesting', 'Not Answer'] satisfies IQuestionsFilter['filter'][]).map(...)

Answer 1

[Дмитрий Беляев]

export type IQuestionsFilter = 'New' | 'Interesting' | 'Not Answer'

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