ts学习总结4

96 阅读2分钟

ts可以定义接口 当接口传回来的参数不确定的时候

interface APIResponse<T=any>{
    error:number,
    data:T,
    message?:string
}
interface LoginInfo{
    userName:string,
    token:string
}

function login():APIResponse<any>{
    return{
            error:1,
            data:{},
            message
        
    }

}
或者
function login():APIResponse<LoginInfo>{
    return{
            error:1,
            data:{},
            message
        
    }

}
用泛型占位会给你提示更类型定义

平时开发中使用联合类型

type IUnion<T=boolean>=T|string|number
type t1=IUnion
type t2=Iuion<string[]|number[]>

在使用泛型的时候,都要添加泛型约束 并且使用泛型的时候不能做运算

像这样

function getVal<T>(val:T):T{
    return val+val; //直接报错了
    
    }


之前可以通过函数参数类型重载来限制参数类型现在通过联合类型约束泛型也可以做到

function getVal<T extends string|number>(val:T):T{
    return val+val; //直接报错了
    
    }


约束是某种类型的子类型 ts里拓展父类型后生成子类型 可以赋给父类

function getLen <T extends {length:number}>(val:T){
    return val.length
}

约束对象用接口,约束类型方法用type

function getObjVal(target:typeof person,key:keyof typeof sperson){
return target[key]
}
let person={name:'cxk',age:30}
getObjVal(person,''name)
利用泛型把这函数写活  ts只对类型做校验,对真正的业务逻辑不做关心
function getObjVal< T extends object,K extends keyof T>(target:typeof person,key:keyof typeof sperson){
return target[key]
}
class MyList<T extends string |number =number>{
private arr:T[]=[];
add(val:T){}
getMax():T{}

}

详细嗦嗦啥是联合类型 什么是交叉类型

(位与&)  ( 位或| ) ( 位异或^ )

1 & 1 = 1, 1 | 1 = 1, 1 ^ 1 = 0

1 & 0 = 0, 1 | 0 = 1, 1 ^ 0 = 1

0 & 1 = 0, 0 | 1 = 1, 0 ^ 1 = 1

0 & 0 = 0, 0 | 0 = 0, 0 ^ 0 = 0

联合类型就是并集 按位或 有1有0那就是1 只要是子类型都行

交叉类型就是交集 按位与 有1有0那就是0 两个都是1 才是 1 两个都得满足

interface Pserson1{
handman:string


}

interface Person2{
height:string
}
这里是并
let cxk:Person1 |Person2={
height:'giao'
}
这里是交集全都要有
let cxk:Person1 |Person2={
height:'giao',
handman:'美'
}





交叉类型 同时是两个类型的子类型,最终的结果可以赋予给任何一个类型

子类型可以赋予给父类型,子类型的结构要包含父类型的结构

ts的类型赋予一种是结构上的子赋与给父 {a:1,b:2} extends {a:1} 另一种是类型上的子赋予给父 'cxk' extends string

interface Pserson1{
handman:string,
gender:0


}

interface Person2{
height:string,
gender:1
}

type Person3=Person1&Person2//这时候因为gender的类型不相同没有交集 按位与冲突提示gender是nerver


解决方法例子

let obj={name:'cxk',age:20}
let jikun:{name:string,age:number,adderss:string}= obj as typeof obj &{address :string}

或者对象合并

function  merge<T extends object,K extends obj>(o1:T,o2:K){
    return {...o1,...o2}

}
用后面的值覆盖前面的