InstanceType函数
- 简介
instancetype函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。
- 常见使用
场景一
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型
<!-- 子组件 --><!-- MyModal.vue --><script setup lang="ts">import { ref } from 'vue'const open = () => { console.log('斗帝蓝电霸王龙')}//子组件一定要暴露出去defineExpose({open})</script>
<!-- 父组件 --><!-- 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>
场景二
获取由某个构造函数构造出来的实例类型组成的类型。
注意：在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); // 输出: Functiontypr personInstanceType = InstanceType<typeof Person> // 获取函数构造的实例类型组成的类型let person:personInstanceType = new Person('斗帝蓝电霸王龙', 18);console.log(person); // 输出: Person { name:'斗帝蓝电霸王龙', age: 18 }Typeof 操作符
- 简介
在 TypeScript 中，
typeof操作符可以用来获取一个变量或对象的类型。
此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型
- 常见使用
typeof 操作符可以用来获取一个变量或对象的类型。
interface Person {name: string;age: number;}const sem: Person = { name: '斗帝蓝电霸王龙', age: 18 };type Sem = typeof sem; // type Sem = Person
typeof 操作符也可以对嵌套对象的类型。
const iblidly = {name: '斗帝蓝电霸王龙',age: 18,address: {province: '河南',city: '商丘' }}type iblidly= typeof iblidly/*type iblidly= {name: string;age: number;address: {province: string;city: string;};}*/
typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。
function toArray(x: number): Array<number> {return [x];}type Func = typeof toArray; // -> (x: number) => number[]