被迫开始学习Typescript —— vue3的 props 与 interface
<h1 id="vue3-的-props">vue3 的 props</h1><p>Vue3 的 props ，分为 composition API 的方式以及 option API 的方式，可以实现运行时判断类型，验证属性值是否符合要求，以及提供默认值等功能。</p>
<p>props 可以不依赖TS，自己有一套运行时的验证方式，如果加上TS的话，还可以实现在编写代码的时候提供约束、判断和提示等功能。</p>
<h2 id="prop-的校验">Prop 的校验</h2>
<p>官网：https://staging-cn.vuejs.org/guide/components/props.html#prop-validation</p>
<p>Vue 提供了一种对 props 的属性进行验证的方法，有点像 Schema。不知道Vue内部有没有提供interface，目前没有找到，所以我们先自己定义一个：</p>
<pre><code class="language-ts">/**
* vue 的 props 的验证的类型约束
*/
export interface IPropsValidation {
/**
* 属性的类型，比较灵活，可以是 String、Number 等，也可以是数组、class等
*/
type: Array<any> | any,
/**
* 是否必须传递属性
*/
required?: boolean,
/**
* 自定义类型校验函数（箭头函数），value：属性值
*/
validator?: (value: any) => boolean,
/**
* 默认值，可以是值，也可以是函数（箭头函数）
*/
default?: any
}
</code></pre>
<p>后面会用到。</p>
<h2 id="composition-api">composition API</h2>
<p>官网：https://staging-cn.vuejs.org/guide/typescript/composition-api.html</p>
<p>准确的说是在 script setup 的情况下，如何设置 props，具体方法看官网，这里不搬运。</p>
<p>探讨一下优缺点。</p>
<pre><code class="language-ts">interface Props {
foo: string
bar?: number
}
// 对 defineProps() 的响应性解构
// 默认值会被编译为等价的运行时选项
const { foo, bar = 100 } = defineProps<Props>()
// 引入 接口定义
import { Props } from './other-file'
// 不支持！
defineProps<Props>()
</code></pre>
<p>虽然可以单独定义 interface ，而且可以给整体 props 设置类型约束，但是只能在组件内部定义，目前暂时不支持从单独的文件里面读取。而且不能“扩充”属性。</p>
<p>也就是说，基本无法实现复用。</p>
<p>这个缺点恰恰和我的目的冲突，等待新版本可以解决吧。</p>
<h2 id="option-api">option API</h2>
<p>官网：https://staging-cn.vuejs.org/guide/typescript/options-api.html</p>
<p>这种方式支持Option API，也支持 setup 的方式，可以从外部引入 接口定义，但是似乎不能给props定义整体的接口。</p>
<pre><code class="language-ts">import { defineComponent } from 'vue'
import type { PropType } from 'vue'
interface Book {
title: string
year?: number
}
export default defineComponent({
props: {
bookA: {
type: Object as PropType<Book>,
// 确保使用箭头函数
default: () => ({
title: 'Arrow Function Expression'
}),
validator: (book: Book) => !!book.title
}
},
setup(props) {
props.message // <-- 类型：string
}
})
</code></pre>
<p>想了半天，可以用“二段定义”方式的方式来解决：</p>
<ul>
<li>定义一个 interface，规定一个组件必须有哪些属性。</li>
<li>定义 props 的 “描述对象”，作为共用的 props。</li>
</ul>
<h1 id="我的想法">我的想法</h1>
<p>为啥要给 props 设置一个 整体的 interface，而且还要从外部文件引入呢？</p>
<p>因为我理解的 interface 可以拥有“约束”的功能，即：可以通过 interface 约束多个（相关）组件的 props 里面必须有一些相同的属性。</p>
<p>所以需要在一个单独的文件里面定义接口，然后在组件里面引入，设置给组件的props。</p>
<p>Vue不倡导组件使用继承，那么如果想要约束多个组件，拥有相同的 props？似乎应该可以用 interface ，但是看官方文档，好像思考角度不是这样的。</p>
<h1 id="应对方式">应对方式</h1>
<ul>
<li>先定义组件需要哪些属性的 interface：</li>
</ul>
<pre><code class="language-ts">/**
* 表单子控件的共用属性。约束必须有的属性
*/
export interface ItemProps {
/**
* 字段ID、控件ID，sting | number
*/
columnId: IPropsValidation,
/**
* 表单的 model，含义多个属性，any
*/
model: IPropsValidation,
/**
* 字段名称，string
*/
colName: IPropsValidation,
/**
* 控件类型，number
*/
controlType: IPropsValidation,
/**
* 控件备选项，一级或者多级，Array<IOptionItem | IOptionItemTree>
*/
optionList: IPropsValidation,
/**
* 访问后端API的配置，IWebAPI
*/
webapi: IPropsValidation,
/**
* 防抖延迟时间，0：不延迟，number
*/
delay: IPropsValidation,
/**
* 防抖相关的事件() => void
*/
events: IPropsValidation,
/**
* 控件的大小，string
*/
size: IPropsValidation,
/**
* 是否显示清空的按钮，boolean
*/
clearable: IPropsValidation,
/**
* 控件的扩展属性，any
*/
extend: IPropsValidation,
}
</code></pre>
<p>ItemProps：目的是约束一个组件需要设置哪些属性，限制属性名称。</p>
<ul>
<li>然后定义 共用 的 props 的描述对象：</li>
</ul>
<pre><code class="language-ts">import type { PropType } from 'vue'
import type {
ItemProps,
IOptionItem,
IOptionItemTree,
IWebAPI
} from '../types/type'
/**
* 基础控件的共用属性，即表单子控件的基础属性
*/
const itemProps: ItemProps = {
/**
* 字段ID、控件ID
*/
columnId: {
type: ,
default: () => Math.floor((Math.random() * 1000000) + 1) // new Date().valueOf()
},
/**
* // 表单的 model，可以整体传入，便于子控件维护字段值。
*/
model: {
type: Object
},
/**
* 字段名称，控件使用 model 的哪个属性，多个字段名称用 “_” 分割
*/
colName: {
type: String,
default: ''
},
/**
* 控件类型，表单控件据此加载对应的子控件
*/
controlType: {
type: Number,
default: 101
},
/**
* 控件的备选项，单选、多选、等控件需要
*/
optionList: {
type: Object as PropType<Array<IOptionItem | IOptionItemTree>>,
default: () =>{return []}
},
/**
* 访问后端API的参数，IWebAPI
*/
webAPI: {
type: Object as PropType<IWebAPI>,
default: () => {
return {
serviceId: '',
actionId: '',
dataId: '',
body: null,
cascader: {
lazy: false, // 是否需要动态加载
actions: ['',''] // 按照level的顺序设置后端 API 的 action
}
}
}
},
/**
* 防抖的时间间隔，0：不用防抖。
*/
delay: {
type: Number,
default: 0
},
/**
* 事件集合，主要用于防抖
*/
events: {
type: Object,
default: () => {
return {
input: () => {}, // input 事件
enter: () => {}, // 按了回车
keydown: () => {} // 正在输入
}
}
},
/**
* 子控件的规格，默认设置。
* * 【element-plus】large / default / small 三选一
*/
size: { //
type: String,
default: 'small',
validator: (value) => {
// 这个值必须匹配下列字符串中的一个
return ['large', 'default ', 'small'].indexOf(value) !== -1
}
},
/**
* 是否显示可清空的按钮，默认显示
*/
clearable: {
type: Boolean,
default: true
},
/**
* 扩展属性，对象形式，存放组件的扩展属性
*/
extend: {
type: Object,
default: () => {return {}}
}
}
export { itemProps }
</code></pre>
<p>定义 props 的属性的具体类型、默认值等。</p>
<ul>
<li>最后在组件里面引入</li>
</ul>
<pre><code class="language-ts">
import { itemProps } from '../../../lib/base/props-item'
export default defineComponent({
name: 'ui-core-form-item',
props: {
aa: String,
...itemProps
},
setup(props) {
console.log('表单子控件的 props：', props)
return {
props
}
}
})
</code></pre>
<p>使用解构的方式设置组件的 props，还可以有提示，还可以扩展自己的属性。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/25078225-acb9a6f335087881.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="vue3的props的提示.png" loading="lazy"></p>
<p>好像哪里不对，不过先这样了。</p>
<h1 id="vue3-的-props-到底是啥结构">vue3 的 props 到底是啥结构？</h1>
<p>说起来比较复杂：</p>
<p><img src="https://upload-images.jianshu.io/upload_images/25078225-71ba992bebaeb2de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="vue3的props.png" loading="lazy"></p>
<ul>
<li>外层是 shallowReadonly。（第一层属性不能直接改，但是第二层（通过引用类型）可以直接改。）</li>
<li>里面是 shallowReactive。（解构时不会强制把普通对象变成reactive，为了效率吧。）</li>
</ul>
<p>基本就是这样。</p><br><br>
来源：https://www.cnblogs.com/jyk/p/16288682.html
頁:
[1]