Vue は TypeScript との相性が非常に良い
Vue 公式も TypeScript の利用を推奨しています。特に Vue 3 の Composition API は、TypeScript と非常に高い親和性を持っています。
defineProps() と型推論
子コンポーネントの defineProps において、props の型を定義することで、親コンポーネントから渡される値の型チェックを強力に行えます。
// ChildComponent.vue
<script setup lang="ts"> // lang="ts" を指定
interface Props {
message: string;
count?: number; // (補足) 名前の末尾に `?` をつけると任意プロパティになる
}
const props = defineProps<Props>() // 型をジェネリクスで指定
</script>
ref(), reactive(), computed() の型推論
リアクティブな変数に関して、型を自動で推論させたり、あるいは明示的に指定したりということが可能です。
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
const username = ref<string>('')
// ref() から Vue の Ref 型であると推論される
// その内部データが string 型であることを明示している
interface User {
id: number;
name: string;
}
const userList = reactive<User[]>([])
// reactive() から Vue の Reactive 型であると推論される
// その内部データが User 型の配列であると明示している
const filteredUsers = computed<User[]>(() => {
// 配列なので Array のフィルター処理を行える
return userList.filter(user => user.name.includes(username.value))
})
</script>
Vue プロジェクトを Vite で作成する際、すでに TypeScript を選択しましたね。
npm create vue@latest
# プロンプトの TypeScript の質問で Yes
初学者にとって TypeScript は、JavaScript よりもエラーや警告が増えるため、初期学習コストは少し大きくなります。しかし長期的に見れば TypeScript を学ぶことは、より良い開発者になるための強力な一歩となります。
If you've published on Dev.to, read this: an exclusive token airdrop now live for Dev.to contributors to celebrate our authors' impact in Web3! Connect your wallet here (wallet connection required). – Dev.to Airdrop Desk