本文へスキップ
BecomeCoder
ブログ一覧Wikiコース一覧

TypeScriptは何ができる?使い道と現場で使う理由を解説

#TypeScript#初心者#使い道

結論:TypeScript は「JavaScript に型を足した言語」で、できること自体は JS と同じ(フロント/バック/アプリ)ですが、型のおかげで大規模開発・チーム開発のバグを早い段階で潰せるのが真価です。 いまのフロントエンド現場の事実上の標準になっています。

TypeScript は結局「何ができる」言語なのか

検索していると「TypeScript でできること」を一覧で知りたくなりますが、先に押さえてほしい前提があります。TypeScript は最終的に JavaScript に変換(コンパイル)されて動くということです。つまり「JavaScript でできることは、そのまま TypeScript でもできる」。用途そのものは JS とほぼ同じで、次のとおりです。

では「JS と同じことができるなら、なぜわざわざ TypeScript を使うのか?」ここが本題です。答えは用途ではなく「型」にあります。まず TS がどんなコードなのかを1分で体感したい人は、型注釈 ― 変数に型をつけるブラウザでそのまま実行してみてください(無料・登録不要・環境構築なし)。書いた TypeScript がその場で JavaScript に変換されて動きます。

なぜ現場で使うのか(=型で何ができるのか)

TypeScript の使い道を理解する近道は、「型があると何ができるようになるか」を知ることです。3つに分けて見ていきます。

1. バグを「実行する前」に見つけられる

ふつうの JavaScript は、変数に何が入っていても動かしてみるまでエラーに気づけません。TypeScript は書いている最中に型の矛盾を指摘してくれます。文字列を数値として扱う、存在しないプロパティを読む、といったミスがコンパイルの時点で赤線になる。これが「大規模開発で強い」と言われる正体です。

この動的型付けと静的型付けの違いそのものが気になる人は、静的型付けと動的型付けの違い を先に読むと腑に落ちます。実際に型を付けて動かすなら、基本の型と型推論 ― number・boolean関数の型 ― 引数と戻り値 をブラウザで走らせてみてください。

2. チームで「約束事」を型として共有できる

現場では複数人が同じコードを触ります。「この関数は何を受け取って何を返すのか」「このデータはどんな形か」を型として書いておけば、それがそのまま仕様書になります。他人が間違った使い方をすれば、その場でエラーになる。

その中心になるのが interfacetype です。interface ― オブジェクトの型に名前をつけるtype とオプショナルプロパティ を動かすと、「データの形を先に決めておく」感覚がつかめます。複数の型を許す ユニオン型 ― 複数の型を許す は、現場のデータを正確に表すのに欠かせません。

3. エディタが賢くなる(補完・リファクタが効く)

型があるおかげで、エディタが「次に何を書けるか」を正確に提案してくれます。関数名の変更や構造の作り替えも、型が壊れた箇所を教えてくれるので安全。書く速さ・直す速さが上がるのが、日々の仕事で効いてくるポイントです。

再利用できる部品を型安全に作るには ジェネリクス関数 ― 型を後から決める が要になります。ここまで来ると「型でプログラムを組む」感覚が見えてきます。

使い道をもう少し具体的に

Webフロントエンド(いちばんの主戦場)

いまのフロント開発は TypeScript が前提になっている現場が多数です。React も Angular も TypeScript で書くのが標準的。まだ素の JavaScript の基礎が固まっていない人は、JavaScript コース で土台を作ってから TS に進むと迷いません。フレームワークに触れてみたいなら はじめての ReactAngular コース がブラウザで動かせます(React/Angular は TypeScript と組み合わせるのが一般的です)。

フロントとバックの役割分担があいまいな人は、先に フロントエンドとバックエンドの違い を読むと、TypeScript がどこで使われるかがはっきりします。

バックエンド・API

Node.js を使えば、サーバー側も同じ TypeScript で書けます。フロントとバックで言語がそろうと、データの型を両側で共有でき、境界のバグが減ります。「フロントもバックも同じ言葉で」というのが TS のうまみの一つです。

大きく育つプロジェクト全般

型の恩恵は、コードが大きくなるほど効いてきます。小さなスクリプトなら素の JS で十分ですが、人数と機能が増えるほど「型という安全ネット」の価値が上がる。だから TypeScript は長く保守する本気のプロダクトで選ばれます。プロジェクト全体の型の厳しさを決める設定が tsconfig と strict ― プロジェクトの設定 です。

JavaScript と迷っている人へ

「JS を学ぶべきか、TS を学ぶべきか」で止まっているなら、結論はシンプルです。TypeScript は JavaScript の上に成り立っているので、JS の知識はそのまま活きます。順番や違いの詳細は TypeScriptとJavaScriptの違い にまとめてあります。何をどの順で学ぶかは TypeScript独学ロードマップ を参考にしてください。

つまずきやすいところ

初心者が最初に戸惑うのは、「動かす前に怒られる」体験です。JavaScript なら通っていたコードが、TypeScript では型エラーで止まる。これは欠点ではなく、バグを早く見つけている証拠です。とはいえメッセージが独特で読みにくいのも事実。any でごまかしたくなる場面もあります。ここは any と unknown ― 「型がわからない」を扱う を動かして、逃げ道の正しい使い方を覚えるのが近道です。

型エラーのメッセージそのものに詰まったら、TypeScriptのエラー逆引き に「メッセージ・出るコード・直し方」でまとめてあります。辞書のように引いてください。

まず何をすればいい?

「TypeScript で何ができるか」が分かったら、次は型を実際に書いて、赤線が出る体験を自分でするのがいちばんです。TypeScript コースは全26回すべてをブラウザ内で実行でき(書いた TS がその場で JS に変換されて動きます)、型注釈から interface・ジェネリクス・ユーティリティ型まで手を動かしながら進められます。無料・登録不要です。

← ブログ一覧に戻る