【2026年版】TypeScriptの始め方 — 型安全なJavaScript開発の第一歩

一番の違いは「型」があることだよ。たとえばJavaScriptだと変数に数値を入れたつもりが文字列だった…なんてバグが実行するまで分からないけど、TypeScriptならコードを書いてる時点でエディタが「ここ型が違うよ」って教えてくれるんだ。VSCodeの補完も劇的に賢くなるから、開発スピードも上がるよ

Node.jsが入っていれば「npm install -g typescript」でOKだよ。これでtscコマンドが使えるようになる。プロジェクトごとに入れたいなら「npm install -D typescript」でdevDependenciesに追加するのがおすすめだね。インストールしたら「npx tsc --init」でtsconfig.jsonという設定ファイルが生成されるよ

コンパイルのルールを決めるファイルだよ。たとえば「strict」をtrueにすると厳密な型チェックが有効になるし、「target」でどのバージョンのJavaScriptに変換するか指定できる。最初は自動生成されたものをそのまま使って、慣れてきたら少しずつカスタマイズしていくのがいいね

基本は「string（文字列）」「number（数値）」「boolean（真偽値）」の3つだよ。配列は「string[]」のように書く。それから「any」は何でも入る型だけど、型チェックが効かなくなるから極力使わないのがコツだね。変数宣言は「let name コロン string = "ペンギン"」のように書くよ

どちらもオブジェクトの形を定義できるけど、interfaceは「extends」で継承できて、同名で宣言すると自動的にマージされる。type aliasは「ユニオン型（AまたはB）」や「交差型（AかつB）」を表現しやすい。実務ではオブジェクトの形を定義するならinterface、それ以外はtypeを使うチームが多いよ

たとえばAPIのレスポンスが成功と失敗で構造が違うとき、「type Result = Success または Error」のように書ける。TypeScriptはif文で分岐すると自動的に型を絞り込んでくれる「型ガード」という仕組みがあるから、分岐後は正しいプロパティだけが補完されるようになるよ。これが本当に便利なんだ

「型を引数にできる仕組み」だよ。たとえば配列の中身が文字列なのか数値なのかを後から指定できる「Array」がまさにジェネリクスだね。自分で関数を作るときも「function first(arr コロン T[]) コロン T」のように書けば、どんな型の配列にも対応できる汎用的な関数になるよ

実は一気にやる必要はないんだ。tsconfig.jsonで「allowJs」をtrueにすれば、JSファイルとTSファイルを混在させられる。まずは.jsを.tsにリネームして、エラーが出るところだけ型を付けていく「段階的移行」がおすすめだよ。ReactやVue、Astroなど主要フレームワークはすべてTypeScriptをサポートしてるから、新規ファイルからTSで書き始めるのもアリだね

「ユーティリティ型」は知っておくと便利だよ。Partialで全プロパティをオプショナルにしたり、Pickで特定のプロパティだけ取り出したりできる。あと「.d.ts」という型定義ファイルの仕組みがあって、型情報のないJSライブラリにも型を後付けできるんだ。DefinitelyTypedという巨大なリポジトリに有志が型定義を公開してるよ

大規模プロジェクトだとtscが遅くなることはあるね。最近はesbuildやswcといった高速なトランスパイラで型チェックなしの変換だけ行い、型チェックは別途tscで走らせるのが主流だよ。Viteもこの方式を採用してる。TypeScript 5.8以降はコンパイラ自体もかなり高速化されてるから、まずは普通に使ってみて遅いと感じたら検討するくらいでいいね