>[success] # props -- defineProps Ts 版本 * `defineProps ` 在ts 版本支持 **泛型參數來定義 prop** * 傳遞給`defineProps`的泛型參數本身**不能**是一個導入的類型 * 基于類型的聲明或者運行時聲明都可以使用，但是你不能同時使用兩者 * 接口或對象字面類型可以包含從其他文件導入的類型引用 * ts 類型編譯時候 require 默認不是false 是true 1. **泛型參數來定義 prop** ~~~ <template> {{ props.name }} </template> <script setup lang="ts"> // js 版本使用支持的 // const props = defineProps({ // name: String, // }); // 類型字面量定義 // type Props = { // name: string; // age: number | string; // }; // ts 泛型形式定義 interface Props { name: string; age?: number | string; } const props = defineProps<Props>(); </script> <style></style> ~~~ 2. 傳遞給`defineProps`的泛型參數本身**不能**是一個導入的類型 ~~~ import { Props } from './other-file' // 不支持！ defineProps<Props>() ~~~ 3. 基于類型的聲明或者運行時聲明都可以使用，但是你不能同時使用兩者 ~~~ <template> <div></div>{{ props.name }} </template> <script setup lang="ts"> // 不可以兩種寫法混用 type Props = { name: string; age: number | string; }; const props = defineProps<Props>({ name: String, }); </script> <style></style> ~~~ 4. 接口或對象字面類型可以包含從其他文件導入的類型引用 ~~~ type a = string; export default a; ~~~ ~~~ <template> <div></div>{{ props.name }} </template> <script setup lang="ts"> import a from '../Props/props'; // 接口中調用的類型可以從 其他文件導入 type Props = { name: a; // 我使用其他文件類型 age: number | string; }; const props = defineProps<Props>(); </script> <style></style> ~~~ 5. ts 類型編譯時候 require 默認不是false 是true `defineProps<{ msg: string }>`會被編譯為`{ msg: { type: String, required: true }}`。  >[danger] ##### ts 泛型參數來定義 -- 定義默認值 ~~~ interface Props { msg?: string // ? 相當于 require 是否必填默認必填 labels?: string[], age:12 | 13, // 相當于 validator，但復雜的不行 } // 定義默認值比較復雜 需要withDefaults 函數 const props = withDefaults(defineProps<Props>(), { msg: 'hello', labels: () => ['one', 'two'] }) ~~~ >[danger] ##### ts 泛型參數來定義 -- 開啟響應式語法糖 這種形式必須是**開啟響應式語法糖**，默認是關閉的目前在實驗屬性，需要版本 [可以參考](https://staging-cn.vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in) `vue@^3.2.25`。 ### Vite[#](https://staging-cn.vuejs.org/guide/extras/reactivity-transform.html#vite) * 需要`@vitejs/plugin-vue@^2.0.0` * 應用于 SFC 和 js(x)/ts(x) 文件。在執行轉換之前，會對文件進行快速的使用檢查，因此不使用宏的文件應該不會有性能損失。 * 注意`refTransform`現在是一個插件的頂層選項，而不再是位于`script.refSugar`之中了，因為它不僅僅只對 SFC 起效。 ~~~ // vite.config.js export default { plugins: [ vue({ reactivityTransform: true }) ] } ~~~ ### `vue-cli`[#](https://staging-cn.vuejs.org/guide/extras/reactivity-transform.html#vue-cli) * 目前僅對 SFC 起效 * 需要`vue-loader@^17.0.0` ~~~ // vue.config.js module.exports = { chainWebpack: (config) => { config.module .rule('vue') .use('vue-loader') .tap((options) => { return { ...options, reactivityTransform: true } }) } } ~~~ ### 僅用`webpack`+`vue-loader`[#](https://staging-cn.vuejs.org/guide/extras/reactivity-transform.html#plain-webpack-vue-loader) * 目前僅對 SFC 起效 * 需要`vue-loader@^17.0.0` ~~~ // webpack.config.js module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { reactivityTransform: true } } ] } } ~~~ * 開啟后使用 ~~~ <script setup lang="ts"> interface Props { msg: string count?: number foo?: string } const { msg, // 默認值正常可用 count = 1, // 解構時命別名也可用 // 這里我們就將 `props.foo` 命別名為 `bar` foo: bar } = defineProps<Props>() watchEffect(() => { // 會在 props 變化時打印 console.log(msg, count, bar) }) </script> ~~~