TypeScript 和 vue‐types - daniel-qa/Vue GitHub Wiki

TypeScript 和 vue-types

  • vue-types 是什麼？

vue-types 是一個 針對 Vue 2 / Vue 3 的 JavaScript 專案 提供 Prop 驗證的強化工具。

它主要用途是：

在 不使用 TypeScript 的情況下，也能有比較「嚴謹的型別檢查」。

提供像 .def(), .isRequired, .oneOf() 等鏈式 API，讓 props 的型別定義更強大也更清楚。

如果你用的是 Vue 3 + TypeScript，你其實不太需要 vue-types，因為 TypeScript 本身就有完整的型別支援

如果你現在是這樣寫的：

export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0
    },
    status: {
      type: String,
      default: 'pending',
      validator: (val) => ['pending', 'success', 'error'].includes(val)
    }
  }
}

我可以幫你轉成這兩種：

  • vue-types 寫法（JavaScript）
import VueTypes from 'vue-types'

export default {
  props: {
    title: VueTypes.string.isRequired,
    count: VueTypes.number.def(0),
    status: VueTypes.oneOf(['pending', 'success', 'error']).def('pending')
  }
}
  • TypeScript + <script setup> 寫法
<script setup lang="ts">
defineProps<{
  title: string
  count?: number
  status?: 'pending' | 'success' | 'error'
}>()
</script>

要注意，語言是 lang="ts"

⚠️ **GitHub.com Fallback** ⚠️