详解在Vue中使用TypeScript的一些思考(实践)

Vue.extend or vue-class-component

使用 TypeScript 写 Vue 组件时，有两种推荐形式：

Vue.extend()：使用基础 Vue 构造器，创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近，唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。
vue-class-component：通常与 vue-property-decorator 一起使用，提供一系列装饰器，能让我们书写类风格的 Vue 组件。

两种形式输出结果一致，同是创建一个 Vue 子类，但在书写组件选项如 props，mixin 时，有些不同。特别是当你使用 Vue.extend() 时，为了让 TypeScript 正确推断类型，你将不得不做一些额外的处理。接下来，我们来聊一聊它们的细节差异。

Prop

由于组件实例的作用域是孤立的，当从父组件传递数据到子组件时，我们通常使用 Prop 选项。同时，为了确保 Prop 的类型安全，我们会给 Prop 添加指定类型验证，形式如下：

({ message: 'test' }) } } }

我们定义了一个 someProp，它的类型是 Object。

使用 JavaScript 时，这并没有什么不对的地方，但当你使用 TypeScript 时，这有点不足，我们并不能得到有关于 someProp 更多有用的信息（比如它含有某些属性），甚至在 TypeScript 看来，这将会是一个 any 类型：

这意味着我们可以使用 someProp 上的任意属性（存在或者是不存在的）都可以通过编译。为了防止此种情况的发生，我们将会给 Prop 添加类型注释。

Vue.extend()

使用 Vue.extend() 方法添加类型注释时，需要给 type 断言：

interface User {
name: string,age: number
}

export default Vue.extend({
props: {
testProps: {
type: Object as () => User
}
}
})

当组件内访问 testProps 时，便能得到相关提示：

然而，你必须以函数返回值的形式断言，并不能直接断言：

它会给出错误警告，User 接口并没有实现原生 Object 构造函数所执行的方法： Type 'ObjectConstructor' cannot be converted to type 'User'. Property 'id' is missing in type 'ObjectConstructor'.

实际上，我们可从 Prop type declaration ：

= { (): T } | { new (...args: any[]): T & object }

export type PropValidator = PropOptions | Prop | Prop[];

export interface PropOptions<T=any> {
type?: Prop | Prop[];
required?: boolean;
default?: T | null | undefined | (() => object);
validator?(value: T): boolean;
}

可知 Prop type 可以以两种不同方式出现：

含有一个调用签名的范型 type，该签名返回 T；
一个范型构造函数签名，该函数创建指定类型 T 对象（返回值 T & object 用于降低优先级，当两种方式同时满足时取第一种，其次它还可以用于标记构造函数不应该返回原始类型）。

当我们指定 type 类型为 String/Number/Boolean/Array/Object/Date/Function/Symbol 等原生构造函数时，Prop 会返回它们各自签名的返回值。

当 type 类型为 String 构造函数时，它的调用签名返回为 string：

interface StringConstructor {
new(value?: any): String;
(value?: any): string;
readonly prototype: String;
fromCharCode(...codes: number[]): string;
}

而这也是上文中，当指定 type 类型为 Object 构造函数时，经过 Vue 的声明文件处理，TypeScript 推断出为 any 类型的原因：

属性 .... }

类似的，当我们使用关键字 as 断言 Object 为 () => User 时，它能推断出为 User 。

从 type 第二部分可知，除传入原生构造函数外，我们还可传入自定义类：