オブジェクトの分割代入自体は特段難しいことではありませんが、変数名が重複してしまい別名をつけなければならない場合の記法がちょっとひっかかったので覚えも兼ねて記事にしました。
ひっかかった理由
TypeScriptの型付けと記法が似ており混同してしまったため
書き方及びユースケース
分割代入の代表例はフックですが、同一コンポーネント内にフックを複数用いる場合がユースケースの一例として考えられます。
下記例は一つのコンポーネント内に似て非なるデータフェッチ用のフックが必要となり、変数名が丸被りしてしまった時のものです。
書き方は変数名の後ろに「: 新しい変数名」とします。
この記法がTypeScriptの型付けと紛らわしく感じさせます。
//カスタムフックによるデータフェッチ
const { data, error, isLoading } = useGitHub();
//ApolloClientによるデータフェッチ。重複する変数名は別名で対処。
const {
data: dataApollo,
error: errorApollo,
loading: loadingApollo,
} = useQuery<ジェネリクスの型定義>(gqlのクエリ);
ちなみに以下はTypeScriptの型付けです。【変数名+：】というスタイルがややこしくないですか？
//ちなみに以下の場合はstringをつけなくても型推論でstringが自動付与されます。
const aa: string = "hogehoge";
TypeScriptの型付けとのすみ分け
TypeScriptの型付けを次のようにしています。
- フック側（右側）で全体に対して型付けをする。
- 個別の変数単位で型付けをする場合は、その変数を活用する次の段階で型付けをする。
個人的に思うこと
整理も兼ねて記事を書きましたが、正直ややこしいなーと思います。
が、記法はどんどん変わっていくのであまりこだわらずその時々に沿って対応していく所存です。