TypeScriptで驚くほど簡単！unknown型の15選解説

はじめに

TypeScriptのunknown型は、初心者でも簡単に学べる重要な型の1つです。

この記事では、unknown型の基本から応用まで、実例を交えながら15のステップでわかりやすく解説します。

ここで紹介する知識は、プログラミング初心者でも安心して取り組める内容となっております。

この機会にTypeScriptの魅力を存分に感じてください。

●TypeScriptとは

TypeScriptはJavaScriptに厳格な型システムを導入したプログラム言語です。

この言語は開発者によってコードの安全性を高めることができ、バグを早期に発見し、修正することが可能です。

さらに、大規模なプロジェクトでも効果を発揮し、コードの可読性と保守性を向上させます。

○TypeScriptの基本知識

TypeScriptは、次のような特徴を持っています。

□静的型付け

変数や関数の戻り値の型を宣言できます。

これにより、コンパイル時に型の不整合やエラーを検出できます。

□型推論

明示的な型宣言がない場合でも、TypeScriptはコードから型を推論します。

□クラスとインターフェイス

オブジェクト指向プログラミングを支援するための機能が豊富です。

□モジュールシステム

大規模なアプリケーションの開発を支援するためのモジュールシステムがあります。

○JavaScriptとの違い

TypeScriptとJavaScriptの主な違いは、前述したようにTypeScriptが静的型システムを提供している点です。

これにより、コードのエラーを早期にキャッチでき、リファクタリングやコードの読解も容易になります。

JavaScriptは動的型付け言語であるため、変数の型が実行時まで決定されません。

これが原因で、ランタイムエラーが発生しやすくなります。

しかしTypeScriptでは、型エラーをコンパイル時に検出することができ、これによってランタイムエラーのリスクを軽減できます。

また、TypeScriptはJavaScriptのスーパーセットであるため、JavaScriptコードはTypeScriptコードとしても機能します。

この相互運用性は、JavaScriptプロジェクトをTypeScriptに移行する際に大変便利です。

下記のサンプルコードでは、JavaScriptとTypeScriptでの関数定義の違いを表しています。

// JavaScriptの関数定義
function greet(name) {
  return "Hello, " + name;
}

// TypeScriptの関数定義
// このコードでは、文字列型の引数を受け取り、文字列を返す関数を定義しています。
function greet(name: string): string {
  return "Hello, " + name;
}

このコードを実行すると、名前を引数として受け取り、挨拶文を生成して返します。

ここではTypeScript版では引数と戻り値の型が明示的に宣言されている点が、JavaScript版との違いとなります。

●unknown型の入門

○unknown型の定義

TypeScriptのunknown型は非常に重要な型の1つであり、ある変数がどのような型を持つか予めわからない場合に有用です。

TypeScriptにはany型も存在しますが、unknown型は型安全性を保持するために導入されました。

unknown型の変数には任意の値を代入できますが、その変数を他の変数に代入する前や、メソッドを呼び出す前に型チェックが必要です。

例えば、下記のコードは変数aにunknown型を指定し、任意の値を代入するサンプルです。

このコードでは数値123を使ってデモンストレーションしています。

let a: unknown;
a = 123; // これは許されます

このコードでは、aという変数にunknown型を指定しています。

そして、それに数値123を代入しています。これはTypeScriptのコンパイラによって許される操作です。

○unknown型のメリット

unknown型の一番のメリットは、型安全性を保ちつつも、任意の型の値を受け入れることができる点にあります。

これによって、より堅牢なコードを書くことが可能となります。

unknown型を使用すると、開発者は変数の型を厳密にチェックすることが強制されます。

これによって、ランタイムエラーを防ぐことができます。

下記のサンプルコードでは、unknown型を用いて関数内で型チェックを行うデモを表しています。

コメントには日本語を使用して、何を行っているのかを詳細に説明しています。

function isString(value: unknown): value is string {
    return typeof value === 'string'; // このコードでは、valueが文字列型かどうかを確認しています。
}

const value: unknown = "Hello, TypeScript!";
if (isString(value)) {
    console.log(value.toUpperCase()); // このコードを実行すると、valueが文字列型であるため、toUpperCaseメソッドを安全に呼び出すことができます。
} else {
    console.log("Not a string"); // このコードを実行すると、valueが文字列型でない場合にこのブロックが実行されます。
}

このコードはまず、isStringという関数を定義しています。

この関数はunknown型の引数を受け取り、その引数がstring型かどうかを判断します。

次に、valueというunknown型の変数を宣言し、文字列を代入しています。

最後に、isString関数を使用して型ガードを行い、valueが文字列である場合とそうでない場合の両方で異なるコンソールログを表示します。

○unknown型のデメリット

unknown型を使用すると、コードがいくぶん冗長になる可能性があります。

また、開発者が型チェックを正確に行う責任が増えるため、コードの記述量が増加することがあります。

さらに、unknown型を適切に使用するためには、型ガードといったTypeScriptの高度な機能に精通している必要があります。

下記のコードは、unknown型の変数がどのようなデータ型でも受け入れるが、それを利用する前に型チェックを行う必要があることを示しています。

let data: unknown = fetchUserData(); // このコードでは、fetchUserData関数から取得したデータをunknown型の変数dataに代入しています。

if (typeof data === 'string') {
    console.log(data.toUpperCase()); // このコードを実行すると、dataが文字列型の場合、その文字列を大文字に変換してコンソールに表示します。
} else {
    console.log("Data is not a string"); // このコードを実行すると、dataが文字列型でない場合にこのブロックが実行されます。
}

このコードスニペットでは、fetchUserData関数（この関数は実際にはこのコード内には定義されていませんが、デモ目的で使用しています）から取得したデータをunknown型の変数dataに代入しています。

その後、dataが文字列型であるかどうかを判断し、文字列型である場合はその文字列を大文字に変換してコンソールに表示します。

そうでない場合、異なるメッセージがコンソールに表示されます。

●unknown型の基本的な使い方

TypeScriptのunknown型は非常に強力かつ便利な機能です。

プログラミング初心者でも簡単に取り入れることができます。

その基本的な使い方について詳しく解説します。

○基本的な代入と型チェック

unknown型はTypeScriptにおける特別な型の1つであり、変数がどのような型を持つか未知であることを表します。

ここでは、unknown型の変数への基本的な代入と、その型チェック方法について詳しく解説します。

□サンプルコード1：基本的な代入と型チェック

下記のサンプルコードは、unknown型の変数に異なる型の値を代入し、その後型ガードを使って型チェックを行う基本的な流れを表しています。

コードの詳細な説明も合わせてご確認ください。

let value: unknown;

// 数値を代入
value = 123;

// 文字列を代入
value = "Hello, TypeScript!";

// 型ガードを使用して型チェック
if (typeof value === 'string') {
  console.log(value.toUpperCase());  // このコードはvalueがstring型の時にのみ実行されます
} else {
  console.log('valueは文字列ではありません');  // このコードはvalueがstring型でない時に実行されます
}

このコードでは、まずunknown型の変数valueを宣言しています。

次に、それに数値と文字列を代入しています。

そして、typeofを使った型ガードを利用して、valueの型が文字列であるかどうかをチェックしています。

このコードを実行すると、valueが文字列であることが判明するので、「HELLO, TYPESCRIPT!」という結果がコンソールに表示されます。

もしvalueが文字列でなかった場合、’valueは文字列ではありません’と表示されます。

○型ガードを利用した使用方法

unknown型はTypeScriptにおける特別な型の一つであり、あらゆる型に代入できる点でany型と似ているが、安全性の観点から他の型へのアクセスや操作が制限されます。

この性質を活かし、型ガードを利用することで安全かつ効果的にコードを書くことができます。

まずは、基本的な型ガードの使用方法を見てみましょう。

□サンプルコード2：型ガードの基本的な使用方法

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function example(value: unknown) {
  if (isString(value)) {
    console.log(value.toUpperCase()); // このコードでは、isString関数を使ってvalueがstring型であるかをチェックしています。この関数を用いて型ガードを行うことで、valueがstring型であると確認された時点で、その内部でstring型のメソッドを安全に呼び出せます。
  } else {
    console.log('Not a string');
  }
}

example('Hello World');
example(123);

このコードを実行すると、第一引数に文字列を渡した場合、文字列の全ての文字を大文字に変換したものをコンソールに表示します。

数値を渡した場合は、’Not a string’と表示します。このように型ガードを使用することで、コンパイル時に型の安全性を保証しつつ、ランタイム時にも適切な動作を確認できます。

また、このコード例では、isStringという関数を型ガードとして利用しています。

この関数はunknown型の値を受け取り、それがstring型であるかどうかを判定しています。

この関数がtrueを返す場合、その後のコード内でvalueはstring型として扱われます。

このコードの実行結果、まずは’Hello World’が渡された時には、’HELLO WORLD’という文字列がコンソールに表示されます。

次に123が渡された場合には’Not a string’と表示されます。

●unknown型と他の型との関係

TypeScriptの型システムの中で、unknown型は非常にユニークな存在として認識されています。

それでは、unknown型と他の代表的な型との関係を詳しく探ることで、その特性や有効な使い方を理解していきましょう。

○unknown型とany型の違い

TypeScriptでは、型チェックの柔軟性を持たせるためにany型が提供されています。

any型を使用すると、型チェックをスキップすることができるので、JavaScriptコードをTypeScriptに移行する際などに役立ちます。

しかし、この柔軟性が逆に型安全性を損なう場面もあり得るのです。

それに対して、unknown型は、任意の値を保持できるものの、その値に対して何らかの操作を行う前に型チェックを強制します。

これにより、より高い型安全性を確保しつつ、柔軟性も保持することができます。

□サンプルコード3：unknown型とany型の比較

// any型の例
let anyValue: any;
anyValue = "TypeScript";
console.log(anyValue.length); // 10
anyValue = 42;
console.log(anyValue.length); // undefined（エラーは出ない）

// unknown型の例
let unknownValue: unknown;
unknownValue = "TypeScript";

// この段階で.lengthプロパティにアクセスしようとするとエラーになる
// console.log(unknownValue.length); // エラー: Object is of type 'unknown'.

if (typeof unknownValue === "string") {
  console.log(unknownValue.length); // 10（型チェック後なのでエラーが出ない）
}

このコードでは、any型とunknown型の違いを表しています。

any型では、型が何であるかに関係なく、任意のプロパティやメソッドへのアクセスや操作が許されます。

これに対して、unknown型の変数に対して何らかの操作を行う前に、型チェックを行う必要があります。

このコードを実行すると、any型の部分では10とundefinedが順に出力されます。

一方で、unknown型の部分では、型チェック後に10が出力されるのを確認できます。

○unknown型とunion型との関係

TypeScriptでは、異なる型の値を持つことができるunion型があります。

unknown型は安全な型付けを保証するために使用される特別な型で、どのような型の値も保持できますが、その値に対する操作は制限されます。

ここでは、unknown型とunion型の関係について、詳細な説明とサンプルコードを交えて解説します。

まず、unknown型とは、TypeScriptで任意の型の値を代入できる型です。

しかし、unknown型の変数に対しては、型の種類が特定されるまで、他の型の変数に代入したり、メソッドやプロパティを利用したりすることはできません。

これにより、型安全を保持しつつ、柔軟なコーディングが可能になります。

一方、union型は、複数の異なる型のいずれかの型を持つことができる型です。

これにより、一つの変数が複数の異なる型の値を持つことが可能になります。

次に、unknown型とunion型の関係をサンプルコードを用いて詳しく見ていきましょう。

□サンプルコード4：unknown型とunion型の使い方

// unknown型の変数を宣言
let unknownValue: unknown;

// union型の変数を宣言。この変数はnumber型またはstring型の値を持つことができます
let unionValue: number | string;

// ここではunknownValueにstring型の値を代入しています
unknownValue = "TypeScriptのunknown型";

// 型ガードを使用して、unknownValueがstring型であることを確認します
if (typeof unknownValue === "string") {
  // 型ガードが通ったので、unionValueにunknownValueを代入できます
  unionValue = unknownValue;
} else {
  console.log("unknownValueはstring型ではありません");
}

console.log(unionValue); // 出力: TypeScriptのunknown型

このコードでは初めにunknown型の変数unknownValueと、number型またはstring型の値を持つことができるunion型の変数unionValueを宣言しています。

次にunknownValueにstring型の値を代入し、型ガードを使用してunknownValueがstring型であることを確認しています。

確認が取れたため、unionValueにunknownValueを代入することができます。

●unknown型の応用

TypeScriptのunknown型は非常に有用であり、その応用例は数多く存在します。

ここでは、unknown型を関数のパラメータとして使用する方法に焦点を当てて、詳細な説明とサンプルコードを解説します。

実行後のコードも交えて、実行結果に関する詳細な説明も行います。

○関数としてのunknown型

関数のパラメータとしてunknown型を利用することは、安全なコーディングを実現するための効果的な手段です。

特定の型への変換前に、値がその型に適合するかどうかを検証できるため、ランタイムエラーを防止することが可能です。

□サンプルコード5：関数としてのunknown型の使い方

下記のサンプルコードは、unknown型を関数のパラメータとして使用し、型ガードを利用して適切な型チェックを行う方法を表しています。

ここでは、「isString」関数を作成し、unknown型のパラメータが文字列かどうかを検証します。

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function processValue(value: unknown) {
  if (isString(value)) {
    console.log(`文字列の長さ: ${value.length}`); // valueはここでstring型として扱われる
  } else {
    console.log("これは文字列ではありません");
  }
}

// 実行例
processValue("Hello, TypeScript!");
processValue(12345);

このコードでは関数isStringを使ってvalueを検証しています。

このコードを実行すると、最初の呼び出しでは「文字列の長さ: 18」と表示され、次の呼び出しでは「これは文字列ではありません」と表示されます。

このようにunknown型を使用すると、型安全性を保つことができます。

また、valueが文字列である場合には、文字列のメソッドとプロパティを安全に使用できます。

○オブジェクトとしてのunknown型

一般的なオブジェクトと異なり、unknown型のオブジェクトに対しては、任意のプロパティへのアクセスやメソッドの実行が制限されます。

これにより、型安全性が保たれます。

ここでは、オブジェクトとしてのunknown型の基本的な使い方とその利点について詳しく解説します。

まず、unknown型の変数をオブジェクトとして扱う基本的な方法を確認しましょう。

下記のサンプルコードでは、unknown型の変数をオブジェクトとして利用しています。

□サンプルコード6：オブジェクトとしてのunknown型の使い方

let data: unknown;
data = {
  name: "Taro",
  age: 25,
};

if (typeof data === "object" && data !== null) {
  console.log("このオブジェクトは非nullのオブジェクトです。");
  // ここでオブジェクトとしての操作が可能になります
} else {
  console.log("このデータはオブジェクトではありません。");
}

このコードでは、unknown型の変数dataにオブジェクトを代入しています。

その後、dataが非nullのオブジェクトであるかどうかをチェックしています。

チェックが成功した場合、オブジェクトとしての操作が可能になります。

このコードを実行すると、「このオブジェクトは非nullのオブジェクトです。」と表示されます。

実行後のコードは次の通りです。

let data: unknown;
data = {
  name: "Taro",
  age: 25,
};

if (typeof data === "object" && data !== null) {
  console.log("このオブジェクトは非nullのオブジェクトです。"); // この行が実行されます
} else {
  console.log("このデータはオブジェクトではありません。");
}

実行結果として、「このオブジェクトは非nullのオブジェクトです。」と表示されます。

○配列としてのunknown型

配列としてのunknown型は、異なる型の要素を含む配列を扱う際に特に役立ちます。

これにより、TypeScriptは型安全性を保ちながら、JavaScriptの動的な側面を利用することが可能となります。

それでは、サンプルコードを通じて、実際にどのように配列としてのunknown型を活用できるのか見てみましょう。

□サンプルコード7：配列としてのunknown型の使い方

const arrayUnknown: unknown[] = [123, "TypeScript", true];

for (const element of arrayUnknown) {
    if (typeof element === "string") {
        console.log(`${element}は文字列です。`);
    } else if (typeof element === "number") {
        console.log(`${element}は数字です。`);
    } else if (typeof element === "boolean") {
        console.log(`${element}は真偽値です。`);
    } else {
        console.log(`${element}は他の型です。`);
    }
}

このコードを実行すると、console.logを通じて各要素の型が表示されます。

まず、arrayUnknownという名前の配列がunknown[]型として定義され、異なる型の要素を含む配列が代入されます。

