💭

【イラスト付き】型の種類【丁寧に解説】

2024/09/04に公開

はじめに

皆さんこんにちは。
今回はTypeScriptの型の種類をご紹介します。

TypeScriptは文字列や数値のような一般的な型以外にも特殊な型があります。今回はTypeScriptの型の種類についてご紹介します。

こんな人にオススメ

  • TypeScriptの型の種類が知りたい
  • TypeScriptの型ごとの特徴が知りたい

初めて学習する方にも分かるように、丁寧に解説していきます。
すでに利用されている方も、是非一度目を通していただけると嬉しいです。

😋 TypeScriptの型の種類をご紹介します♪

基本的な型

まずポイントをチェック

  • 基本データ型:数値、文字列、真偽値などの単純なデータの型
  • リテラル型:’Hello’型のように特定の値のみを許可

TypeScriptでもJavaScriptに標準的に備わっている基本的な型を利用できます。一般的に利用されるのはnumber、string、booleanです。

またTypeScriptでは特定の値のみを許可するリテラル型というものがあります。値自体を型として利用しています。これにより、厳密な値のチェックができます。

🍕 例えば、‘hello’型には文字列の’hello’のみ代入可能です。10型には数値の10のみ代入可能です。
TypeScript/02.type-variation/app.ts(基本的な型のみ抜粋)
// 基本データ型
let moji: string;
let kazu: number;
let singi: boolean;

// リテラル型
let hello: 'hello';
let ten: 10;

😋 文字列や数値の他、具体的な値も型として利用できます♪

高度な型

まずポイントをチェック

  • ユニオン型:複数指定した型のうちのどれか
  • タプル型:配列の要素数と型を固定

TypeScriptには基本データ型意外にも高度な型表現がいくつかあります。その中でも頻繁に見かける型としてユニオン型とタプル型という型表現があります。

ユニオン型

ユニオン型は「どれか」を表現する型です。複数の型を指定し、いずれかに該当する値のみを受け入れます。

型の指定は「|」で区切って行います。

TypeScript/02.type-variation/app.ts(ユニオン型のみ抜粋)
// ユニオン型
let doreka: string | number | boolean;

タプル型

タプル型は配列の要素の型と順番を制限します。例えば、1番目の要素はstring型、2番目の要素はnumber型のように指定できます。この場合、1番目の要素にnumber型の値を指定するとコンパイルエラーになります。

型の指定は「[]」の中に型名を順番に指定します。

TypeScript/02.type-variation/app.ts(タプル型のみ抜粋)
// タプル型
let kotei: [string, number];

😋 ユニオンはどれか、タプルは配列の要素の順番と型の指定をします♪

特殊な型

まずポイントをチェック

  • any型:どんな値でも許可
    • 型チェックを放棄することになる
  • unknown型:どんな値でも許可(型が不明な際に指定)
    • 型安全なany型とも言われる
  • never型:値なしの意味
    • 無限ループやエラー発生などで処理が終了しない関数の戻り値型に利用
    • 戻り値void型は、関数の実行が終了しても戻り値がないという意味なので別物

TypeScriptには特定の型を指さない特殊な型が存在します。

any型

any型はどんな値でも受け入れる型です。つまりコンパイラによる型チェックを放棄する型です。

TypeScriptのメリットを手放してしまい、型による安全なコーディングができなくなってしまいます。

なので、できるだけ利用は避けた方が良いです。

TypeScript/02.type-variation/app.ts(any型のみ抜粋)

// any型
let nandemo: any;

unknown型

unknown型は型が未定の場合に利用します。

any型のようにどんな値でも受け入れますが、型安全性は保っており、値の利用前に型をチェックしなければコンパイルエラーになります。

TypeScript/02.type-variation/app.ts(unknown型のみ抜粋)
// unknown型
let mitei: unknown;

never型

never型は値なしを意味する型であるため、値を代入することができません。

無限ループや例外をスローする関数の戻り値型として利用されます。

TypeScript/02.type-variation/app.ts(never型のみ抜粋)
// never型
let nashi: never;

😋 any, unknown, neverは具体的な値の型を示しません♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

型の種類について確認をしていただきました。
TypeScriptには基本的な型以外にも独特な型表現があります。
今回ご紹介したものはその中でもよく目にするものですので、まずはこちらの型を確認してみてください。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集
参考リンク集(サンプルコード)

Discussion