目录
- 前言
- 一、PropType\<T>
- 二、MaybeRef\<T>
- 三、MaybeRefOrGetter\<T>
- 四、ExtractPropTypes\<T>
- 五、ExtractPublicPropTypes\<T>
- 六、ComponentCustomProperties
- 七、ComponentCustomOptions
- 八、ComponentCustomProps
- 九、CSSProperties
前言
一、PropType<T>
用于在用运行时 props 声明时给一个 prop 标注更复杂的类型定义。
示例:
typescript
import type { PropType } from 'vue'
interface Book {
title: string
author: string
year: number
}
export default {
props: {
book: {
// 提供一个比 `Object` 更具体的类型
type: Object as PropType<Book>,
required: true
}
}
}
二、MaybeRef<T>
T | Ref 的别名。对于标注组合式函数的参数很有用。
三、MaybeRefOrGetter<T>
T | Ref | (() => T) 的别名。对于标注组合式函数的参数很有用。
四、ExtractPropTypes<T>
从运行时的 props 选项对象中提取 props 类型。提取到的类型是面向内部的,也就是说组件接收到的是解析后的 props。这意味着 boolean 类型的 props 和带有默认值的 props 总是一个定义的值,即使它们不是必需的。
要提取面向外部的 props,即父组件允许传递的 props,请使用 ExtractPublicPropTypes。
示例:
typescript
const propsOptions = {
foo: String,
bar: Boolean,
baz: {
type: Number,
required: true
},
qux: {
type: Number,
default: 1
}
} as const
type Props = ExtractPropTypes<typeof propsOptions>
// {
// foo?: string,
// bar: boolean,
// baz: number,
// qux: number
// }
五、ExtractPublicPropTypes<T>
从运行时的 props 选项对象中提取 prop。提取的类型是面向外部的,即父组件允许传递的 props。
示例:
typescript
const propsOptions = {
foo: String,
bar: Boolean,
baz: {
type: Number,
required: true
},
qux: {
type: Number,
default: 1
}
} as const
type Props = ExtractPublicPropTypes<typeof propsOptions>
// {
// foo?: string,
// bar?: boolean,
// baz: number,
// qux?: number
// }
六、ComponentCustomProperties
用于增强组件实例类型以支持自定义全局属性。
示例:
typescript
import axios from 'axios'
declare module 'vue' {
interface ComponentCustomProperties {
$http: typeof axios
$translate: (key: string) => string
}
}
七、ComponentCustomOptions
用来扩展组件选项类型以支持自定义选项。
示例:
typescript
import { Route } from 'vue-router'
declare module 'vue' {
interface ComponentCustomOptions {
beforeRouteEnter?(to: any, from: any, next: () => void): void
}
}
八、ComponentCustomProps
用于扩展全局可用的 TSX props,以便在 TSX 元素上使用没有在组件选项上定义过的 props。
示例:
typescript
declare module 'vue' {
interface ComponentCustomProps {
hello?: string
}
}
export {}
九、CSSProperties
用于扩展在样式属性绑定上允许的值的类型。
示例:
typescript
declare module 'vue' {
interface CSSProperties {
[key: `--${string}`]: string
}
}
html
<div style={ { '--bg-color': 'blue' } }>
html
<div :style="{ '--bg-color': 'blue' }"></div>
【注意】类型增强必须被放置在一个模块 .ts 或 .d.ts 文件中。查看类型增强指南了解更多细节。
【拓展】*SFC <style> 标签支持通过 v-bind CSS 函数来链接 CSS 值与组件状态。这允许在没有类型扩展的情况下自定义属性。*具体请参见CSS 中的 v-bind()。
【参考文章】
vue - TypeScript 工具类型