ts是加强版的js,能够给我们提供类型；我们在写代码时就会给我们提示错误信息，而且还利于后续的维护；
1.Html中的dom的类型
和dom相关的类型 我们不能只是简单的把html中dom的类型给定为HTMLElement 还是要具体的，才会给我们提供我们想要的参数信息
- HTMLButtonElement //button的
- HTMLFormElement //form表单的
- HTMLDivElement //div的
- HTMLInputElement //input的
我们以input为例，代码如下：
// 关于HTMLInputElement 具体的dom的类型 我们按住ctrl键，右击HTMLInputElement可以到lib.dom.d.ts中查看更多的dom类型
const test1=document.querySelector<HTMLInputElement>('input') //HTMLInputElement指的就是input这个dom元素的类型
console.log(test1!.value) //!非空断言的意思 排除了test是null的可能
if(test1!==null){
test1.addEventListener('click',(e:MouseEvent)=>{ //MouseEvent 指的是鼠标事件
console.log(e.clientX)
})
console.log(test1.value)
}
// 另外一种的写法
const test2=document.querySelector('input') as HTMLInputElement
//或者下面的写法都是可以直接获取到value值，不要判断和断言的
const test2=<HTMLInputElement>document.querySelector('input')
2.获取另外一个函数的参数类型 Parameters
我们有时在项目中会遇到新建一个函数的参数类型与前面的函数类型是一样的，那么我们就可以使用Parameters直接实现参数类型的传递，代码如下：
const func1=(name:string,age:number)=>{}
// 获取到上面那个函数的参数类型
type FuncType=Parameters<typeof func1> //获取到参数的类型，并且给与别名type
const func2=(...data:FuncType)=>{
const [name]=data
console.log('name',name)
}
func2('taotao',28) //name taotao
3.对象类型进行强制key校验
const dataOb={
name:'taotao',
age:28
}
//T extends object ==>就是泛型T是一个对象，继承于对象类型
//K extends keyof T ==》就是K泛型就是T对象中keys的集合中的一个key
//T[K] ==>指的就是返回对象中某个key的属性值
function getName<T extends object,K extends keyof T>(o:T,name:K):T[K]{
console.log(o[name]) //taotao
return o[name]
}
getName(dataOb,'name')
4.一些内置类型的使用
首先定义一个接口类型，表示目标类型
interface User{
id:number,
age:number,
name:string
}
1.将必须类型变为可选类型Partial
type PartialUser=Partial<User>
//类型如下
type PartialUser = {
id?: number | undefined;
age?: number | undefined;
name?: string | undefined;
}
2.我们再把可选类型变为必须的类型 Required
type RequiredUser=Required<PartialUser>
//类型如下：
type RequiredUser = {
id: number;
age: number;
name: string;
}
3.选择出必须要用的一些字段，也就是从全部的类型中选择出部分类型 Pick
type PickUser=Pick<User,'id'|'age'> //'id'|'age'表示要从中选择出的类型集合
//类型如下：
type PickUser = {
id: number;
age: number;
}
4.排除掉一些不想要的类型，保留部分需要的类型，和Pick是相反的操作 Omit
type OmitUser=Omit<User,'id'|'age'> //'id'|'age'表示要从中排除掉的类型集合
//类型如下：
type OmitUser = {
name: string;
}
5.排除掉两个类型的交集,即是前面那个类型中含有后面那个类型中的类型，只保留独属于自己的类型 Exclude
type A=Exclude<'x'|'a','x'|'y'|'z'> //排除掉了'x'
//类型如下：
type A = "a"
6.Extract 从两个类型中找出公共的类型
interface FirstType{
id:number,
firstname:string,
lastName:string
}
interface SecondType{
id:number,
address:string,
city:string
}
type ExtractType=Extract<keyof FirstType,keyof SecondType>
//类型如下：
type ExtractType = "id"
7.Record 一个对象的 key 和 value 类型 Record后面的泛型就是对象键和值的类型
interface ProductIncart{
id:number,
name:string,
label?:string
}
const result:Record<string,ProductIncart>={
'one':{
id:12,
name:"taotao"
},
'two':{
id:13,
name:"taotao",
label:'hhhhh' //可选属性
}
}
// 有点类似于
type Product=ProductIncart[] //数组
interface Test{
[key:string]:ProductIncart
} //对象
8.NonNullable 将 null 和 undefined 从 Type 中排除掉,保留非null和undefined的类型
type Foo=number |string |null |undefined
type ArgsType=NonNullable<Foo>
function showType(args:ArgsType){
console.log(args)
}
类型如下：
type ArgsType = string | number
加油学习前端每一天！！！，后续遇到更新
