プリミティブ型とアノテーション

TypeScript は JavaScript の 型付きスーパーセット です。つまり、既存の JavaScript に静的な型構文を追加します。実行時には、すべての TypeScript コードが純粋な JavaScript にコンパイルされ、型はビルド プロセス中に完全に消えます。

TypeScript のおかげで、ブラウザでコードが実行される前にエラーを検出できるため、開発プロセスがより堅牢、安全、スケーラブルになります。

プリミティブ型

TypeScript は、標準の JavaScript プリミティブ型をサポートしています。

• string: 文字のシーケンスを表します (例: 'Alice'、"Hello")。
• number: 整数と小数の両方の数値を表します (例: 42、3.14)。
• boolean: 真理値 (true または false) を表します。
• null および undefined: 意図的または意図的でない値の欠如を表します。

const username: string = 'Alice';
const score: number = 100;
const isActive: boolean = true;

変数の注釈と推論

TypeScript では、コロン (:) の後に型を使用することで、型アノテーションを追加できます。

別の型の値を割り当てようとすると (たとえば、number として定義された age に文字列を割り当てようとすると)、TypeScript コンパイラは、コードが実行される前にすぐにエラーを発生させます。

any タイプの危険性

any 型は、その変数の型チェックを完全にオフにするように TypeScript に指示する特別なエスケープ ハッチです。

let data: any = 42;
data = 'Hello'; // No error!
data.nonExistentMethod(); // No error at compile time, but it crashes at runtime!

any を使用すると、TypeScript を使用することによる安全上の利点がすべて無効になります。これは悪い習慣とみなされており、実稼働コードではほとんどの場合避けるべきです。

関数のアノテーションと void 型

関数の パラメータ と 戻り値 の両方に注釈を付けることができます。

function calculateTax(price: number, taxRate: number): number {
  return price * taxRate;
}

関数が値を返さない場合 (たとえば、console.log のみを実行する場合)、その戻り値の型は void です。

function logMessage(message: string): void {
  console.log(message);
}

自分で試してみてください

演習 1: 型付き変数

演習 2: 挨拶機能

演習 3: 温度コンバータ

演習 4: 割引の計算