typescript的InstanceType<type>怎么用呀?

  • Z时代
  • 2024-02-13
  • 分类：IT

今天在用element-plus写表单的时候,老师在用ref获取组件以后, 下面写的是

  const formRef = ref<InstanceType<typeof ElForm>>()

在网上搜了很多也不明白这个InstanceType<type>到底怎么用,以及下面的两种用法有什么区别吗

type PersonType1 = InstanceType<typeof Person>
const p1: PersonType1 = new Person('tom', 22)
type PersonType2 = typeof Person
const p2: PersonType2 = new Person('23', 2)

谢谢各位!! T T

回答：

作用是用构造函数的类型推断其实例的类型，InstanceType<new (...args) => T>的结果就是T

当你定义一个class Person，同时

  • 定义了其构造函数Person
  • 声明了其构造函数类型typeof Person
  • 声明了其实例类型Person

所以，InstanceType<typeof Person>即是类型Person。

在vue中需要InstanceType<typeof Component>得到组件实例类型，而不是直接用Component作为类型，是因为Component不是class，它只是一个构造函数，他没有声明实例类型。

回答：

InstanceType<Obj> 表示类型为 Obj 对象的实例。

具体到你的用法，InstanceType<typeof Person> 就相当于 Person 类型，所以 p1 没错。

到了 p2，你将一个 Person 类型的对象赋值给了 typeof Person 类型的对象，所以会报错 类型 "Person" 中缺少属性 "prototype"，但类型 "typeof Person" 中需要该属性。ts(2741)。

回答：

官方文档看一下：https://www.typescriptlang.org/docs/handbook/utility-types.ht...

回答：

TypeScript: Documentation - Utility Types

参考上面的文档，它有一些代码示例

// @errors: 2344 2344
// @strict: false
class C {
x = 0;
y = 0;
}
type T0 = InstanceType<typeof C>;
// ^?type T0 = C
type T1 = InstanceType<any>;
// ^?type T1 = any
type T2 = InstanceType<never>;
// ^?type T2 = never
type T3 = InstanceType<string>;
// ^?error
type T4 = InstanceType<Function>;
// ^?error

可以看到除了特殊的 any,never 之外，传入的 Type 参数必须具有构造器，否则就会报错。

以上是 typescript的InstanceType&lt;type&gt;怎么用呀? 的全部内容， 来源链接： utcz.com/p/934321.html

回到顶部