【TypeScript】扱うデータの型を理解する。

今回はTypeScriptで必須となる型に関する記事です。

Reactでは頻繁にconstを使って定数を宣言します。

定数とは内容を変更することのできない記述の塊のことを意味しており、TypeScriptにおいてはconstに型の定義をする必要があります。

型の種類はさほど多くなく、また頻繁に使用するものは限定されるので、ここではよく利用する型について解説します。

よく利用する型の種類

文字列を定義するためのstring型と数値を定義するためのnumber型

まずはstring型とnumber型について説明します。

constの中身が文字列の場合はstring型を、数値になる場合はnumber型を定義します。

この二つは一番シンプルで分かりやすい型であり、プログラミングをする上で最も使用する型です。

さほど難しい型ではないので後ほど定義の方法について説明します。

正否を定義するためのboolean型

正否を定義するための型としてboolean型というのがあります。

constで宣言した定数の内容がTrueもしくはFalseを返す内容となっている場合は、boolean型を定義します。

オールマイティなany型

any型を定義しておけば型が一致しないことによるエラーは解消されます。

どの型でも全て受け入れるので、型定義をするのが楽ではあるのですが、
any型を使用してしまうと型定義をする意味がなくなってしまいます。

型定義をしておくことで、関数などの実行時に型不一致によるエラーを未然に防ぐことができるのですが、
any型でとりあえず定義しておいて、関数実行時に想定していた型と合わない場合に思わぬエラーが発生してしまいます。

なので、できるだけany型を使用するのは控えたほうがいいですが、TypeScriptを学び始めて型定義で四苦八苦する場合は、ひとまずany型を定義しておいて動くコードを作ることに専念するのでも良いと思います。

型定義の方法

ここからは型定義の方法をご説明します。

型定義の方法はいくつかあるのですが、今回は最もオーソドックスなプリミティブ型について方法をご説明します。

それではまず、constでいくつか定数を宣言してみます。

const Moji = "Moji";
const Kazu = 10;
const Check = true;

TypeScriptを使用していない場合は、上記の書き方で問題なく動作します。

TypeScriptの場合はこれらの定数に型定義が必要になります。

定義の方法は宣言した定数名の後にコロン「:」を付けて、定義する型を記述するだけです。

上記の三つの定数に型を定義すると以下のように書くことができます。

const Moji: string = "Moji";
const Kazu: number = 10;
const Check: boolean = true;

これだけで型定義は終了です。

また、型の後ろに[]を付けるだけで配列の定義をすることができます。

例えば、

const Mojis: string[] = ["MojiA", "MojiB", "MojiC"];

というように、文字列だけの配列に対して、上記のような記述をすることで配列の型定義をすることができます。

number型においても記述方法は同じになります。

この他にも型定義の方法はたくさんありますが、まずはこのプリミティブ型で定義して、コードを書く練習をしましょう。

他の型定義については、必要になった場合にあらためて記事にてご紹介したいと思います。

まとめ

• constによる定数に対して型定義が必要
• 定数で文字列を扱う場合はstring型を定義する。
• 定数で数値を扱う場合はnumber型を定義する。
• 定数で正否を扱う場合はboolean型を定義する。
• どんな方にも対応することができるany型はできる限り使用を控えること。
• any型を使用する場合は型不一致によりエラーが発生する可能性があるので注意が必要。
• 定数名の後ろにコロン「:」を付けて型を記述するだけで型定義が完了する（プリミティブ型）。
• 型の後ろに[]を付けることで配列の型定義をすることもできる。