採点されません。匿名です。 間違えることは学習の一部です。読むだけでもかまいません。

L16 project-scaffold-ts-js — TypeScript 版と JavaScript 版の違い

テクノロジ系 ／ L16 project-scaffold-ts-js — TypeScript 版と JavaScript 版の違い

L16 project-scaffold-ts-js — TypeScript 版と JavaScript 版の違い

同じ Vite + Vue プロジェクトを TypeScript で作った場合 と JavaScript で作った場合 で、

ファイル構成・設定がどう変わるかを差分で理解する。 npm create vite の vue / vue-ts テンプレート選択が、

実際に何を増減させているのかを腹落ちさせるトピック。

このトピックで扱うこと

  • .vue の <script setup lang="ts"> ↔ <script setup> の違い
  • 型注釈 (ref<Date | null>(null)) が JS では消える理由 = SFC コンパイルは Vite がやる
  • TS 版だけに必要なもの: tsconfig.json / vue-tsc / shims-vue.d.ts
  • エントリ拡張子 (main.ts ↔ main.js) と index.html の参照追従
  • build スクリプトの差 (vue-tsc -b && vite build ↔ vite build)
  • なぜ JS でも .vue ファイルがそのまま動くのか (= @vitejs/plugin-vue が SFC を変換する)

扱わないこと

前提

TS → JS の差分 (全 6 点)

対象TS 版JS 版
.vue の script<script setup lang="ts"> / `ref<Date \null>(null)`<script setup> / ref(null)
package.json buildvue-tsc -b && vite buildvite build
package.json devDepstypescript / vue-tsc あり削除
エントリsrc/main.tssrc/main.js (中身同一)
ビルド設定vite.config.tsvite.config.js (中身同一)
型まわりtsconfig.json / shims-vue.d.ts あり両方削除

本質

.vue (単一ファイルコンポーネント) のコンパイルは Vite の @vitejs/plugin-vue がやる。

TS の型チェックはこれとは 別レイヤー (vue-tsc)。 だから lang="ts" を外すだけで JS として動き、

型チェック層 (tsconfig / vue-tsc / shims) が丸ごと不要になる。

> 「型注釈を消したら動かない」 のではなく、 「型注釈は Vite のビルドには元々不要で、 別の道具 (vue-tsc) が

> 開発時だけ見ている」。 この 2 レイヤー構造 を理解するのがこのトピックの核心。

サンプル

# 両者の diff を取って 6 点の違いを目で見る
diff -r sample-code/完成品-ts sample-code/完成品-js

学習時間

内訳時間
読解 + diff 観察30 分
演習 (TS→JS 変換)30 分

採点

TS 版のファイル構成を JS 版に変換するロジック (drill/01-ts-js-diff) を採点する。

cd frontend/vue
pnpm test topics/project-scaffold-ts-js

考えてみよう

既定では正解・不正解の判定はしません。自分のペースで「答えを見る」を。採点してほしい場合だけ「採点してほしい」を押してください。

project-scaffold-ts-js — 演習

Lv1: diff を読む

sample-code/完成品-ts と 完成品-js の差分を取り、 何が変わったか列挙する。

cd topics/project-scaffold-ts-js/sample-code
diff -r 完成品-ts 完成品-js

提出物

差分を「ファイルが消えた / 拡張子が変わった / 中身が変わった」 の 3 分類で書き出せ (全 6 点)。

Lv2: TS 版を手で JS 化する

完成品-ts をコピーして、 自分の手で JS 版に変換する。 答え (完成品-js) は見ずにやってから照合する。

cp -r 完成品-ts my-js && cd my-js

チェックリスト:

[ ] App.vue の <script setup lang="ts"> → <script setup>
[ ] App.vue の ref<number>(0) → ref(0)
[ ] main.ts → main.js にリネーム
[ ] index.html の /src/main.ts → /src/main.js
[ ] vite.config.ts → vite.config.js にリネーム
[ ] tsconfig.json を削除
[ ] src/shims-vue.d.ts を削除
[ ] package.json の build を "vite build" に
[ ] package.json の devDeps から typescript / vue-tsc を削除

検証

bun install && bun run build   # エラーなく dist が出れば成功

完成品-js と diff -r して一致 (name の違いは除く) すれば満点。

Lv3: なぜ動くのかを説明する

lang="ts" を外し型注釈を消しただけで JS として動く。 なぜ .vue ファイルはそのまま動くのか を、

@vitejs/plugin-vue と vue-tsc の役割の違いに触れて説明せよ。

提出物

以下の 2 問に 1 文ずつ答える:

  1. .vue の SFC を JavaScript に変換しているのは何か?
  2. vue-tsc を消しても vite build が通るのはなぜか?

チャレンジ

  • 逆に JS 版を TS 版へ昇格させる (tsconfig.json と shims-vue.d.ts を足し、 lang="ts" を付ける)
  • vue-tsc を入れずに lang="ts" だけ付けたらどうなるか試す (= 型エラーがビルドで検出されない状態を体感)
← Vue — vue-chartjs でデータ可視化 L17 build-tools-vite-vuecli — Vue CLI と Vite の違い →