TS

发布于 2025-04-17  41 次阅读


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 子组件名>>来获取子组件暴露的方法。


真正的英雄主义,是认清生活真相后依然热爱生活 ——罗曼.罗兰