react(typescript)の戻り値がわからない

Question

以下のプログラムに関しまして、
ざっくりとした私の理解は以下の通りです。
getStaticProps()　→　getaccount()　→戻り値をprops格納して返却

そのうえで下記２点がわからないのでご教示願います。

１.JSON.parse(json).persons を実行することで
person.jsonからpersonsオブジェクトを取得できると思いますが
後半のas Person[]という記述が理解できません。
型チェックの意味でしょうか？値の追加ならappendを使うと思いますが、この用法はtypescriptならでしょうか？

２.getStaticProps()の戻り値がわかりません。
getaccount()からデータを取得した後、allPersonsDataには以下の値が入る認識です。
allPersonsData.Person[]
さらにそれをpropsに格納しますので
props.allPersonsData.Personに最終的になるはずなのですが
戻り値の指定の仕方が複雑すぎてよくわかりません。どのように見ていけば良いのかご教示願います。
Promise<{ props: { allPersonsData: Person[] } }>

{
  "persons": [
    {
      "user_id": 123,
      "user_name": "yamada",
    }
  ]
}

export type Person = {
    "user_id": number,
    "user_name": string
}


export function getaccount() {
    const json = fs.readFileSync("C:\temp\person.json", "utf8")
    return JSON.parse(json).persons as Person[]
}


export async function getStaticProps(): Promise<{ props: { allPersonsData: Person[] } }> {
    const allPersonsData = getaccount()

    return {
        props: {
            allPersonsData
        }
    }
}

Comments

[hoshi-takanori]

> 後半のas Person[]という記述が理解できません。
JSON.parse の結果は any 型ですが、これを Person[] 型のはずだと教えてあげるためのものです。
型チェックを無効にするものなので、実行時にエラーが発生する可能性があります。

> props.allPersonsData.Personに最終的になるはずなのですが
それはどう言う意味でしょうか？
getStaticProps は async 関数なので、戻り値は Promise になりますが、非同期処理をしていないので async にする必要はないですね…。

[pokemonta]

戻りに型を指定する概念がなくて
空で上記コードを書く自信がありません。
特に下記のようなprops.allPersonsData.Person
多段階の値に対してどのように型を指定すればよいのでしょうか

Answer 1

１について、JSON.parse()の返り値の型はanyになってしまうため型アサーションを使ってas Person[]とすることでPerson[]を型付けしています
https://typescript-jp.gitbook.io/deep-dive/type-system/type-assertion

2について、Promiseは非同期処理を扱うオブジェクトの型です
関数名にもasyncとついてますが、Promiseやasync-awaitの説明ははがくなるので調べてみた方が良いと思います

ちなみにgetStaticPropsはNext.js独自の関数ですね
https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation