ReactでObject.keysとmapを使ってobject of objectsを展開する

before(冗長)

type news = {
    content: string;
}

interface Props {
    1: news;
    2: news;
    3: news;
}

const NewsItems: React.FC<Props> = (props) => {
  return (
    <div>
        <div>
            {props[1].content}
        </div>
        <div>
            {props[2].content}
        </div>
        <div>
            {props[3].content}
        </div>
    </div>
  )
);

冗長ッ！！引くほど冗長ッ！！！

after

interface Props {
    [order: number] : {
        content: string;
    }
}

const NewsItems: React.FC<Props> = (props) => {
  return (
    <div>
        {Object.keys(props.newses).map(order => {
            return (
                <div key={order}>
                    {props.newses[parseInt(order).content]}
                </div>
            );
        )}}
    </div>
  )
);

point

• interfaceでブラケットを使用する

[キーの名前 : キーの型指定] : バリューの型指定
という風に書く事で1,2,3などと書かなくてよくなる
また、キーの型指定ができることで、mapでまわすときのkeyの型が決まるため、その後のprops.newses[ここの中]に怒られずに入れることができる

• Object.keysの返り値である配列の要素は文字列になることに注意

Object.keysの返り値はこの場合["1", "2", "3"]となってしまうので、parseIntを忘れずに。
もともとキーがstringだったらこんなことしなくて良いです。
(これで1時間ほど悩んでしまった。)