トランスパイルによる TypeScript コードの実行

トランスパイルとは、ある言語のソースコードを別の言語のソースコードに変換するプロセスです。 TypeScript の場合、TypeScript コードを JavaScript コードに変換するプロセスです。これは、ブラウザや Node.js が TypeScript コードを直接実行しないため必要です。

TypeScript を JavaScript にコンパイルする

TypeScript コードを実行する最も一般的な方法は、まず JavaScript にコンパイルすることです。これは TypeScript コンパイラ tsc を使用して行えます。

ステップ 1: TypeScript コードをファイル、例えば example.ts に記述します。

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);

ステップ 2: パッケージマネージャを使用して TypeScript をローカルにインストールします

この例では npm を使用します。詳細については、npm パッケージマネージャ入門 を確認してください。

npm i -D typescript # -D is a shorthand for --save-dev

ステップ 3: tsc コマンドを使用して TypeScript コードを JavaScript にコンパイルします

npx tsc example.ts

注: npx は、Node.js パッケージをグローバルにインストールすることなく実行できるツールです。

tsc は TypeScript コンパイラで、TypeScript コードを JavaScript にコンパイルします。このコマンドを実行すると、Node.js で実行できる example.js という名前の新しいファイルが作成されます。これで TypeScript コードのコンパイルと実行方法がわかったので、TypeScript のバグ防止機能が実際に動作するのを見てみましょう！

ステップ 4: Node.js を使用して JavaScript コードを実行します

node example.js

ターミナルに TypeScript コードの出力が表示されるはずです

型エラーがある場合

TypeScript コードに型エラーがある場合、TypeScript コンパイラはそれらを検出し、コードの実行を妨げます。例えば、justine の age プロパティを文字列に変更すると、TypeScript はエラーをスローします

意図的に型エラーを発生させるために、コードを次のように変更します

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

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

const justine: User = {
  name: 'Justine',
  age: 'Secret!',
Type 'string' is not assignable to type 'number'.
};

const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
Expected 1 arguments, but got 2.
Type 'boolean' is not assignable to type 'string'.

ご覧のとおり、TypeScript はバグが発生する前にそれを検出するのに非常に役立ちます。これが TypeScript が開発者の間で非常に人気がある理由の 1 つです。