TypeScriptその②

配列の型宣言

配列の場合の書き方

const numbers: number[] = [1, 2, 3, 4, 5];

const numbers: Array<number> = [1, 2, 3, 4, 5];

どちらも同じ意味となります。

オブジェクトの型宣言

オブジェクトの型宣言は下記のように書きます。

const user: { name: string; age: number } = {
  name: "田中",
  age: 30
};

このように、キー毎に型を定義します。

オブジェクトの場合、「type」を使うと見た目をスッキリすることもできます。

type User = {
  name: string;
  age: number;
};

const user: User = {
  name: "田中",
  age: 30
};

オブジェクトの配列の型宣言

オブジェクトが配列になっているデータを扱うことが多いです。

その場合の書き方は以下です。

const users: { id: number; name: string }[] = [
  { id: 1, name: "田中" },
  { id: 2, name: "佐藤" }
];

「type」を使えばスッキリかけます。

type User = {
  id: number;
  name: string;
};

const users: User[] = [
  { id: 1, name: "田中" },
  { id: 2, name: "佐藤" }
];

このようにオブジェクトの型宣言をする際は「type」を使うと分かりやすくなります。

propsの型宣言

propsで受け取る値の型を定義できます。

type GreetingProps = {
  name: string;
  age: number;
};

function Greeting({ name, age }: GreetingProps) {
  console.log(`こんにちは、${name} (${age}歳)！`);
}

渡ってきたpropsはオブジェクトになっているので、このように書くことでpropsの型宣言ができます。

関数の型宣言

関数では引数と戻り値にそれぞれ型宣言できます。

type User = {
  id: number;
  name: string;
  email: string;
};

function getUserName(user: User): string {
  return user.name;
}