TypeScript

【TypeScript入門】配列とオブジェクトの型定義の仕方を解説!

こんにちは、アプリ開発者のテルです!

「配列とオブジェクトの型定義がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. TypeScriptの配列とオブジェクトの型定義がわかるようになる
  2. コードを用いた解説で、初心者でも簡単に理解できる

Typescriptにおける配列とオブジェクトの型定義

配列とは

  1. 複数のデータを順番に並べた集合のこと
  2. こんな感じ → const numbers = [ 1 ,2 ,3 ,4 ,5 ];

配列を理解する上で押さえておくべきポイントは上記の2点のみです。

オブジェクトとは

  1. プロパティを複数集めたもの集合のこと
  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」がおすすめです。私も含め、現役エンジニアの多くが技術のキャッチアップに利用しています。

▼TypeScript学習におすすめのUdemy講座はこちら

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

エンジニア就活対策