[ Reactで学ぶ ] TypeScript 基礎 : 配列・オブジェクトの型定義方法

React.jsを用いたフロントエンド開発に限らず、近頃では様々なプロジェクトで活用されている「TypeScript」ですが、型(type)を定義する際にどのように定義したらいいかわからない時あったりしますよね。。

そこで、今回は、React.jsのプロジェクト内でTypeScriptでコーディングをする際に、配列・オブジェクトでどのように型定義をすれば良いのかを解説していければと思います。サンプルコードも載せておりますので、学習・開発の参考になればと思います。

React : TypeScript環境の作成

React環境を作成したいフォルダまで移動して頂き、以下のコマンドを実行しましょう。

npx create-react-app --template typescript

配列の型定義

配列内でどのような値を保持しているかによって、型の定義方法を切り替える必要があります。配列内の要素の型が違う場合の書き方もあわせて覚えておきましょう。

型の定義方法

型が一つの場合

型が複数の場合

活用例

コードの記述は、App.tsxにしております。

const App = () => {
  // string型の配列を定義 -> 数値型であればnumber[]にする
  const arr:string[] = ["りんご", "メロン"]
  return (
    <>
      {/* 配列内の要素を出力 */}
      {console.log(arr[0], arr[1])}
    </>
  )
}

export default App

動作確認

以下のように「りんご メロン」と表示されていればOKです。

オブジェクトの型定義

配列と同様にオブジェクト内の要素の型が一つの場合と複数の場合の型定義をまとめていきます。

型の定義方法

オブジェクトの場合は、typeオブジェクトを用いた型の指定方法をご紹介します。

型を定義

活用例

コードの記述は、App.tsxにしております。

type profile = {
  name: string,
  age: number
}

const App = () => {
  // typeオブジェクトとして作成したprofileを型として設定
  const user:profile={ name:'ryo tanaka', age:36 }
  return (
    <>
      {/* オブジェクト内の要素を出力 */}
      {console.log(user.name, user.age)}
    </>
  )
}

export default App

 動作確認

以下のように「ryo tanaka 36」と表示されていればOKです。

省略可能なプロパティを指定

設定しているプロパティが存在しない場合、通常であればエラーになります。しかし、TypeScriptのオブジェクト型の場合ではそうならないような仕組みが用意されています。

試しに先ほどのオブジェクトのサンプルコードを少しいじり、動作を確認してみましょう。typeオブジェクトで設定しているageプロパティに「?」をつけた上で、変数userには、nameプロパティしか渡さないようにします。

以下の部分だけ修正した上で、保存すると、エラーも発生せずに、nameプロパティに設定した名前だけが出力されることも確認できるかと思いますので、試してみてください。

type profile = {
  name: string,
  age?: number
}

// nameプロパティのみ設定する
const user:profile={ name:'ryo tanaka' }

{console.log(user)}

 動作確認

以下のようにプロパティの数が一致しなくてもエラーにならないことが確認できればOKです！

まとめ

以下の基本的な型の定義方法は必ず覚えておきましょう。

配列の型定義

オブジェクトの型定義

• オブジェクト内の要素に対して、?をつけることで省略可能なプロパティとして設定することが可能です。こうすることで、そのプロパティが存在しない場合でもエラーになりません。