TypeScriptのデータ型

TypeScriptとは？

TypeScript（タイプスクリプト）とは、Microsoft社が開発したオープンソース言語です。

簡単にいうと、型定義が可能なJavaScriptです。

下記コードは、JavaScriptのコードです。

const hello = (name) => {
    console.log(`${name}さん、こんにちは`)
}

次に、TypeScriptのコードを見てみましょう。

const hello = (name: string): void => {
    console.log(`${name}さん、こんにちは`)
}

違いとしては、以下の通りです。

上記以外にも、相違点は多々ありますが、基本的には型定義ができることが大きな相違点です。

型定義ができるメリットとしては、思わぬバグを未然に防げる点だと思います。

TypeScriptのデータ型

TypeScriptにも他の言語と同様にデータ型が存在します。

今回は、基本的な型について紹介します。

number

number型は、数値を扱う型です。

JavaScript同様に、floatなどの浮動小数点を扱う型は存在せず、数値は全てnumber型として扱います。

宣言と初期化は次のように記述します。

let num: number = 10

string

stringは、文字列を扱うデータ型です。

他の言語と比較しても、特に特別なことはありません。

宣言と初期化は次のように記述します。

let str: string = 'test'

boolean

booleanは、論理値を扱うデータ型です。

他の言語と同様に、boolean型が扱える値は「true」または「false」の２つだけです。

宣言と初期化は次のように記述します。

let bool: boolean = false

undifined

undifined（アンディファインド）は、参照先に値が存在しない状態を表すデータ型です。

例えば、初期化していない変数を引数にもつ関数を実行しようとすると結果はundifinedになります。

関数内で「return」のみ（本来は「return 値」）を記述しているものがありますが、

そのようなコードは、undefinedを暗黙的に返して処理を中断させています。

null

null（ヌル）は、undifinedと似ていて参照先に値が存在しない状態を表すデータ型です。

違いとしては、nullはTypeScriptやJavaScript上では自然に発生することがない点です。

なぜ、自然発生しないのに型として存在するかというと、

サーバーサイドからデータを受け取る際に、その値がnullの場合があるためです。

今回は宣言と初期化と一緒に値がnullかどうか確かめるコードを紹介します。

const test: null = null
if (test === null) {
    return true
}

注意点として、typeofメソッドを使用して比較しようとすると、

if文の条件判定はfalseになります。

「typeof test」の戻り値は、「object」になるためです。

少し特殊なデータ型

ここでは、少し特殊な（扱いが難しい）データ型について紹介します。

TypeScriptの開発をする上では避けては通れない道なので、覚えておきましょう。

配列

まずは、配列です。配列は値を指定した型でまとめて管理するデータ型(構造)です。

配列は他の言語でも出てきますが、苦手な方も多いと思います。

TypeScriptにはJavaのListなどが存在せず、全て配列として扱います。

ただし、Javaの配列よりは扱いやすいので、安心してください！

配列の宣言と初期化は次のように記述します。

// 初期値が空の配列の場合
let array: string[] = []

// 初期値を格納しておきたい場合
let array2: string[] = ['aaa', 'bbb']

数値型の配列を作りたい場合は、「let array: number[] = [1, 2, 3]」と記述します。

オブジェクト

オブジェクトは、キー（鍵）とバリュー（値）のペアで管理されるデータ型(構造)です。

キーとバリューのペアは１つのオブジェクトに複数定義することも可能です。

では、実際のサンプルを見てみましょう。

下記のように、{ }を使用して型を定義します。

const obj: {name: string, age: number} = {name: 'test', age: 20}

次にオブジェクトを配列にするコードを紹介します。

const obj: {name: string, age: number}[] = [
    {name: '田中', age: 20},
    {name: '山田', age: 33},
]

次は、「？」をつけて、省略ができるように設定をしてみます。

const obj: {name: string, age?: number}[] = [
    {name: '田中', age: 20},
    {name: '山田'},
]

