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