TypeScript 入門

TypeScript とは

TypeScript は、Microsoft によって維持・開発されているオープンソースの言語です。

基本的に、TypeScript は JavaScript に追加の構文を加え、エディタとのより緊密な統合をサポートします。エディタや CI/CD パイプラインで早期にエラーを検出し、より保守性の高いコードを書くことができます。

TypeScript の他の利点については後ほど話すことにして、まずはいくつかの例を見てみましょう！

最初の TypeScript コード

このコードスニペットを見て、一緒に解き明かしていきましょう

type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine = {
  name: 'Justine',
  age: 23,
} satisfies User;

const isJustineAnAdult = isAdult(justine);

最初の部分（type キーワード）は、ユーザーを表すカスタムオブジェクト型を宣言する役割を担っています。その後、この新しく作成された型を利用して、User 型の引数を1つ受け取り、boolean を返す関数 isAdult を作成します。この後、以前に定義した関数を呼び出すために使用できるサンプルデータである justine を作成します。最後に、justine が成人であるかどうかの情報を持つ新しい変数を作成します。

この例について、知っておくべき追加事項があります。まず、宣言された型に従わない場合、TypeScript は何かが間違っていることを通知し、誤用を防ぎます。次に、すべてを明示的に型付けする必要はありません—TypeScript は私たちのために型を推論します。例えば、変数 isJustineAnAdult は明示的に型付けしなくても boolean 型になり、justine はこの変数を User 型として宣言していなくても、私たちの関数の有効な引数になります。

TypeScript は何で構成されていますか？

TypeScript は、コード自体と型定義という2つの主要なコンポーネントで構成されています。

TypeScript コード

コード部分は、型アノテーションのための TypeScript 固有の構文が追加された、通常の JavaScript です。TypeScript コードがコンパイルされると、すべての TypeScript 固有の部分が削除され、どの環境でも実行できるクリーンな JavaScript が生成されます。例えば

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

型定義

型定義は、既存の JavaScript コードの形状を記述します。通常、.d.ts ファイルに保存され、実際の実装は含まれていません—型のみを記述します。これらの定義は JavaScript との相互運用性に不可欠です。コードは通常 TypeScript として配布されるのではなく、代わりに JavaScript にトランスパイルされ、それに付随する型定義ファイルが含まれます。

例えば、Node.js を TypeScript で使用する場合、Node.js API の型定義が必要になります。これは @types/node を通じて利用できます。以下を使用してインストールします

npm add --save-dev @types/node

これらの型定義により、TypeScript は Node.js API を理解し、fs.readFile や http.createServer のような関数を使用する際に、適切な型チェックとオートコンプリートを提供できます。例えば

import { resolve } from 'node:path';

resolve(123, 456);
Argument of type 'number' is not assignable to parameter of type 'string'.

多くの人気のある JavaScript ライブラリは、DefinitelyTyped コミュニティによって維持されている @types 名前空間の下で型定義が利用可能です。これにより、既存の JavaScript ライブラリを TypeScript プロジェクトとシームレスに統合できます。

変換機能

TypeScript には、特に JSX（React や類似のフレームワークで使用される）のための強力な変換機能も含まれています。TypeScript コンパイラは、Babel のように JSX 構文を通常の JavaScript に変換できます。これらの記事ではこれらの変換機能については触れませんが、TypeScript は型チェックのツールであるだけでなく、最新の JavaScript 構文をさまざまな環境に対応するバージョンに変換するためのビルドツールでもあることは注目に値します。

TypeScript コードの実行方法

さて、TypeScript コードがいくつかできました。では、どうやって実行すればよいのでしょうか？ TypeScript コードを実行する方法はいくつかあり、次の記事ですべてをカバーします。