TypeScript型入門！色々な型定義を試してみよう｜Playground発！アプリ開発会社の技術ブログ

「全然わからない、俺たちは雰囲気でTypeScriptをやっている」

という方のための記事です。

TypeScriptの型定義の基本をまとめてみました。

今回とりあげる型定義の種類は以下の通りです。

この記事で扱う型定義

プリミティブ型
リテラル型
オブジェクト型
配列型
関数型

というわけで型定義を1つずつ見ていきましょう！サンプルコード付きです。

1 TypeScript型入門１｜プリミティブ型
2 TypeScript型入門２｜リテラル型
3 TypeScript型入門３｜オブジェクト型
4 TypeScript型入門４｜配列型
5 TypeScript型入門５｜関数型

TypeScript型入門１｜プリミティブ型

もっとも基本的な型定義です。「string, number, boolean, symbol, bigint, null, undefined」がプリミティブ型に該当します。

const price: number = 10000;
const sum: string = price // TS2322: Type 'number' is not assignable to type 'string'.

上記のように、プリミティブ型で定義した変数には、異なる型の値を代入することができません。

TypeScript型入門２｜リテラル型

リテラル型は以下のように、代入可能な値を直接指定する型定義です。

const firstName: 'Takaaki' = 'Takaaki';
const lastName: 'Inagaki' = 'Takaaki'; // TS2322: Type '"Takaaki"' is not assignable to type '"Inagaki"'.
const member: 3 = 3; // 数値型も可能
const alwaysTrue: true = true; // 論理型も可能

決まった値を受け取ることが明白な場合は、リテラル型で詳細に定義することでより型安全になりますね。

TypeScript型入門３｜オブジェクト型

JavaScriptのオブジェクト型は、プロパティを複数持つことができます。

TypeScriptでオブジェクト型を扱う際は、そのオブジェクトの構造に加えて、各プロパティの型を定義することができます。

interface Playground {
  name: string
  members: number
}

const playground: Playground = {
  name: '株式会社Playground',
  members: 3
}

TypeScriptに存在するinterfaceという構文を用いて、オブジェクト型の「構造」を定義し、別名をつけます。（上記コードでいうとPlaygroundという別名をつけている）

TypeScript型入門４｜配列型

配列型は、配列内の要素がどのような型を持つのかを定義することが可能です。

const ids: string[] = ["hoge", "foo", "bar"] // 文字列の要素を持つ配列
ids.push(1234) // これはNG　TS2345: Argument of type '1234' is not assignable to parameter of type 'string'.

interface User {
  uid: string
  username: string
}

const users: Array<User> = [
  {uid: "hoge", username: "fuga"},
  {uid: "foo", username: "bar"},
]

また、先ほどのinterfaceを用いて「オブジェクト型の要素を複数持つ」配列の型定義も上記の通り、Array<T>という形で定義できます。

TypeScript型入門５｜関数型

関数型もTypeScriptでよく定義しますね。Reactで開発しているときは必須です。

関数型は (引数: 引数の型) => 戻り値の型のように定義します。

ただし、アロー関数にアノテーションで型定義する場合は、以下のように定義します。

// 引数はDate型、戻り値は文字列型
const dateToString = (date: Date): string => {
  return date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate()
}

// 明確な戻り値がない関数は、戻り値の型にvoid型を定義する
const returnVoidFunction = (text: string): void => {
  console.log(text)
}

以上がTypeScriptの基本的な型定義でした！

次回はunion型やジェネリクスについて記述しようと思います。

特に「ジェネリクス」は使えるようになると「TypeScript完全に理解した」という錯覚を覚えます。

そんなことないんですけどね。それでは！