TypeScript の any 型

概要: このチュートリアルでは、TypeScript の any 型と、コード内でそれを適切に使用する方法について学びます。

TypeScript の any 型の紹介

変数値の格納が必要になる場合があります。しかし、プログラムを書いている時にはその型が不明な場合があります。また、不明な値はサードパーティの API やユーザー入力から来ることもあります。

この場合、型チェックをオプトアウトして、コンパイル時のチェックを値が通過できるようにしたいと考えます。

例えば

let result: any;

result = 1;
console.log(result);

result = 'Hello';
console.log(result);

result = [1, 2, 3];
const total = result.reduce((a: number, b: number) => a + b, 0);
console.log(total);Code language: JavaScript (javascript)

出力

この例では

• まず、変数 result を any 型で宣言します。
• 次に、数値の 1 を result に代入し、その値をコンソールに表示します。
• 3 番目に、文字列リテラル 'Hello' を result に代入し、その値をコンソールに表示します。
• 最後に、数値の配列を result 変数に代入し、reduce() メソッドを使って total を計算し、total をコンソールに出力します。

もう 1 つの典型的な例を見てみましょう。

// json may come from a third-party API
const json = `{"latitude": 10.11, "longitude":12.12}`;

// parse JSON to find location
const currentLocation = JSON.parse(json);
console.log(currentLocation);
Code language: JavaScript (javascript)

出力

{ latitude: 10.11, longitude: 12.12 }Code language: CSS (css)

この例では、TypeScript は currentLocation 変数の値を any と推論しています。 JSON.parse() 関数によって返されたオブジェクトを currentLocation 変数に代入しています。

しかし、currentLocation 変数の存在しないプロパティ (x) にアクセスしても、TypeScript はチェックを行いません。

これは正常に動作し、コンソールに undefined 値が表示されます。

console.log(currentLocation.x); // undefinedCode language: JavaScript (javascript)

出力

undefinedCode language: JavaScript (javascript)

TypeScript コンパイラは、警告やエラーを出しません。

any 型は、既存の JavaScript コードベースで作業する方法を提供します。コンパイル中に、型チェックを段階的にオプトインおよびオプトアウトできます。したがって、JavaScript プロジェクトを TypeScript に移行する場合に any 型を使用できます。

TypeScript の any: 暗黙的な型付け

型を指定せずに変数を宣言すると、TypeScript は any 型を使用すると見なします。この機能は、型の推論と呼ばれます。TypeScript は変数の型を推測します。例えば

let result;Code language: JavaScript (javascript)

この例では、TypeScript が型を推測します。この方法は暗黙的な型付けと呼ばれます。

any 型への暗黙的な型付けを無効にするには、tsconfig.json ファイルの noImplicitAny オプションを true に変更します。tsconfig.json については、後のチュートリアルで詳しく学びます。

TypeScript の any 対 object

変数を object 型で宣言した場合、任意の値も代入できます。ただし、メソッドが存在する場合でも、そのメソッドを呼び出すことはできません。例えば

let result: any;
result = 10.123;
console.log(result.toFixed());
result.willExist(); //Code language: JavaScript (javascript)

この例では、willExist() メソッドがコンパイル時に存在しなくても、TypeScript コンパイラは警告を発行しません。なぜなら、willExist() メソッドは実行時に利用可能になる可能性があるからです。

コードを実行すると、コンソールウィンドウに次のエラーメッセージが表示されます。

TypeError: result.willExist is not a functionCode language: JavaScript (javascript)

ただし、result 変数の型を object に変更すると、TypeScript コンパイラは 2 つのエラーを発行します。

let result: object;
result = 10.123;
result.toFixed();Code language: JavaScript (javascript)

エラー

app.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'object'.

2 result = 10.123;
  ~~~~~~

app.ts:3:8 - error TS2339: Property 'toFixed' does not exist on type 'object'.

3 result.toFixed();
         ~~~~~~~

Found 2 errors in the same file, starting at: app.ts:2Code language: JavaScript (javascript)

まとめ

• TypeScript の any 型を使用すると、任意の型の値を格納できます。これにより、コンパイラに型チェックをスキップするように指示します。
• コンパイル時に型が不明な値を格納する場合、または JavaScript プロジェクトを TypeScript プロジェクトに移行する場合に、any 型を使用します。