Vue + TypeScript — Setup

テクノロジ系／ L06 vue-typescript — TypeScript 連携

Vue + TypeScript — Setup

新規プロジェクト

$ pnpm create vue@latest
# → TypeScript: Yes
# → Vue Router: Yes
# → Pinia: Yes
# → Vitest: Yes

公式の create-vue で対話形式に。

最初から TS テンプレ で作るのが楽。

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "strict": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

@vue/tsconfig が Vue 向けのプリセットを提供。

paths で @/components/... のエイリアス。

SFC で TS

<script setup lang="ts">
import { ref, computed } from "vue";

interface User {
  id: number;
  name: string;
}

const user = ref<User | null>(null);
const greeting = computed(() => user.value ? `Hi, ${user.value.name}` : "Hi, guest");
</script>

<template>
  <p>{{ greeting }}</p>
</template>

<script setup lang="ts"> で TS を有効化。

型チェック

vite はビルド時に型チェックしない (高速のため)。

別途 vue-tsc:

$ pnpm add -D vue-tsc

{
  "scripts": {
    "typecheck": "vue-tsc --noEmit",
    "build": "vue-tsc --noEmit && vite build"
  }
}

vue-tsc = TS + Vue SFC を理解できる tsc。

VSCode 拡張 — Vue Official (旧Volar)

「Vue Official」拡張を入れる。

.vue ファイル内で TS の補完・エラー表示が効く。

「Vetur」(旧) は無効化すること。

auto import (任意)

$ pnpm add -D unplugin-auto-import unplugin-vue-components

// vite.config.ts
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ imports: ["vue", "vue-router", "@vueuse/core"] }),
    Components({ dirs: ["src/components"] }),
  ],
});

→ ref / computed / useRoute を import 不要 に。

書く量が減る。ただし TS の追跡しやすさはトレードオフ。

まとめ

pnpm create vue で TS テンプレ
<script setup lang="ts"> を全 SFC に
型チェックは vue-tsc --noEmit
VSCode は「Vue Official」拡張
auto-import は便利だが導入は要検討

次は Props の型付け。

考えてみよう

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

Lv1: 基本 — create-vue で TS テンプレ

問題

pnpm create vue@latest
# TypeScript: Yes
# Vue Router: Yes
# Pinia: Yes
# Vitest: Yes

pnpm install && pnpm dev で起動。

src/App.vue を <script setup lang="ts"> で TS で書き換える。

合格基準

起動成功
VSCode で TS 補完が効く

Lv2: 応用 — vue-tsc で型チェック

問題

pnpm add -D vue-tsc

package.json:

{
  "scripts": {
    "typecheck": "vue-tsc --noEmit",
    "build": "vue-tsc --noEmit && vite build"
  }
}

意図的に型エラーを入れて pnpm typecheck で失敗、修正で通る、を確認。

合格基準

typecheck 失敗 → 修正 → 成功

Lv3: 発展 — auto-import + Components

問題

pnpm add -D unplugin-auto-import unplugin-vue-components

vite.config.ts:

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ imports: ["vue", "vue-router", "@vueuse/core"] }),
    Components({ dirs: ["src/components"] }),
  ],
});

<script setup> で ref / computed / useRoute を import なし で使えることを確認。

合格基準

import 不要で書ける
メリット (省コード) とデメリット (追跡しづらい) を理解

提出

submission.md に3問の回答を。