こんにちは、テルプロです！
「配列とオブジェクトの型定義がわからない」とお悩みではないでしょうか？
本記事ではそんな悩みを解決していきます！
本記事を読むことで
- TypeScriptの配列とオブジェクトの型定義がわかるようになる
- コードを用いた解説で、初心者でも簡単に理解できる
Typescriptにおける配列とオブジェクトの型定義
配列とは
- 複数のデータを順番に並べた集合のこと
- こんな感じ → const numbers = [ 1 ,2 ,3 ,4 ,5 ];
配列を理解する上で押さえておくべきポイントは上記の2点のみです。
オブジェクトとは
- プロパティを複数集めたもの集合のこと
- こんな感じ → const person = { name: “Teru”, age: 20 };
オブジェクトを理解する上で押さえておくべきポイントは上記の2点のみです。
では、TypeScriptにおける配列とオブジェクトの基本的な使い方を解説します！
基本的な使い方
const Example = () => {
// 配列の型指定
const arr1: string[] = ["Hello", "Hell", "Hel"];
const arr2: number[] = [1, 2, 3];
const arr3: Array<number> = [1, 2, 3];
const arr4: (string | number)[] = ["Hello", 1];
const arr5: Array<string | number> = ["Hello", 1];
// arr2 = arr3 / arr4 = arr5
// オブジェクトの型指定
type Person = { name: string; age?: number };
const obj1: Person = { name: "Teru", age: 20 };
const obj2: { name: string; age?: number }[] = [
{ name: "Teru", age: 20 },
];
// obj1 = obj2
// ? = nullを許容できる(値がなくても良い)
// 配列とオブジェクトを組み合わせる場合
const users: Person[] = [
{ name: "Teru", age: 20 },
{ name: "Yumi", age: 22 },
];
};
export default Example;簡単解説
上記のように配列もオブジェクトも型を指定することで、指定した型に当てはまる値のみ許容することができます。
しかし、変数の隣に「？」を加えることで、nullを許容することができます。
以上が、配列とオブジェクトの基本的な使い方です。
まとめ
今回は「TypeScriptにおける配列とオブジェクト」の使い方を解説しました。
今回解説した配列とオブジェクトは、TypeScriptを書く上では欠かせない知識になるのでしっかりと押さえておきましょう。
TypeScriptの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。
▼以下では、口コミをもとに厳選した「TypeScript学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！
最後までご覧いただきありがとうございました。ではまた！
