typescript的InstanceType<type>怎么用呀?

Question

今天在用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

Answer 1

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

当你定义一个class Person，同时

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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 参数必须具有构造器，否则就会报错。