Question 1

Vue 3でTypeScriptを使う際、defineComponentの主な役割は何ですか？

Accepted Answer

defineComponentはコンポーネントオプションに対するTypeScriptのtype inferenceを有効にします。この関数がないと、Options APIではthisコンテキストがanyとして扱われてしまいます。これによりprops、data、computed、メソッドが自動的に正しく型付けされることが保証されます。

Question 2

runtime declarationで複雑なpropsを宣言する際に、なぜPropTypeを使うのですか？

Accepted Answer

PropTypeはVueのutility typeで、runtime宣言時にpropsの型をキャストできるようにします。Object as PropType Bookとすることで、bookが汎用的なObjectではなくBookとして正しく型付けされることが保証されます。これにより、汎用型を使ったscript setupを必要とせずに、オートコンプリートと型安全性が向上します。

Question 3

type inferenceの観点で、script setupとlang='ts'付きのscript setupの違いは何ですか？

Accepted Answer

lang='ts'付きのscript setupはTypeScriptを有効にし、defineComponentなしで自動的なtype inferenceを可能にします。definePropsで定義されたpropsは自動的に型付けされ、refsは完全なinferenceを持ち、TypeScriptのエラーはコンパイル時に検出されます。lang='ts'がない場合、型チェックは一切行われません。

VueでのTypeScript

Vue 3でTypeScriptを使う際、defineComponentの主な役割は何ですか？

回答

runtime declarationで複雑なpropsを宣言する際に、なぜPropTypeを使うのですか？

回答

type inferenceの観点で、script setupとlang='ts'付きのscript setupの違いは何ですか？

回答

TypeScriptで初期値がnullになり得るrefを正しく型付けするにはどうすればよいですか？

Vue 3.3以降における script setup generic を用いたジェネリックコンポーネントの主な利点は何ですか？

その他のVue.js / Nuxt.js面接トピック

JavaScript の基礎

モダンな JavaScript (ES6+)

Vue の基礎

Vue コンポーネント

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue のリアクティビティ

Nuxt の基礎

Nuxt のデータフェッチング

Nuxt の SSR と SSG

Nuxt サーバールート

Nuxt モジュール

Vue のコンポーザブル

Vue フォームとバリデーション

Nuxt の状態管理

Vue のテスト

Nuxt のデプロイと CI/CD

Vue のパフォーマンス

Vue の高度なパターン

Nuxt認証

Nuxt での SEO

Nuxt の国際化

Vue アーキテクチャ

Nuxt セキュリティ

Vue エコシステム

Vue 2→3 & Nuxt 2→3 の移行

次の面接に向けてVue.js / Nuxt.jsをマスター