TypeScriptとJavaScriptの本当の違い
TypeScriptとJavaScriptの違い
TypeScriptとJavaScriptの違い：何が変わり、tscは何を出力するか | We.Inc
TypeScriptとそのコンパイル結果のJavaScriptを並べて表示し、型チェッカーが見つけるもの、実行時に型が消える理由、素のJavaScriptで十分な場面を解説します。
TypeScriptは、JavaScriptに型システムを加えたものです。通常のJavaScriptに任意で型注釈を付けて書くと、tscコンパイラーがそれをチェックし、取り除いて素のJavaScriptを出力します。ブラウザーやNodeが実行するのはその出力なので、実行時に型は存在しません。得られるのは編集中にミスを見つけられることで、コードが速くなるわけではありません。
並べて比較
- ブラウザーで直接実行できるか
- はい
- いいえ、先にJavaScriptへコンパイルするか型を除去する
- 型のミスが見つかるのはいつか
- コードの実行時
- 編集中とtscのチェック時
- ファイル拡張子
- .js、.mjs、.jsx
- .ts、.tsx（宣言には.d.ts）
- ビルドステップは必要か
- 任意
- チェックには必要。実行には型除去ツールかバンドラー
- 有効なJavaScriptはそのまま入力にできるか
- はい
- はい、ただしチェッカーがエラーを報告することがある
下の例を選ぶと、TypeScriptファイルと、tscがそれから書き出したJavaScriptが並んで表示されます。ほとんどの場合、出力は型注釈を削除しただけのコードです。enumなど一部の機能は実際のコードを生成し、その違いはツールを選ぶときに重要になります。
- 例を選びます。シンプルな型注釈、interface、enum、const enum、型エラーがあります。
- 左側でTypeScriptのソースを、右側で出力されたJavaScriptを確認します。
- 各ペアの下の注記で、コンパイラーが何をチェックし、何が出力に残ったかを確認します。
- どちらかをコピーして、自分のプロジェクトで試してください。
- 最初からstrictをtrueにしたtsconfig.jsonを用意しましょう。大きなコードベースで後からオンにすると、何百ものエラーが一度に出てきます。
- 移行するときは、.jsファイルを1つずつ.tsに名前変更しましょう。allowJsを設定すれば、移行中は両方の種類のファイルを同じプロジェクトに置けます。
- サーバーから来たJSONは、チェックするまで型がないことを忘れないでください。取得したデータへの型注釈はコンパイラーへの約束であって、実行時のチェックではありません。
- コードの実行には高速な型除去ツール（Vite、esbuild、Nodeの型ストリッピング）を使い、エディターとCIではtsc --noEmitを別のチェックとして残しましょう。
よくある質問
TypeScriptはJavaScriptとは別の言語ですか？
上位集合です。すべてのTypeScriptプログラムはJavaScriptになり、TypeScriptは値の形を記述する構文を追加します。まずJavaScriptを学びましょう。型はJavaScriptを置き換えるのではなく、その上に乗るものです。
TypeScriptを使うとサイトは速くなりますか？
いいえ。型注釈はコードの実行前に削除されるので、ブラウザーが実行するのは手で書いた場合と同じJavaScriptです。利点は、ユーザーに届くバグが減り、リファクタリングを安全に行えることです。
型エラーがあるとtscはビルドを拒否しますか？
デフォルトでは拒否しません。tscはエラーを報告しつつ.jsファイルを書き出すので、段階的な移行が可能です。チェックの失敗で出力を止めたい場合はnoEmitOnErrorを設定してください。
Nodeはビルドステップなしで.tsファイルを実行できますか？
最近のNodeは消去可能な型構文を取り除いてファイルを実行でき、型ストリッピングはv23.6.0とv22.18.0からデフォルトで有効です。Nodeは型チェックを行わず、enumのようにコード生成が必要な構文は拒否されます。
素のJavaScriptのほうが良いのはどんなときですか？
小さなスクリプト、手早いプロトタイプ、数行のインタラクションしかないページでは、セットアップの手間に見合うことはまれです。ファイルが複数になる、複数人で作業する、モジュール間でデータを受け渡すといった段階になると、チェッカーが本当に時間を節約し始めます。
tscが実際に行うこと
- コンパイラーには、よく混同される2つの役割があります。1つ目は型チェックです。すべてのファイルを読み、各値の型を推論し、合わないものを報告します。2つ目は出力です。型構文を取り除いたJavaScriptを書き出し、指定すれば新しい構文を古いターゲット向けに書き換えます。
- 最近のツールチェーンでは、通常この2つを分けています。Viteのようなバンドラーは何もチェックせずに型をすばやく取り除き、tsc --noEmitがエディターやCIで完全なチェックを別に実行します。バンドラーしか実行しないと、型エラーがそのままリリースされることがあります。
型は消去されるので、実際のデータを検証する
- 型注釈は消えるため、numberと宣言した場所にサーバーが文字列を送ってきても、TypeScriptは止められません。const user: User = await res.json()と書いても、チェッカーに自分を信頼するよう伝えているだけです。
- フォーム入力、fetchのレスポンス、ローカルストレージなど、プログラムの境界では、小さなガード関数やスキーマライブラリで実行時に値をチェックし、その保証をチェッカーに内側まで運ばせましょう。
消去されるだけではない機能
- enum、コードを含むnamespace、パラメータープロパティ、import =エイリアスは、いずれも独自のJavaScriptを生成します。TypeScript 5.8で追加されたerasableSyntaxOnlyオプションはこれらをエラーとして報告するので、型注釈を削除するだけの型除去ツールでもファイルが動作するようになります。
- .tsファイルをNodeやほかの型除去ツールで直接実行する予定なら、enumよりも文字列リテラルのユニオンやas constオブジェクトを使いましょう。このサイトのenumガイドでは両方を並べて紹介しています。
JavaScriptプロジェクトにTypeScriptを追加する
インストールしてtsconfigを作成する
コンパイラーをローカルにインストールし、初期設定のtsconfig.jsonを書き出し、ファイルを書き出さずにチェックを実行します。
allowJsを使うと、移行中に古い.jsファイルを新しい.tsファイルと並べて置けます。noEmitにすると出力はバンドラーに任せます。
コンパイラーから見えないデータをチェックする
型を絞り込む実行時ガード
関数が実際に値をチェックし、戻り値の型がそこで証明された内容をコンパイラーに伝えます。
型注釈
引数と戻り値の型がチェックされた後、削除されます。本体には手が加えられません。
interface
interfaceは何も出力しません。チェッカーのためだけに存在します。
enum
通常のenumは逆引きの対応表を持つ実際のオブジェクトになるため、消去される構文ではなく生成されるコードです。
const enum
tscはconst enumのメンバーを数値としてインライン展開し、元の名前をコメントとして残します。
型エラー
tscは「Argument of type 'string' is not assignable to parameter of type 'number'.」と報告します。noEmitOnErrorを設定していない限り、ファイルは書き出されます。
TypeScriptと変換後のJavaScript
例を選ぶ
自分で書くTypeScript
tscが出力するJavaScript（target es2022）
TypeScriptをコピー
JavaScriptをコピー
入力{n}行、出力{v}行
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る