ref reactive computed define props define emits 的类型注解,interface和type的区别；字面量和联合类型

ref reactive computed define props define emits 的类型注解

在Vue 3中，你可以使用TypeScript来为ref、reactive、computed、defineProps和defineEmits等函数提供类型注解。下面是每个函数的类型注解示例：

**1. ref : **

import { ref } from 'vue';
const count = ref<number>(0); // 注解为ref类型并指定泛型为number,<>位置在ref后边

**2. reactive : **

import { reactive } from 'vue';
interface Person { name: string; age: number;}
const person = reactive<Person>({ name: 'John', age: 25,}); // 注解为reactive类型并指定泛型为Person接口类型

3. computed :

import { ref, computed } from 'vue';
const count = ref<number>(0);
const double = computed<number>(() => count.value * 2); // 注解为computed类型并指定泛型为number
console.log(double.value);

4. defineProps :

import { defineProps } from 'vue';
interface Props {  message: string;  count: number;  }
export default {  props: defineProps<Props>(), // 注解为defineProps并指定泛型为Props接口类型
  // ...
};

5. defineEmits :

import { defineEmits } from 'vue';
export default {
  emits: defineEmits(['increment', 'decrement']), // 注解为defineEmits并指定可触发事件列表
  // ...
};

通过这些类型注解，你可以在使用这些函数时提供更准确的类型信息，以增强代码的可靠性和开发体验。

interface和type的区别

TypeScript 中的 type 和 interface 都可以用来定义类型，但是它们在语法和使用方面存在一些差异。

• type 是一种灵活的定义类型的方式，可以定义别名、联合类型、类型保护等。
• interface 只能用来定义对象的形状，不能定义其他类型，但是它更适合面向对象的编程。
• interface可以实现声明合并

1.语法：interface使用interface关键字，而type使用type关键字来声明类型。

// interface的例子
interface Person {  name: string;  age: number;  }

// type的例子
type Person = {  name: string;  age: number;  }; //注意type需要加等号

2.合并声明：当多次使用相同名称定义interface时，它们会自动合并成一个接口，而type则会报错。

// interface的合并
interface Person {  name: string;  }
interface Person {  age: number;  }
// 最终合并的结果
interface Person {  name: string;  age: number;  }

// type的报错
type Person = {  name: string;  };
type Person = {  age: number;  }; // 报错：无法重新声明块范围变量“Person”。

3.可扩展性：interface可以通过继承其他接口来扩展，而type可以使用交叉类型（Intersection）来实现相似的功能。

// interface的继承
interface Animal {  name: string;  }
interface Dog extends Animal {  bark: () => void;  }

// type的交叉类型
type Animal = {  name: string;  };
type Dog = Animal & {  bark: () => void;};

总结起来，interface更适合用于定义对象的形状和扩展，而type则更灵活，可以用于定义交叉类型、联合类型、元组类型等。在实际使用中，可以根据具体情况选择使用哪个关键字。

字面量和联合类型的使用

字面量（Literal）：

字面量是一种表示具体值的语法表示法。它直接表示某个特定的值，而非变量或表达式。常见的字面量类型包括字符串、数字、布尔值等。通过使用字面量，可以直接指定某个特定的值，而无需使用变量或表达式进行计算。

字面量类型在实际应用中通常和联合类型结合起来使用，提供一个精确的可选范围

场景1：性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案

type Gender = '男' | '女'
let gender:Gender = '男'  //此时赋值只能是男或女

场景2：ElementUI中的el-button组件按钮的type属性

type Props = {  type : 'primary' | 'success' | 'danger' | 'warning'  }

联合类型（Union Type）：

联合类型是一种允许变量、参数或返回值具有多种可能类型的类型。它表示一个值可以属于多个不同的类型之一。使用联合类型可以增加灵活性和表达能力。

语法上使用**竖线（|）**分隔多个类型。

例如:

let myVariable: string | number;
myVariable = "Hello"; // 合法
myVariable = 42; // 合法
myVariable = true; // 不合法，布尔类型不在联合类型中