TypeScriptとJavaScript｜コードで実践

TypeScript は JavaScript の上に足したもの

TypeScript は、JavaScript を置き換える別の言語ではありません。JavaScript に型の記法だけを足したものです。この関係を上位互換と呼びます。

const works = ["プロフィールサイト", "自己紹介カード"];
const count = works.length;

console.log(count);

これは JavaScript として正しいコードですが、そのまま TypeScript としても正しく動きます。書き方を覚え直す必要はありません。今まで書いてきた const も配列も関数も、そのまま使えます。

ただし、ブラウザや Node.js が実行できるのは JavaScript だけです。TypeScript のファイルはそのままでは動きません。

間に翻訳の工程が入ります。これをコンパイルと呼び、tsc というコマンドが担当します。

main.ts   --( tsc )-->   main.js   --( ブラウザ )-->   実行

tsc がすることは 2 つあります。1 つ目は型の検査です。約束が守られているか調べて、破っていればここで止めます。2 つ目は型注釈の削除です。検査が終われば型の情報は用済みなので、取り除いた素の JavaScript を出力します。

// 書いたコード (main.ts)
const count: number = 2;

// 出力されたコード (main.js)
const count = 2;

型は実行時には 1 バイトも残りません。だから TypeScript を使っても、動くプログラムが遅くなることはありません。型が働くのは、あくまで書いている間だけです。

ファイルの拡張子を .js から .ts に変えたら、そこはもう TypeScript の世界です。中身を書き換えなくても、その瞬間から tsc が型の目で見はじめます。

既存の JavaScript プロジェクトに TypeScript を入れるときも、この性質のおかげで一気に書き換える必要がありません。ファイル 1 枚ずつ .ts にしていけます。

演習では、JavaScript として書いたコードをそのまま TypeScript として動かします。書き換えるのは拡張子だけ、という感覚をここで掴んでください。