在 Vue 3 中，TS 是原生支持的，因为 Vue 3 本身就是用 TS 编写的，TS 有效的解决了前端工程化和规模化的问题，它在代码规范和设计模式上极大的提高代码质量，进而增强系统的可靠性、稳定性和可维护性。

---

两者的区别

1.提高代码的可读性和可维护性： 通过定义类型，我们可以清晰地描述变量、函数、类和接口等组件的类型信息，使得代码更加易于理解和维护。同时，在代码编辑器中，也可以通过类型信息来提供代码补全和类型检查等功能，从而减少代码错误和调试时间。

2.增加代码的可靠性和安全性： 通过定义类型，可以对代码进行类型检查，从而在编译期间就发现类型错误，避免在运行时出现类型错误的情况。这可以大大提高代码的可靠性和安全性。

3.优化代码的性能： 通过定义类型，可以减少代码运行时的类型检查和类型转换等操作，从而优化代码的性能。尤其是在处理大量数据的场景下，类型定义可以对代码的性能产生重要影响。

4.提高代码的可复用性和扩展性： 通过定义类型，我们可以创建可复用的组件，从而提高代码的可复用性和扩展性。例如，定义一个泛型函数、泛型类或泛型接口等，可以处理各种类型的数据，使得组件能够在不同的场景下重复使用。

---

常见类型在Vue3中的定义

原始类型

1.文本：

const value1 = ref<string>('我是文本')

2.数值 ：

const value2 = ref<number>(100)

3.布尔 ：

const value3 = ref<boolean>(false)

4.数组类型： 两种写法，Array和string[]（推荐） **

const value4 = ref<Array<string>>(['213', 'aaa']) 
​
const value5 = ref<string[]>(['aaa', '123','bbb']) 

5.元组类型： [] 用来约束数组的个数和指定索引对应的类型 **

const position = ref<[number, number]>([39.2031, 23.2302])

6.联合类型： | 表示由两个或多个其他类型组成的类型，也可以是其中的任意一种类型

const value6 = ref<(string | number | boolean)[]>(['aaa', 111, 'bbb', true])

7.对象类型： 直接使用{}描述对象结构

const state = reactive<{ name: string; age: number; method(str: string): void }>({
  name: '张三',
  age: 18,
  method(str) {}
})

8.可选参数/属性： ?代表可传或不传的参数/属性

// 可选参数
const add = (num1: number, num2?: number): void => { }
add(100)
​
// 可选属性
type commonType = {
    name: string
    age?: number
}
const val: commonType = {
    name: 'coco'
}

9.函数类型： 同时指定参数、返回值的类型

const add: (str: string, num: number) => string = (str, num) => {
  return str + num
}