vue3 typescript 工具类型

PropType<T> 为props中的属性标注类型

import type { PropType } from 'vue'

import { defineProps } from 'vue'

interface Book {
  title: string
  author: string
  year: number
}

defineProps<{
  // 提供一个比 `Object` 更具体的类型
  book: Object as PropType<Book>
}>()

// 等价于
export default {
  props: {
    book: {
      type: Object as PropType<Book>,
      required: true
    }
  }
}

MaybeRef<T> 用于组合式函数的参数标注

// `T | Ref<T>` 的别名
type MaybeRef<T> = T | Ref<T>

// 不使用 MaybeRef
type DateType = Date | number | string | Ref<Date | number | string>
export function useTimeAgo<DateType>(time: DateType): DateType {
  return computed(() => someFormating(unref(time)))
}

// 使用 MaybeRef 进行简化
type DateType = Date | number | string
export function useTimeAgo<DateType>(time: MaybeRef<DateType>): DateType {
  return computed(() => someFormating(unref(time)))
}

MaybeRefOrGetter<T> 用于组合式函数的参数标注

// `T | Ref<T> | (() => T)` 的别名
type MaybeRefOrGetter<T> = T | Ref<T> | (() => T)

export function toValue<T>(source: MaybeRefOrGetter<T>): T {
  return isFunction(source) ? source() : unref(source)
}

ExtractPropTypes<T> 从 props 中提取类型

作用：抽离props 类型，用于组件内部

const propsOptions = {
  foo: String,
  bar: Boolean,
  baz: {
    type: Number,
    required: true
  },
  qux: {
    type: Number,
    default: 1
  }
} as const

type Props = ExtractPropTypes<typeof propsOptions>
// 被定义为 boolean 类型 或 带有default 默认值的属性，都会被当做必要属性
// {
//   foo?: string,
//   bar: boolean,
//   baz: number,
//   qux: number
// }

// 属性类型定义常用方式

// 方式一 ： 不使用ExtractPropTypes, 通过接口定义props类型
interface IProps {
  /* 一些类型定义*/
}
const props = defineProps<IProps>()

// 方式二： 使用 ExtractPropTypes 可从 props 中抽离类型
import type { PropType, ExtractPropTypes } from 'vue'
export const Props = {
  /* 一些类型定义*/
  // status: {
  //   type: String as PropType<'on' | 'off'>,
  //   required: true,
  // },
} as const

export type IProps = ExtractPropTypes<typeof Props>

const props = defineProps<IProps>()

ExtractPublicPropTypes<T> 从 props 中提取类型

作用： 抽离 props 类型，给父组件用

const propsOptions = {
  foo: String,
  bar: Boolean,
  baz: {
    type: Number,
    required: true
  },
  qux: {
    type: Number,
    default: 1
  }
} as const

type Props = ExtractPublicPropTypes<typeof propsOptions>
// 只有被 required 定义的属性才是必要的
// {
//   foo?: string,
//   bar?: boolean,
//   baz: number,
//   qux?: number
// }

ComponentCustomProperties 增强自定义全局属性

import axios from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios
    $translate: (key: string) => string
  }
}

// app.config.globalProperties.$http = axios

ComponentCustomOptions 扩展组件选项类型

/* 为组件扩展 beforeRouteEnter 钩子*/
import { Route } from 'vue-router'

declare module 'vue' {
  interface ComponentCustomOptions {
    beforeRouteEnter?(to: Route, from: Route, next: () => void): void
  }
}

/* 使用 */
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // ...
  }
})

ComponentCustomProps 全局扩展组件 props 属性

declare module 'vue' {
  interface ComponentCustomProps {
    hello?: string
  }
}

export {}

// 现在即使没有在组件选项上定义过 hello 这个 prop 也依然能通过类型检查了
// <MyComponent hello="world" />

CSSProperties 扩展style属性，绑定属性及类型

declare module 'vue' {
  interface CSSProperties {
    [key: `--${string}`]: string
  }
}

// <div style={ { '--bg-color': 'blue' } }>
// <div :style="{ '--bg-color': 'blue' }"></div>