Как инициализировать состояние с помощью ловушки useState и Typescript

Question

Состояние будет обновлено с помощью хука useState с массивом объектов в будущем, который имеет интерфейс, который выглядит следующим образом:

export interface DataSource {
  dataPiont: Array<DataPoint>;
}

export interface DataPoint {
  [key: string]: string | number;
}

У меня есть хук, настроенный там, где я должен инициализировать состояние:

const [fetchedData, setFetchedData] = useState<DataSource>([{ key: '' }]);

Но я получаю ошибку Typescript "Argument of type '{ key: string; }[]' is not assignable to parameter of type 'DataSource | (() => DataSource)'.

Я не хочу добавлять null или undefined или [] к моему интерфейс, как я должен использовать его во всем приложении.

Как я могу успешно инициализировать состояние в этом случае?

Большое спасибо заранее!

Answer 1

Потому что DataSource имеет dataPiont ключ объекта. Может быть, вы хотите использовать интерфейс Array<DataPoint> для состояния?

const [fetchedData, setFetchedData] = useState<Array<DataPoint>>([]);