美文网首页
typeScript学习笔记6 高级类型

typeScript学习笔记6 高级类型

作者: Cissy_fba3 | 来源:发表于2021-03-16 10:41 被阅读0次

    交叉类型 并集 &

    interface Dog{
        run():void
    }
    interface Cat{
        jump():void
    }
    
    let pet :Dog & Cat={//pet必须具有dog和cat的两个接口的所有成员
        run(){}, 
        jump(){}
    }
    
    let c:number | string //c只能为number或string
    //字符串和数字的字面量联合类型
    let a:'a'| 'b' |'c' //a的取值只能从abc三个字符串中取
    let b: 1 | 2 | 3 //同理b也是
    

    联合类型 交集
    声明的类型并不确定,可以为多个类型的一个
    只能访问共有方法

    class Dog{
        run(){}
        eat(){}
    }
    
    class Cat{
        jump(){}
        eat(){}
    }
    enum Master{Boy,Girl}
    function getPet(master:Master){
        let pet=master===Master.Boy?new Dog():new Cat()
        pet.eat()//pet在不确定是cat或dog的情况下可以使用两者都有的方法eat
        return pet
    }
    

    索引类型

    //keyof T
    //T[K]对象T的属性K的类型
    let obj={
        a:12,
        b:'name'
    }
    
    // function getValues(obj:any,keys:string[]){
    //     return keys.map((item)=>obj[item])
    // }
    console.log(getValues(obj,['a','b']))
    
    //keyof T
    interface Obj{
        a:number,
        b:string
    }
    let key:keyof Obj //key的类型就是字面量a和b的联合类型
    key='a'//key只能等于'a'或'b'
    
    //T[K] 对象T的属性K的类型
    let value:Obj['a'] //value只能为number
    
    //T extends U
    function getValues<T,K extends keyof T>(obj:T,keys:K[]):T[K][]{
        return keys.map((item)=>obj[item])
    }
    

    映射类型
    本质上是预先定义的泛型接口

    interface Obj1{
        a:number,
        b:string,
        c:boolean
    }
    
    type ReadOnlyObj=Readonly<Obj1> //Obj1所有属性只读
    type PartialObj=Partial<Obj1>   //Obj1的所有属性可选
    type PickObj=Pick<Obj1,'a'|'b'> //只要Obj1的a,b属性
    type RecordObj=Record<'x'|'y',Obj1> //x,y的类型是Obj1
    

    条件类型
    由条件表达式表达的类型

    //Exclude<T,U>
    type T5=Exclude<'a'|'b'|'c','a'|'g'>//'b'|'c'
    //NonNullable<T>
    type T4=NonNullable<'a'|'b'|'c'|undefined|null>//过滤undefined和null
    //Extract<T,U>
    type T6=Extract<'a'|'b'|'c','a'|'g'>//'a'
    //ReturnType<T>
    type T7=ReturnType<()=>string>//string
    

    相关文章

      网友评论

          本文标题:typeScript学习笔记6 高级类型

          本文链接:https://www.haomeiwen.com/subject/shqbqltx.html