TS(TypeScript)，就是在js的基础上加上了类型限制，并且增加了一些面向对象的概念。js有的TS都有。

TS的优点

1.相对增加了复杂度，但后期更好维护。

2.可以当手册使用

3.有代码提示

4.可以在开发的时候直接报错，而不是运行的时候才报错。（静态检查）

TS的数据类型

基本数据类型：

字符（string）

数字（number）

布尔（blooean）

空（null）

未定义（undefined）

symbol（声明的变量是唯一的）

bigint（大整数，其后面通常会跟一个n）

对象类型：

标准普通对象类型（boject）

标准特殊对象类型（array）

非标准对象类型（Date，RegExp(正则)，Function）

新增数据类型：

自定义（Type）

任意（any）

联合（|）

从未存在（never）

断言（！和as）

枚举（enum）

字面量（option1 | option2 | option3 | ...）表示只能选择给出的这些选项。

接口（Interface）

接口一般用于对象，定义了一个对象包含那些属性和方法（但是并不实现方法和初始化属性）

面向对象

TS中也有面向对象的概念，包括对象的创建，继承等。

创建一个对象：const obj: object = {name: 'zs', age: 20}

这里声明的对象的属性和方法默认都是public，也就是外界是可以直接获取到对象的属性和方法的。与之对应的还有pravite和protected。private只有自己能访问自己的属性和方法，protected只有自己和继承的子类可以访问自己的属性和方法。

泛型

function fun<T>(value: T):<T>{return value}//泛型就是在JS函数的基础上可以传递数据类型。通过<T, P, ...>来进行传递。

Type和interface的区别：

interface是只针对于对象的约束。而Type可以约束所有的数据。

interface可以被继承，但是Type不能被继承

interface可以重名（重名的interface会合并），而Type不能重名。

泛型的工具类

Partial：语法——type newType1 = Partial<iType>//该工具的作用是把iType里的每一个约束都变成可选的，也就是相当于每一个键都加了一个？

Pick：语法——type newTypw2 = Pick<iType, 'key1' | 'key2' | ...>//该工具的作用是把iType里的key1,key2,...挑选出来组成一个新的自定义类型。

Omit：语法——type newType3 = Omit<iType, 'key1' | 'key2' | ...>//该工具的作用是把iType中的key1, key2, ... 去掉之后剩下的键组成的新的自定义类型

Record：type newType4 = Record<string, number> //该工具的作用是得到一个新的自定义类型，其中键只能是字符串类型，值只能是数值。

Vue中的TS

ref和reactive是vue3中的两个响应式API，实际上这两个响应式API也是泛型，ref的官方定义如下：

function ref<T>(value: T): Ref<Unwrap<T>>

interface Ref<T>{value: T}

vue中基于TS的组件传值

父传子：

父组件依然通过自定义属性将值传给子组件，<NavBar :data="123"></NavBar>

子组件可以通过defineProps({

data: {type: Number}

})来接收。

也可以通过Define<{data: number}>()来接收

子组件带默认值的接收withDefault(defineProps<{data: number}>(), {data: 200})

对于复杂数据类型：<NavBar :data="list"></NavBar>

子组件可以通过defineProps({

list: {

type: Array as PropType<iType[]>//将list的类型断言为PropType其类型为iType

}

})

子组件也可以通过defineProps<{list: iType[]}>()

子传父：const emit = defineEmit(['evt'])

const send = () =>{emit('evt', data: number)}

方式二：

const emit = defineEmit<{(e: 'evt', data: number)}>()

子组件暴露属性和方法

defineExpose({n})

父组件通过useTemplateRef来获取子组件暴露的属性和方法。

或者通过ref<InstanceType<typeof 子组件名>>来获取子组件暴露的方法。