FlowTypeとES6を使用して簡潔にオブジェクトの非構造化に注釈を付けるにはどうすればよいですか？

Question

現在、私は、オブジェクトの非構造（インライン）

に注釈を付けるために、次のコードを使用しています私は、インラインアノテーションを使用することなく、例えば、そこにあれば、より簡潔な形を知っていただきたいと思います。

私に例を教えてください。

// @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

Answer 1

私は別の種類の注釈を分離可能な解決策を見つけました。

もっと良い解決策がある場合は、私に報告してください。私は詳細を知りたいと思います。私が使用しています

コード：

// @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