その後、forループを用いて配列をイテレートし、各要素の型をtypeofオペレータを使って確認します。

そして、確認した型に基づいてコンソールにメッセージが表示されます。

次に、このコードを実行した場合の結果を解説します。

このコードが実行されると、それぞれの要素が何の型であるかを示すメッセージがコンソールに表示されます。

具体的には、次のような結果が表示されます。

123は数字です。
TypeScriptは文字列です。
trueは真偽値です。

●unknown型のカスタマイズ方法

TypeScriptでは、データ型を安全かつ効率的に扱うための多くの機能が提供されています。

中でも、unknown型はそのユニークな性質とカスタマイズの柔軟性から、多くのプログラマーに支持されています。

ここではunknown型をカスタマイズする方法について、特にカスタム型ガードの作成に焦点を当てて詳細に解説します。

○カスタム型ガードの作成

カスタム型ガードは、unknown型の変数が特定の型であるかどうかを動的に確認する関数を作成することによって実現します。

これにより、コードの安全性を保ちながらも、型の柔軟性を保つことが可能です。

□サンプルコード8：カスタム型ガードの作成と使用

ここでは、unknown型の変数がstring型であるかどうかを確認するカスタム型ガードの作成方法と使用例を紹介します。

まず、次のようなカスタム型ガードを作成します。

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

このコードでは、isStringという関数を定義しています。

この関数は、引数valueがunknown型を受け取り、valueがstring型であるかどうかを確認します。

value is stringという型予言を使って、この確認を行います。

次に、この型ガードを利用したコードの例を見ていきます。

let value: unknown = "Hello TypeScript";

if (isString(value)) {
  console.log(value.toUpperCase()); // 実行される: "HELLO TYPESCRIPT"
} else {
  console.log("Value is not a string");
}

このコードを実行すると、value変数がstring型であるため、isString関数がtrueを返し、”HELLO TYPESCRIPT”という文字列がコンソールに出力されます。

○マッピング型を利用したカスタマイズ

TypeScriptでは、マッピング型を利用することで型の変換や組み合わせを効果的に行うことができます。

ここでは、マッピング型を利用したカスタマイズについて、具体的なサンプルコードとともに詳細に解説します。

まず、マッピング型とは、既存の型を新しい型に変換する際に使用する一種のテンプレートともいえるものです。

このマッピング型を活用することで、unknown型のデータを安全かつ効率的に扱うカスタマイズが可能となります。

ここでは、マッピング型を利用したサンプルコードを表し、その後にそのコードの詳細な解説と実行結果を交えて説明します。

□サンプルコード9：マッピング型を利用したカスタマイズ方法

type MyMappedType<T> = {
  [P in keyof T]: unknown;
};

function processObject(obj: MyMappedType<any>): void {
  // ここでobjを処理します
  console.log(obj);
}

const sampleObj = {
  name: "山田",
  age: 30
};

processObject(sampleObj);

このコードではマッピング型を使って新しい型MyMappedTypeを作成しています。

この型はジェネリクスを使用しており、任意の型Tに対してその全てのプロパティをunknown型に変換します。

そして、processObjectという関数を定義して、この関数内でMyMappedTypeを利用しています。

関数processObjectは、一つの引数objを受け取り、そのobjの型はMyMappedType<any>として定義されています。

そして関数内で単純にobjをconsole.logで出力しています。

実行すると、次のような結果が得られます。

{ name: '山田', age: 30 }

実行すると、objのプロパティがunknown型になっているのにも関わらず、元のオブジェクトのプロパティがそのまま出力されることがわかります。

これは、unknown型はコンパイル時に型の安全性を保証するためのものであり、実行時には元の型の情報が保持されているためです。

●注意点と対処法

TypeScriptでunknown型を使う際には、注意が必要な点やよくあるトラブルがいくつかあります。

ここでは、これらのポイントを詳しく解説していきます。

特に初心者の方や、unknown型の使用に慣れていない方にとって役立つ情報を詳細にまとめているので、じっくりと読み進めてください。

○エラーハンドリングの方法

unknown型は、名前の通り、型が不明な値を表します。

そのため、直接的な操作やアクセスを試みるとコンパイラーエラーが発生する可能性があります。

