こんにちは。KOUKIです。
今回は、TypeScriptのOptional Chainingについて学習したいと思います。
<目次>
Optional Chainingの使い方
Optional Chainingは、取得した構造体にプロパティが含まれているかチェックする際に活躍します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// DBからデータを取得後のデータ構造とする const fetchedUserFromDB = { id: "1", name: "Harry Potter", work: { title: "Dev", description: "TypeScript", }, }; // Optional Chainingは、?をつけるだけ console.log(fetchedUserFromDB?.work?.title); |
DBから取得した(と仮定する)fetchedUserFromDBのプロパティにアクセスする時、「?」をつけるだけで存在チェックをしてくれます！
通常であれば、以下のように条件分岐しないといけません。
|
1 2 3 |
if (fetchedUserFromDB && fetchedUserFromDB.work) { console.log(fetchedUserFromDB.work.title); } |
これは、知っておいて損はないと思います。むしろ知っていないと、プロジェクトで出くわした時「これなんだ？」って感じになると思いますw
おわりに
Optional Chaining。。。便利ですね。ちなみに、TypeScriptのバージョンが、3.7から導入されたようです。
もうどんどん便利になってきてますね^^;
日々勉強しないと、まじできつい。。
にほんブログ村
最近のコメント