Как вывести тип данных Data в заголовок?

Question

[Bart Simpson]

Мне с сервера приходят данные и я их динамически распределяю в разные теги. Но есть данные с типом "Data" (проект на тайпскрипте). В объекте этот тип выглядит так: createdAt: "2012-03-23T08:25:44.962Z"
Мне эти данные нужно вставить в {data.createdAt} но я получаю ошибку:

Type 'Date' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1376, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps, HTMLHeadingElement>'

Нужно, чтоб в теге выглядело вот так: <h1>Created 7 years ago</h1>.
Я так понимаю что, нужно написать функцию.

Answer 1

[Aetae]

У тебя две совершенно разные проблемы в одном вопросе:

1. TS тебе пишет ошибку, что тип Date не может быть children'ом для компонента, и это так. Однако дело в том, что тип у тебя задан неверно, на самом деле у тебя там никакой не Date а банальный string. Если ты поправишь типы, то всё заработает и выведет тебе то что ты передаёшь, т.е. 2012-03-23T08:25:44.962Z.

2. Чтоб превратить строку 2012-03-23T08:25:44.962Z в строку Created 7 years ago надо либо руками написать соответствующую функцию, либо воспользоваться какой-либо библиотекой для работы с датами. Например с помощью moment это будет выглядеть примерно так:

const createdFromNow = `Created ${
  moment.duration(moment().diff(data.createdAt)).humanize()
} ago`;