これを適切にハンドリングする方法について見ていきましょう。

□サンプルコード10：エラーハンドリングの基本

function handleUnknown(value: unknown): string {
    if (typeof value === 'string') {
        return value; // valueはstring型として扱える
    } else if (typeof value === 'number') {
        return value.toString(); // number型として扱い、文字列に変換
    } else {
        return "不明な型の値です";
    }
}

const result = handleUnknown(123);
console.log(result); // 123という数字が文字列として出力される

このコードでは、関数handleUnknown内で受け取ったvalueの型をtypeofを使ってチェックしています。

stringやnumberといった基本的な型であれば、その型に応じた処理を行います。

それ以外の場合は、”不明な型の値です”という文字列を返します。

このコードを実行すると、handleUnknown関数に数値123を渡しているので、それがnumber型として判定され、.toString()メソッドで文字列に変換されます。

結果として、console.logには”123″という文字列が出力されます。

○パフォーマンスに関する注意点

TypeScriptを使いこなす上で無視できないのが、パフォーマンスの観点です。

特に、unknown型を利用する際にはいくつかのパフォーマンスに関わる要点を心に留めておく必要があります。

ここでは、それらの注意点とそれに関連したサンプルコードを詳細に解説します。

そして、サンプルコードの解説後には、そのコードの実行結果とその意味も交えてご説明いたします。

まず、一般的なパフォーマンスの観点からの注意点として次のような点が挙げられます。

1. 適切な型注釈の使用：不必要な型変換はパフォーマンスの低下を招く可能性があります。
2. 適切なデータ構造の選定：データの量や操作の性質によって、適したデータ構造を選ぶことが重要です。

これらの観点を踏まえて、次のサンプルコードを見ていきましょう。

□サンプルコード11：パフォーマンス最適化のコーディング例

function processData(data: unknown) {
  if (typeof data === 'string') {
    // このコードではstring型としてdataを使っています。文字列操作を行います。
    console.log(data.toUpperCase());
  } else if (Array.isArray(data)) {
    // このコードではarray型としてdataを使っています。配列の要素数を表示します。
    console.log(data.length);
  } else {
    // このコードではdataがstring型でもarray型でもない場合の処理を行っています。
    console.log('Unknown data type');
  }
}

// このコードを実行すると、dataの型がstring型であるため、toUpperCaseメソッドが実行され、大文字のHELLOが出力されます。
processData("Hello");

// このコードを実行すると、dataの型が配列型であるため、lengthプロパティが参照され、配列の長さである3が出力されます。
processData([1, 2, 3]);

上記サンプルコードの詳細な説明と解説を行います。

このコードは、引数として受け取ったdataの型を判定し、それに応じた処理を行う関数processDataを定義しています。

このコードでは初めに、dataがstring型であるかどうかをtypeof data === 'string'で確認しています。

もしstring型であれば, toUpperCaseメソッドを用いて大文字に変換したデータをコンソールに表示します。

次に、dataが配列型であるかどうかをArray.isArray(data)で確認しています。

配列型であれば, lengthプロパティを参照してその長さをコンソールに表示します。

もしdataがstring型でも配列型でもない場合、’Unknown data type’というメッセージをコンソールに表示します。

このコードを実行すると、初めのprocessData("Hello")の呼び出しでは、dataがstring型であるためtoUpperCaseメソッドが実行され、結果として”HELLO”という文字列がコンソールに表示されます。

続いてprocessData([1, 2, 3])の呼び出しでは、dataが配列型であるためlengthプロパティが参照され、結果として配列の長さである3がコンソールに表示されます。

まとめ

この記事では、unknown型についての基本から応用までの使い方や、その特性、注意点について詳細に解説しました。

そして、サンプルコードを通じて、実際のコーディング時にどのようにunknown型を活用できるかを具体的に解説しました。

これらの知識を元に、TypeScriptのコーディングの際に、unknown型を効果的に使用して、より安全で効率的なプログラムを作成することができるでしょう。

unknown型は初心者から経験者まで、幅広い層のプログラマーにとって、非常に有益な知識と言えます。

継続的にTypeScriptの学習を進める中で、unknown型の理解を深め、その可能性を最大限に活用してください。