TSとの出会い

今日のゴール

ヘッダーに「こんにちは、はるとです。次の旅まであと24日」と出ます。

今日つかまえるバグ: 数を数える関数に、うっかり文字を渡してしまう事故。JavaScriptはこれを何も言わずに通します。

Aパート: JSで書く

src/main.js を次のように書き換えます。

 import './style.css'; -console.log('旅ダッシュボード、起動しました');+const TRIP_DATE = '2026-09-19';++function daysUntil(dateText) {+  const target = new Date(dateText);+  const today = new Date();+  const diff = target.getTime() - today.getTime();+  return Math.ceil(diff / (1000 * 60 * 60 * 24));+}++function greet(name, days) {+  return `こんにちは、${name}です。次の旅まであと${days}日`;+}++const greeting = document.querySelector('#greeting');+greeting.textContent = greet('はると', daysUntil(TRIP_DATE));

`こんにちは、${name}さん` のようなバッククォートの文字列を テンプレートリテラル と呼びます。+ でつなぐより読みやすいので、このコースではこちらを使います。

Date の引き算は今日の主役ではありません。コピーでOKです。

保存すると、画面に挨拶とカウントダウンが出ます。ここまでがAパートです。

事故を踏む

いま書いた daysUntil に、日付ではなく数字を渡してみてください。

greeting.textContent = greet('はると', daysUntil(2026));

画面には 次の旅まであと NaN日 と出ます。NaN は「数ではない」という意味の、JavaScriptの困った返事です。エラーは1つも出ません。 これがJavaScriptの静かな壊れ方です。

もう1つ試します。ブラウザの開発者ツールのConsoleで "3" + 4 と打つと、答えは 7 ではなく "34" です。数と文字を足すと、JavaScriptは黙って文字としてつなげます。

壊した行は元に戻してから、次へ進んでください。

Bパート: TSにする

いよいよリネームです。

そして index.html の1行だけ直します。ここを忘れると画面が真っ白になります。

     </main> -    <script type="module" src="/src/main.js"></script>+    <script type="module" src="/src/main.ts"></script>   </body> </html>

TypeScriptを入れる

もう1つ、src/vite-env.d.ts という名前のファイルを作って、次の1行だけ書きます。

/// <reference types="vite/client" />

これは「import './style.css' のようなVite独自の書き方を知っておいてください」とTypeScriptに教える1行です。意味は分からなくて大丈夫です。これが無いと、CSSを読み込んでいる行が「そんなファイルは知らない」と怒られます。

そしてプロジェクトの一番上に tsconfig.json を作ります。今日読むのは3行だけです。全部の行は第10章で読みます。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "allowJs": true,
    "noEmit": true
  },
  "include": ["src"]
}

• "strict": true … 検査をいちばん厳しくする。最初からONにします。あとから締めると、自分のコードが途中の章で突然赤くなって心が折れます。
• "allowJs": true … .js のファイルが混ざっていても怒らない。このコースの生命線です。毎章、Aパートでは .js が1つ混ざるからです。
• "include": ["src"] … src フォルダの中だけを見る。

package.json に検査コマンドを足します。

   "scripts": {     "dev": "vite",+    "check": "tsc --noEmit",     "build": "vite build",     "preview": "vite preview"   },   "devDependencies": {+    "typescript": "~5.9.2",     "vite": "^6.3.5"   }

エラーが4つ出ます。それが正常です

