vue3 里的 ts 类型工具函数

目录

前言

相关 API 源码

一、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 工具类型

相关推荐
猩兵哥哥18 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
RoyLin18 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
EMT19 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安20 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多20 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户51681661458412 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦2 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He2 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ2 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊2 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端