Как кратко аннотировать деструктуризацию объектов с помощью FlowType и ES6?

Question

Как кратко аннотировать деструктуризацию объектов с помощью FlowType и ES6?

1

В настоящее время я использую следующий код для аннотирования деструкции объекта (inline)

Я хотел бы знать, есть ли более сжатая форма, например, без использования встроенной аннотации.

Не могли бы вы привести мне пример?

// @flow
import React from 'react'
import moment from 'moment'
import IconWeather from '../../shared/icon/IconWeather'

const ForecastDay = ({ date, tempMin, tempMax, iconCode, weatherDescription }:{+date:Date, +tempMin: number, +tempMax: number, +iconCode:string, +weatherDescription:string }) => {
  const dateFormat = moment.unix(date).format('ddd, MMM D')
  const tempMinRounded = Math.round(tempMin)
  const tempMaxRounded = Math.round(tempMax)
  return (
    <div>
      <div>{dateFormat}</div>
      <div>
        <IconWeather code={iconCode} />
      </div>
      <div>
        <div>
          {tempMinRounded}&#176;
        </div>
        <div>
          {tempMaxRounded}&#176;
        </div>
      </div>
      <div>
        {weatherDescription}
      </div>
    </div>
  )
}
export default ForecastDay

GibboK 22 сен. 2017, в 14:10

Источник

Теги:

javascript

flowtype

1 ответ

Ещё вопросы

GibboK · Accepted Answer · 2017-09-22T09-34-00.000Z

Я нашел возможное решение, разделяющее аннотацию на отдельный тип.

Если у вас есть лучшее решение, пожалуйста, сообщите мне, я хотел бы узнать больше.

Код, который я использую:

// @flow
import * as React from 'react'
import moment from 'moment'
import IconWeather from '../../shared/icon/IconWeather'

/* eslint-disable no-undef */
type PropsType = {
  date: number,
  +tempMin: number,
  +tempMax: number,
  +iconCode:number,
  +weatherDescription:string
}
/* eslint-enable no-undef */

const ForecastDay = ({ date, tempMin, tempMax, iconCode, weatherDescription }:PropsType) => {
  const dateFormat = moment.unix(date).format('ddd, MMM D')
  const tempMinRounded = Math.round(tempMin)
  const tempMaxRounded = Math.round(tempMax)
  return (
    <div>
      <div>{dateFormat}</div>
      <div>
        <IconWeather code={iconCode} />
      </div>
      <div>
        <div>
          {tempMinRounded}&#176;
        </div>
        <div>
          {tempMaxRounded}&#176;
        </div>
      </div>
      <div>
        {weatherDescription}
      </div>
    </div>
  )
}
export default ForecastDay