0Pricing
Vue Academy · レッスン

VueプロジェクトでのTypeScript設定

vite.config.ts、tsconfig.json、vue-tsc、SFCでのlang='ts'、IDEのTypeScriptサポート

「VueプロジェクトでのTypeScript設定」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Vue 3 の TypeScript

Vue 3 は TypeScript で書き直されているため、優れた型サポートを提供します。適切に設定されたプロジェクトでは、コンパイル時にバグを検出でき、.vue ファイルで優れたエディターのオートコンプリートも利用できます。

TS を使ったスキャフォールディング

最も簡単な始め方は create-vue です。TypeScript を追加するかどうかを確認し、tsconfig.json、vue-tsc、適切なツール一式を設定してくれます。

npm create vue@latest
# select "Add TypeScript? Yes"

tsconfig.json の基本

tsconfig.json はコンパイルを制御します。バグの検出に最も重要な設定は strict モード です。

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

strict モードが重要な理由

strict: true によって strictNullChecks、noImplicitAny などが有効になります。これにより null/undefined を適切に処理する必要が生じ、型付けされていない値が紛れ込むのを防げます。

パスエイリアス

@/ エイリアスは src フォルダーに対応するため、ファイルの深さにかかわらずインポートをすっきり保てます。tsconfig.json とバンドラーの両方で設定してください。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

エイリアスを使う

これでインポートでは、相対的な ../../ の連鎖ではなく、プロジェクトルートを基準にモジュールを参照できます。

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

SFC で TypeScript を使う

Single File Component 内で TypeScript を使うには、script タグに lang="ts" を追加してください。<script setup> と組み合わせると、型付きマクロが使えるようになります。

<script setup lang="ts">
const count: number = 0
</script>

SFC の型チェック

通常の tsc コンパイラーは .vue ファイルを理解できません。Vue には vue-tsc が用意されており、テンプレートとスクリプトをまとめて型チェックできます。

vue-tsc --noEmit

チェック用スクリプトを追加する

package.json にスクリプトを追加すると、CI と開発者が 1 つのコマンドで型を検証できます。

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Volar によるエディターサポート

Volar（Vue - Official）の VS Code 拡張機能を使うと、.vue ファイル内で TypeScript のインテリジェンスを利用できます。自動補完、定義への移動、テンプレート内の型エラーなどに対応しています。競合を避けるため、古い Vetur は無効にしてください。

Takeover Mode

Volar は Takeover Mode で実行でき、組み込みの TS 拡張機能に置き換わって .ts と .vue の両方を処理します。大規模なプロジェクトでのパフォーマンスと一貫性が向上します。

確認問題

TypeScript の設定に関する知識を確認しましょう。

まとめ

Vue で TypeScript を設定しました。

  • 最も強力なチェックを行うため、tsconfig.json で strict モードを有効にします。
  • @/* パスエイリアスを src に設定します。
  • SFC のスクリプトに lang="ts" を追加します。
  • vue-tsc --noEmit で型チェックを行い、VS Code では Volar 拡張機能を使用します。

よくある質問

「VueプロジェクトでのTypeScript設定」レッスンは無料ですか？

はい。「VueプロジェクトでのTypeScript設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「VueプロジェクトでのTypeScript設定」で何を学びますか？

vite.config.ts、tsconfig.json、vue-tsc、SFCでのlang='ts'、IDEのTypeScriptサポート ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「VueプロジェクトでのTypeScript設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. VueプロジェクトでのTypeScript設定
  2. defineProps/defineEmitsによる型付きPropsとEmits
  3. ComposableとRefの型付け
  4. ジェネリックVueコンポーネント
← Vue Academyに戻る