typescript笔记-高级类型

一、交叉类型（&）: 将多个类型合拼在一起

// 示例1
type I0 = {TOP:"TOP"};//使用type声明的字面量类型
interface I1 {
    name:string
    sleep:()=>void
}
interface I2 {
    name:string
    working:()=>void
}

type I3 = I1&I2&I0
let O1:I3 = { //合拼的所有成员类型不能少也不能多
    name:"121",
    sleep(){},
    working(){},
    TOP:"TOP",
}

// 示例2 
function Extend<T,U>(first:T,second:U):T&U{
   let res = <T&U>{} ;//正确
     // let res:T&U;//正确
    //let res = {} as T&U; //正确
   //  let res = {};// 没指定类型。报错
    for (let key in first) {
        (<any>res)[key] = first[key];//需要使用断言，否则报类型错误
    }
    for (let key in second) {
        if (Object.prototype.hasOwnProperty.call(res, key)) {
            (<any>res)[key] = second[key]
        }
    }
    return res
}
let oj1 = {a:1}
let oj2 = {a:2,b:1}
let ro = Extend(oj1,oj2)

二、联合类型（ | ）：指定多个类型,多选一

interface I1 {
    name:string
    sleep:()=>void
}
type I4 = I1|I2|'LEFT'|'TOP'|'RIGHT'|'BUTTOM'

let O2:I4 = "BUTTOM" ;// 这里选了字面量类型 BUTTOM
let O3:I4 = { // 这里选了I1 类型
    name:"ds",
    sleep(){}
}

三、类型别名 type 

1. 只是给类型起一个名字，不会创建类型

2. 类型别名与接口区别，鼠标悬浮在类型上会显示字面量类型，而接口只会显示Interface

3. 类型别名不能别 extends和implements 


type T1=string  //原始类型

type2 T2 = { // 对象类型
   name:string,
  age:number      
}

type  T3 = "success" ||"fail" ;// 字面量类型

四、 获取值的类型 / 类型保护  typeof

// 示例1:获取数据类型
let O4 = {name:"lily",age:12}
type I4 = typeof O4

class O5 {
    uid:number|null=null
    constructor(){}
    getName(){}
    getAge(){}
    
}
let obj = new O5()
type I6 = typeof obj

// 示例2:做类型保护判断
function fn1(data:string|number){
    if(typeof data==="string"){
        // dosomething
    }else if(typeof data==="number"){
        // dosomething
    }
}

五、 限制类型的属性选项 keyof

//示例1
type I1 ={
    id:number
    name:string
    age:number
}
type I2 =  keyof I1;// 获取到I1的类型属性key(是一个联合类型)：id|name|age


//示例2:
// 原来写法
function getValue(obj:any,key:string){
    return obj[key]
}
getValue({name:"limk"},"id");//如果获取的值不存在,不会有任何提示

//限制类型写法
function getVlaueH<T>(obj:T,key:keyof T){
    return obj[key]
}
getVlaueH({name:"mike"},"name");// 如果第二参数的key 不存在第一个参数的对象中就会报类型错

六、映射类型：keyof+in

 简单实现利用keyof+in 将可选类型变成必要类型

type person = {
    name:string,
    age?:number,
    id:number
}
type Readolys<T>={
     [k in keyof T]-?:T[k]
}
let pser:Readolys<person> = {
    name:"mike",
    age:1,
    id:1
}

七：条件类型：条件类型指由表达式所决定的类型

// 示例,常见写法
T  extends U?T:U ;// 如果T 类型 属于 U类型,则返回T 类型,否侧返回U类型

示例：
let dataType = "TOP"|"LEFT"|"BUTTOM"|"RIGHT"
type Ttype<T,U> = T extends U?true:false
type res1 = Ttype<"TOP",dataType>;// true
type res2 = Ttype<"fail",dataType>;// false

八、 类型断言与保护

(1.)  当你确定知道某个值的类型，ts 可能在类型中检测不到，你就可以使用断言确定该值的类型

(2.) 官网说有两种写，一个是 as ，一个是尖括号<类型>值, 在typescript 中的tsx 只支持as 断言写法，还有一个 is 

　（8.1） as

//这里获取元素,ts会检测有可能不存在，你可以指定是它一定存在指定类型
let div = document.getElementById("div") as HTMLDivElement;//HTMLDivElement； 

   (8.2)  <类型>值：这里尖括号<> 不要和泛型搞乱了，泛型是在变量前<>; 断言是对值 重新声明类型，<>在值的前面

 let str = "this is string";
let len = (<string>str).length

 （8.3）is ：自定义类型保护, 一般在函数参数中用,用来判断某个属性属性某个类型

   //示例1
function isString(s:unknown):s is string{
    return typeof s ==="string"
}
//示例2
 type Fish = {
     swim:()=>void
}
type Bird = {
    fly:()=>void
}
function isFish<T>(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}

九、通过索引访问类型的自类型

let I1 = {
    id:1,
    name:"name1",
    childs:[
        {id:2,name:"name2",childs:[]}
    ]
}
type I2 = typeof  I1 
let O8:I2['childs'] = [{id:1,name:"like",childs:[]}]