【初心者向け】TypeScriptの静的型付けとは何か？基本や使い方を実例で解説(関数の型指定やany型, unknown型,型注釈)

TypeScript-TS-prograshi（プロぐらし）-kv TypeScript
記事内に広告が含まれていることがあります。

TypeScriptを学び始めるなら、まずは静的型付けの仕組みを理解することが最優先です。

JavaScriptに「型」というセーフティネットを加えることで、開発効率とコード品質は飛躍的に向上します。

この記事では、TypeScriptの静的型付けの基本を実例を交えて解説しています。

変数の型指定はもちろん、関数の型を定義する方法から、any型やunknown型といった特殊な型がどのような役割を果たすのかまで紹介しています。


TypeScriptの静的型付けとは何か？

TypeScriptの静的型付けとは、プログラムを実行する前に、変数や関数の引数などがどのような種類のデータ（型）を持つかを決めておく仕組みのことです。

静的型付けを使うことで、元となるJavaScriptにはない、開発の初期段階でのエラー検出やコードの予測・補完のしやすさといったメリットがあります。

ご参考

そもそもTypeScriptとは何かについての詳しい解説は下記をご参考ください。

＞ TypeScriptとは何か？JavaScriptとの違いや使い方を実例で解説！(.tsファイルとtscの使い方)


データ型と静的型付けの実例

プログラミングにおける「型」とは、扱うデータの種類のことで、例えば以下のようなものがあります。

  • number: 20 や 3.14 のような数値
  • string: “こんにちは” のような文字列
  • boolean: true（真）や false（偽）のような真偽値


静的型付けでは、変数を使う前に「この箱（変数）には数値しか入れませんよ」「この箱には文字列しか入れませんよ」と宣言（約束）します。

変数などに対して「:」を使って型を指定します。

変数: 型
Point

配列の場合は、型[] のように指定します。


例えば、ageという変数は数値のみ、nameという変数は文字列のみを受け付けるようにしたい場合は、以下のように記述します。

let age: number = 25; //数値 (number) 型 と宣言
let name: string = "Taro"; //文字列 (string) 型 と宣言

この状態で、ageに文字列を入れるとエラーになります。

let age: number = 25;
age = "二十五"; // エラー

このように、プログラムを実行する前に、TypeScriptがこの間違いを指摘してくれる、これが静的型付けの最も重要な働きです。


静的型付けの対象

静的型付けは、変数のみでなく、値を持つあらゆる要素に対して適用することができます。


変数 (Variables)

最も基本的で頻繁に使用される対象です。変数に格納されるデータの種類（型）を宣言します。

let count: number = 10;
const userName: string = "Alice";

宣言された型（numberやstring）以外の値を代入しようとすると、コンパイル時にエラーになります。


関数の引数 (Function Parameters)

関数が受け取る入力データに対して型を定義します。

function multiply(a: number, b: number) {
  // ...
}

関数を呼び出す際に、引数として宣言された型（number）以外の値を渡すとエラーになります。

関数の戻り値 (Function Return Values)

関数が返す出力データに対して型を定義します。関数名とカッコに対して「: 型」をつけます。

function calculateArea(width: number, height: number): number {
  return width * height; // 戻り値は必ず数値
}

関数の本体内で、宣言された型（この場合はnumber）以外のデータを返そうとするとエラーになります。


クラスのプロパティ (Class Properties / Fields)

クラス内のインスタンスが持つデータ（プロパティ）に対して型を定義します。

