TS中的InstanceType函数和Typeof 操作符

InstanceType函数

• 简介

instancetype函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。

• 常见使用

场景一

【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型

	<!-- 子组件 -->
	<!-- MyModal.vue -->
	<script setup lang="ts">
	import { ref } from 'vue'
	
	const open = () => { console.log('斗帝蓝电霸王龙')}
	//子组件一定要暴露出去
	defineExpose({
	  open
	})
	</script>
1
2
3
4
5
6
7
8
9
10
11

	<!-- 父组件 -->
	<!-- App.vue -->
	<template>
		<MyModal ref='myModal'/>
	</template>
	<script setup lang="ts">
	import MyModal from './MyModal.vue'
	//一定要和子组件的ref名称一致，否则获取不到
	const myModal = ref<InstanceType<typeof MyModal> | null>(null)
	
	const openModal = () => {
	 myModal.value?.open()
	}
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

场景二

获取由某个构造函数构造出来的实例类型组成的类型。
注意：在TS或JS中，当你执行typeof Person时，如果Person是一个类的定义（如下例所示），typeof Person将会返回function。这是因为类在JavaScript中是基于函数的，类本身是一种特殊的函数对象。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。

	class Person {
	   name: string;
	   age: number;
	   
	   constructor(name:strig, age:number) {
	    this.name = name;
	    this.age = age;
	  }
	
	  getPersonInfo() {
	    return `${this.name} ${this.age}`;
	  }
	}
	
	// 类在JavaScript中是基于函数的，类本身是一种特殊的函数对象
	console.log(typeof Person); // 输出: Function
	
	typr personInstanceType = InstanceType<typeof Person> // 获取函数构造的实例类型组成的类型
	
	let person:personInstanceType = new Person('斗帝蓝电霸王龙', 18);
	console.log(person); // 输出: Person { name:'斗帝蓝电霸王龙', age: 18 }
	
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Typeof 操作符

• 简介

在 TypeScript 中，typeof 操作符可以用来获取一个变量或对象的类型。
此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型

• 常见使用

typeof 操作符可以用来获取一个变量或对象的类型。

	interface Person {
	  name: string;
	  age: number;
	}
	
	const sem: Person = { name: '斗帝蓝电霸王龙', age: 18 };
	type Sem = typeof sem; // type Sem = Person
1
2
3
4
5
6
7

typeof 操作符也可以对嵌套对象的类型。

	const iblidly = {
	    name: '斗帝蓝电霸王龙',
	    age: 18,
	    address: {
	      province: '河南',
	      city: '商丘'   
	    }
	}
	
	type iblidly= typeof iblidly
	/*
	 type iblidly= {
	    name: string;
	    age: number;
	    address: {
	        province: string;
	        city: string;
	    };
	}
	*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。

	function toArray(x: number): Array<number> {
	  return [x];
	}
	
	type Func = typeof toArray; // -> (x: number) => number[]
1
2
3
4
5