src/main.ts(5,20): error TS7006: Parameter 'dateText' implicitly has an 'any' type.
src/main.ts(12,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
src/main.ts(12,22): error TS7006: Parameter 'days' implicitly has an 'any' type.
src/main.ts(17,1): error TS18047: 'greeting' is possibly 'null'.

エラーの読み方も、ここで型を作っておきましょう。読むのは、ファイル名・行番号・error の右のひとことだけです。src/main.ts(5,20) なら「main.ts の5行目20文字目」。それだけ分かれば、見に行けます。

実行する係と、検査する係

ここで、このコースでいちばん大事な仕組みを1つ。

書き足していないのに、もう動いてはいる

ここで大事な区別を1つ。画面は、さっきから何も変わらず動き続けています。リネームしても、赤線が4つ出ていてもです。

TypeScriptは JavaScriptのスーパーセット(上位互換)です。これは「JavaScriptとして書いたものは、そのままTypeScriptとしても動く」という意味です。「検査に通る」という意味ではありません。動くことと、検査を通ることは別です。第1章でこの2つを分けて覚えると、この先ずっと楽になります。

そして、型を1文字も書いていないのに、TypeScriptはもう型を知っています。const greeting = ... の greeting にマウスを乗せてみてくださいカーソルを置いて K を押してみてください(Neovim で LSP を設定している場合)。型が表示されます。これが 型推論 です。出てこなくても、そのまま進んで構いません。型が合っているかを確かめる本体は、このあと使う npm run check のほうです。注釈は、推論が届かないところにだけ書きます。

4つのエラーを0にする

上から1個ずつ片付けます。

最初の3つは、どれも同じ TS7006 です。関数の引数だけは、TypeScriptにも中身が推し量れません。Parameter 'dateText' implicitly has an 'any' type =「この子が何者か教えて」。だから引数にだけ注釈を書きます。

4つ目の TS18047: 'greeting' is possibly 'null' は種類が違います。document.querySelector('#greeting') は、その部品が無かったときに null を返すので、TypeScriptは「無いかもしれないのに触るんですか」と心配しているのです。これには次の節で答えます。

 import './style.css';  const TRIP_DATE = '2026-09-19'; -function daysUntil(dateText) {+function daysUntil(dateText: string): number {   const target = new Date(dateText);   const today = new Date();   const diff = target.getTime() - today.getTime();   return Math.ceil(diff / (1000 * 60 * 60 * 24)); } -function greet(name, days) {+function greet(name: string, days: number): string {   return `こんにちは、${name}です。次の旅まであと${days}日`; } -const greeting = document.querySelector('#greeting');+const greeting = document.querySelector('#greeting')!; greeting.textContent = greet('はると', daysUntil(TRIP_DATE));

ロジックの行は1行も動いていません。足したのは : string : number と、最後の行の ! だけです。TS化の差分はいつもこの読み方をします。

もう一度 npm run check を打ってください。今度は何も出ません。4つが0になりました。 TypeScriptの世界では「何も言われない = 全部OK」です。

そして最初の事故を、もう一度やってみてください。

greeting.textContent = greet('はると', daysUntil(2026));

今度は 書いた瞬間に赤い波線 が出ます。Argument of type 'number' is not assignable to parameter of type 'string'。画面を見に行く前に、机の上で捕まりました。

! という仮免許(4つ目のエラーの答え)

さっきの TS18047: 'greeting' is possibly 'null' を消したのが、行末に付いた ! です。

document.querySelector('#greeting')! の最後の ! は、「ここには絶対ある、と私が保証します」という印です。本当は「無いかもしれない」ので、TypeScriptは心配していました。

わざと壊してみる

greet の呼び出しを次のように書き換えてください。

greeting.textContent = greet(24, 'はると');

ここで赤くなるのが正解です。 引数の順番が逆だと、TypeScriptは2つとも指摘します。エラーが複数出ても慌てないでください。上から1個だけ直します。 読むのは1行目とファイル名だけで十分です。確認したら元に戻します。

あなたの番

• 名前を自分の名前に変えてください。
• TRIP_DATE を、自分がいちばん楽しみにしている予定の日に変えてください。旅行でなくても構いません。
• 合格条件: 変えたあとも npm run check がエラー0。

実務メモ

React Nativeでも、Metro(実行係)は型エラーがあっても動きます。最後の砦はCIで回す tsc --noEmit です。今日の npm run check は、その砦を自分の手元に置いたものです。

TSエラー語辞典

この章で実際に出るエラー英文と、その日本語訳です。卒業するころには全章ぶんがお助けページに集まります。

ハマったら