TypeScriptを始めるとき、「とりあえず npm install -g typescript して tsc を打つ」ところから入ると、あとで次のような場面で困ることがあります。
- チームや別の案件とTypeScriptのバージョンが合わない
- 型を付けたのに、思ったほどエラーを見つけてくれない
- 型を付けたのに、実行時に
undefinedで落ちる
この記事では、最初に決めておけばこうした問題を防げる 4つのこと を、手順と一緒に整理します。
筆者は無料学習サイト「プロ道（prodou.net）」の運営者です。この記事は、サイトのTypeScriptレッスン ts-00（環境構築）の内容を、Qiita向けに手順中心でまとめ直したものです。
1. Node.js は LTS を入れて、まず確認する
TypeScriptはNode.jsの上で動きます。公式サイトから LTS（推奨版） を入れて、次のコマンドでバージョンを確認します。
node -v
npm -v
両方ともバージョン番号が表示されればOKです。
2. TypeScript は「プロジェクトごと」に入れる（-g ではなく -D）
mkdir ts-practice && cd ts-practice
npm init -y
npm install -D typescript
npx tsc --version
| 入れ方 | 特徴 |
|---|---|
npm install -g typescript |
PC全体で1つのバージョンを共有する。案件ごとにバージョンを合わせられない |
npm install -D typescript |
プロジェクトごとにバージョンを固定できる。package.json に記録されるので、他の人も同じ環境を再現できる |
-D で入れた場合、tsc は npx tsc で呼び出します。今はこちらが主流です。
3. tsconfig.json を作り、strict を有効にする
npx tsc --init
できあがる tsconfig.json が、TypeScriptの心臓部です。どこまで厳しく型を見るか を、このファイルで決めます。
{
"compilerOptions": {
"strict": true
}
}
strict を無効にすると、たとえば次のようなコードがエラーにならずに通ってしまいます。
function greet(name) { // strict なし: name は暗黙的に any
return "Hello, " + name.toUpperCase();
}
greet(undefined); // コンパイルは通るが、実行時に落ちる
strict: true にすると、name に型が付いていない時点でエラーになります（noImplicitAny）。
function greet(name: string) {
return "Hello, " + name.toUpperCase();
}
greet(undefined); // エラー: 'undefined' は 'string' に代入できない
緩い設定のままだと、型を付けた意味が薄れてしまいます。 最初から strict: true で始めるのがおすすめです。
4. 「型は実行時には消える」ことを前提にする
これが一番見落とされやすいポイントです。
TypeScriptの型は 書いている間の検査 です。JavaScriptに変換されたあとのコードには、型の情報は残りません。
type User = { name: string; age: number };
// 外部から来たデータ（API、ファイル、フォームなど）
const data: User = JSON.parse('{"name": "taro"}');
console.log(data.age.toFixed(1)); // コンパイルは通るが、実行時に落ちる
JSON.parse の結果に User という型を付けても、中身が本当に User の形をしているかは 誰も確かめていません。
外から来るデータは、実行時に自分で確かめる必要があります。
function isUser(v: unknown): v is User {
return (
typeof v === "object" && v !== null &&
typeof (v as any).name === "string" &&
typeof (v as any).age === "number"
);
}
const raw: unknown = JSON.parse('{"name": "taro"}');
if (isUser(raw)) {
console.log(raw.age.toFixed(1));
} else {
console.error("User の形をしていないデータです");
}
この考え方は、APIやAIから返ってきたJSONを扱うときにもそのまま必要になります。
まとめ
| 決めておくこと | 理由 |
|---|---|
| Node.js は LTS | 安定版で始める |
TypeScript は -D でプロジェクトごとに入れる |
案件ごとにバージョンを固定できる |
tsconfig.json で strict: true
|
型を付けた意味を最大限に活かす |
| 型は実行時に消える | 外部データは実行時に検証する |
エディタは VS Code が最適です（同じMicrosoft製で、TypeScriptに標準対応しています）。
手元に環境を作る前に試したい場合
「まずは書いて動かしてみたい」という場合は、プロ道のTypeScriptレッスンをブラウザで試せます。登録もインストールも不要です。
- ts-00 環境構築（この記事の元になった回）
https://prodou.net/category/typescript.html#ts-00 - ts-01 ここからコードを書き始めます
https://prodou.net/category/typescript.html#ts-01
ブラウザの中の疑似ターミナルで vi main.ts を開いて保存し、npx tsx main.ts と打つ流れを体験できます（実際のコンパイル・実行はせず、お手本と同じ内容なら実行結果の例を表示する仕組みです）。