上記のようにプロパティ（nameとかage）の後ろに「？」をつけると、

オブジェクト内に対象のプロパティが無くてもエラーにはなりません。

Enum

Enum(イーナム)は、定数をまとめて管理できるデータ型(構造)です。

列挙型と呼ばれます。宣言と呼び出しは、このように記述します。

enum AlignText {
    TOP = 'TOP',
    BOTTOM = 'BOTTOM',
    LEFT = 'LEFT',
    RIGHT = 'RIGHT',
}

console.log(AlignText.BOTTOM) // BOTTOM

上記では、文字列の定数を扱いましたが、数値の定数を扱うことも可能です。

enum AlignText {
    TOP = 1,
    BOTTOM = 2,
    LEFT = 3,
    RIGHT = 4,
}

console.log(AlignText.BOTTOM) // 2

数値の指定(= ?)をしなくても、正常に処理が行われます。

その場合は、自動で０（ゼロ）から順番に採番されます。

Union

Union（ユニオン）は、複数の型を組み合わせて使用できるデータ型です。

「｜」（パイプ）記号を使用して、下記のように記述します。

const test1: number | string = 10
const test2: number | string = 'test2'

型の便利機能

TypeScriptには、便利な機能が多数ありますので、いくつか紹介します。

型エイリアス

型エイリアスは、型に名前をつけることができます。

下記のコードのように、TypeScriptは複数の型を定義できます。

そのような場合に、何度も同じ型を宣言しなくても良いようにするために使われます。

type NumOrStr = number | string

function typeCheck(val: NumOrStr) {
    console.log(typeof val)
}

typeCheck(10)   // number
typeCheck('aa') // string

また、関数も定義することができます。

type StrOrNum = string | number 
type TypeCheck = (val: StrOrNum) => string // 関数の型定義

function show(val: StrOrNum, typeCheck: TypeCheck) {
    console.log(`${val}は${typeCheck(val)}型です。`)
}

// 引数で受け取った値の型を返却する関数
function typeCheck(val: StrOrNum): string {
    return typeof val
}

show('test', typeCheck) // testはstring型です。
show(123, typeCheck) // 123はnumber型です。

ちなみに、下記のように特定の値しか許容しない定義の仕方もあります。(リテラル型)

type Direction = 'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT'

インターフェース

インターフェースは、型エイリアスと似ていて、型に名前をつけることができます。

違いとしては、型エイリアスよりも拡張性が高い点や、若干ですが、記述の仕方が異なったりします。

インターフェースの定義は下記のように記述します。

interface Human {
    name: string,
    age: number,
}

インターフェースの便利な点は、継承できたり、追加することができることだと思います。

interface Base {
    name: string,
    age: number,
}

// Baseインターフェースを継承したHumanインターフェースを定義
interface Human extends Base {
    // 追加で性別(gender)を定義
    gender: number
}

// 変数tanakaを作成(全てのプロパティに値を設定しないとコンパイルエラーになる)
const tanaka: Human = {
    name: 'tanaka',
    gender: 1,
    age: 30
}

また、クラスと一緒に使用されることが多いです。

クラスに対してインターフェースを実装するには、下記のように記述します。

// インターフェースの宣言
interface Human {
    no: number
    name: string
    show(): void
}

// implementsキーワードで実装
class Student implements Human {
    no: number
    name: string

    constructor(no: number, name: string) {
      this.no = no
      this.name = name
    }

    show(): void {
      console.log(`出席番号${this.no}番 ${this.name}さん`);
    }
}

const student = new Student(22, '田中');
student.show()

// 出席番号22番 田中さん

まとめ

TypeScriptには、様々な型がありJavaScriptをより便利なものに変えてくれます。

最初の慣れないうちは、難しいと感じますが、慣れてくると手放せなくなります。

特に型エイリアスやインターフェースは便利ですね！！