vue3 使用typescript小结

   最近学习vue3 typescript，网上看了很多文章，汇总一下，分享给大家，希望会对大家有帮助。

     一. 为props标注类型

      defineProps()宏函数支持从它的参数中推导类型：

这被称为运行时声明，传递给defineProps的参数作为运行时的props选项使用，推断出类型。

第二种方式，通过泛型参数来定义props的类型，这种方式更加直接：

这种被称为“基于类型声明”，编译器会尽可能的尝试根据类型参数推导出等价的运行时选项。这种方式不足之处在于，失去了定义props默认值的能力。为了解决这个问题，我们可以使用withDefaults编译器宏：

 上面代码会被编译为等价的运行时props的default选项。

二. 为emits标注类型

   emit函数的类型标注也可以使用运行时声明或基于类型的声明：

我们可以看到，基于类型声明，可以使我们对所触发的事件的类型进行更细粒度的控制。

三. 为ref()标注类型

默认推倒类型

ref会根据初始化时的值自动推导其类型：

通过接口指定类型:

注意：如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就是一个包含undefined的联合类型。

四. 为reactive标准类型

默认推导类型

reactive也会隐式的从它的参数中推导出类型：

通过接口指定类型

要显式的指定一个reactive变量的类型，我们可以使用接口：

五. 为computed()标注类型

默认推导类型

computed()会自动从其计算函数的返回值上推导类型：

通过泛型指定类型

你还可以通过泛型参数显式指定类型：

六：为事件处理函数标注类型

在处理原生DOM事件时，应该给时间处理函数的参数正确地标注类型：

当没有类型标注时，这个event参数会隐性的标注为any类型。这也会在tsconfig.json中配置了“strict”:true 或 "noImplicitAny":true时报出一个ts错误。因此，建议显示的为事件处理函数的参数标注类型。此外，你可能需要显式的强制转换event上的属性：

七：为provide/inject标注类型

provide和inject 通常会在不同的组件中运行。要正确的为注入的值标注类型，Vue提供了一个InjectKey类型，它是一个继承自Symbol的泛型类型，可以用来在提供者和消费者之间同步植入值的类型。

建议将注入的key的类型保存在一个单独的文件中，这样它就可以被多个组件导入。

当使用字符串注入key时，注入值的类型是unkown，需要通过泛型参数显式的声明：

注意：注入的值仍然可以是undefined，因为无法保证提供者一定会在运行时提供provide这个值。当提供了一个默认值后，这个undefined的类型就可以被移除。

如果你确定该值始终被提供，则可以强制转化该值。

八. 为组件模板引用标注类型

 有时，我们需要为一个子组件添加一个模板ref，以便调用它公开的方法。比如：我们有一个MyComponent子组件，它有一个打开的模态框的方法：

为了获取MyComponent的类型，我们首先需要通过typeof得到其类型，再使用TypeScript内置的InstanceType工具类型来获取其实例类型。

//pranet.vue