vue 项目中使用 ts

官方文档

TypeScript 工具类型

TypeScript 与选项式 API

vue 官方定义的 TypeScript 工具类型

PropType<T>

类型定义可查阅源码

export type PropType<T> = PropConstructor<T> | (PropConstructor<T> | null)[]

type PropConstructor<T = any> =
  | { new (...args: any[]): T & {} }
  | { (): T }
  | PropMethod<T>

type PropMethod<T, TConstructor = any> = [T] extends [
  ((...args: any) => any) | undefined,
] // if is function with args, allowing non-required functions
  ? { new (): TConstructor; (): T; readonly prototype: TConstructor } // Create Function like constructor
  : never

[AI问答：解释PropType及其在vue defineProps宏中的作用]

• PropType<T>:

  • 这个类型代表Vue.js中prop的类型。
  • 它可以是PropConstructor<T>或PropConstructor<T> | null的数组。
  • PropConstructor<T>是一个表示prop类型构造函数的类型。
  • | (PropConstructor<T> | null)[]部分允许prop可以是单个构造函数或构造函数(或null)的数组,这在prop可以接受多种类型时很有用。

• PropConstructor<T>:

  • 这个类型代表prop类型的构造函数。
  • 它可以是以下三种之一:
    • { new (...args: any[]): T & {} }: 一个类构造函数,接受任意数量的参数,并返回一个扩展自T的对象。
    • { (): T }: 一个返回T类型值的函数。
    • PropMethod<T>: 一个用于处理prop是函数的特殊类型。

• PropMethod<T, TConstructor>:

  • 这个类型用于处理prop是函数的情况。
  • 如果prop是一个带参数的函数(即((...args: any) => any) | undefined),那么PropMethod<T>表示一个函数式构造函数,其中TConstructor类型是函数prop的构造函数。
  • 如果prop不是一个函数,PropMethod<T>的值为never,意味着类型无效。

在defineProps宏中,你可以使用这些类型来定义Vue.js组件接受的prop类型。例如:

interface Props {  
  myProp: PropType<string>;  
  myOptionalProp?: PropType<number | null>;  
  myFunctionProp?: PropType<(arg: string) => number>;  
}  

const { myProp, myOptionalProp, myFunctionProp } = defineProps<Props>();

在这个例子中,myProp是一个必填的string类型prop,myOptionalProp是一个可选的number或null类型prop,myFunctionProp是一个可选的接受string参数并返回number的函数类型prop。

PropType<T>和PropConstructor<T>类型帮助TypeScript确保传递给Vue.js组件的props具有正确的类型,提供更好的类型安全性,并在编译时捕获潜在的错误。