class User {
  id: number; // プロパティの型
  name: string; // プロパティの型

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

Userオブジェクトを作成した後、user.idに文字列を代入しようとするとエラーになります。


オブジェクト (Object)

JavaScriptでよく使われるデータ構造に対しても、その中身の型を定義できます。

interface Point {
  x: number;
  y: number;
}

let coordinate: Point = { x: 5, y: 10 };


配列 (Array)

配列の静的型付けは少し異なります。型[] のように記述します。

let 変数名: 要素の型[];


例えば以下のように記述します。

let names: string[] = ["Alice", "Bob", "Charlie"]; // 文字列の配列
let scores: number[] = [85, 92, 78];               // 数値の配列
let flags: boolean[] = [true, false, true];      // 真偽値の配列
もう一つの方法

Array<型>で配列の静的型付けをすることも可能です。（ジェネリクスを使った記法）

配列の静的型付けは少し異なります。型[] のように記述します。

let 変数名: Array<要素の型>;

例えば以下のように記述します。

let scores: Array<number> = [99, 88, 77];


その他

上記以外にも、高度な型付けの対象が存在します。

  • 型引数 (Generics)
    汎用的なクラスや関数を作成する際に、後から決まる型を抽象的に扱うための仕組み。

  • タプル (Tuples)
    要素の数とそれぞれの型があらかじめ決まっている配列。
    • 例: let position: [number, number] = [10, 20];

  • 関数の型 (Function Types)
    「特定の引数の型と戻り値の型を持つ関数」そのものを型として定義する。
    • 例: type Callback = (data: string) => void;

  • nullやundefined
    TypeScriptの設定によっては、これらの値も特定の型として厳密に扱われます。
まだまだたくさんある

TypeScriptの静的型付けには、他にも以下のようなものがあります。

  • ジェネリクス
  • ユーティリティ型
  • 型ガード
  • 型アサーション


any型

any型とは何か？

TypeScriptの静的型付けシステムにおいて「何でもあり」を意味する特別な「any型」があります。

: anyをつけると、TypeScriptによる型チェックを完全に無効化します。

let value: any = 42; // any型なので、数値を入れる
console.log(value); // 42

value = "Hello"; // 後から文字列を代入してもエラーにならない
console.log(value); // "Hello"

value = { name: "Taro" }; // オブジェクトも代入できる
console.log(value); // { name: "Taro" }


any型の重要ポイント

any型の重要なポイントは、その変数に対して存在しないプロパティやメソッドを呼び出しても、コンパイル時にエラーにならないことです。

let data: any = "TypeScript";

// 文字列型には存在しないメソッドを呼び出している
// ※TypeScriptはエラーを出さないが、実行時にJavaScriptのエラーになる可能性が高い
data.toUpperCase(); // これはOK (存在するメソッド)
data.doSomethingNonExistent(); // TypeScriptはチェックしない


any型の使用は極力避ける

any型は非常に便利ですが、静的型付けのメリットを打ち消してしまうため、使用は最小限に留めることが推奨されます。

新しいTypeScriptコード: 新規に書くコードでは、可能な限りより具体的な型（例: string, numberなど）や、より安全な型（例: unknown）を使います。


any型はいつ使うか？

any型は以下のような場合に使用します。

  1. 外部ライブラリとの連携
    • 型定義ファイル（d.tsファイル）が存在しない古いJavaScriptライブラリや、非常に動的な外部データを取り扱う場合。
  2. プロトタイピング/移行期
    • 既存のJavaScriptコードをTypeScriptに移行する初期段階で、型定義に時間をかけたくない場合や、型が複雑すぎてすぐには定義できない場合。


unknown型

TypeScript 3.0以降、any型の安全な代替として「unknown型」が導入されました。

nknown型を使うと、まず値を受け入れてから、プロパティを呼び出す前に型ガードを使って型を絞り込むことが強制されます。

例：if (typeof value === 'string')など

これにより、安全性を保ちながら外部からの不定なデータを受け入れることができるため、現代のTypeScriptでは any よりも unknown が推奨されます。

特徴any型unknown型
型チェック無効化 (チェックなし)有効 (安全性が保たれる)
代入どんな型にも代入できるどんな値でも代入できる
操作自由にプロパティやメソッドを呼び出せる呼び出せない。型ガードが必要


型注釈とは何か？

: 型や型[]のような記述方法を「型注釈」と言います。

なお、静的型付けは「型をチェックする仕組み全体」のことで、型注釈は「コードに型を明示する記述」のことです。

タイトルとURLをコピーしました