TypeScript基础2

一、联合类型

联合类型，说白了就是‘或’。联合类型可以兼顾两个或者两个以上的数据类型。联合类型使用‘|’。

let str:string|number
str='abc'
str=123
str=true//报错，str联合了string和number

//联合类型取字面量
let str:10|12|'abc'
str=10
str=12
str='abc'
//字面量使用场景
let type:'primary'|'danger'|'warning'|'info'
type='primary'


let obj:{name:string,age:number|string}
obj={name:'羊羊羊',age:'16'}

let str:string|0
str='abc'
str=0

let obj:string|{name:string,age:number|string}
obj='abc'
obj={name:'羊羊羊',age:'19'}

二、数组

ts中规定数组有两种方式，一种是用泛型Array<number>，另一种是string[]的方式（这种方式优点类似于c或者java中声明数组的方式）。

let arr:Array<number>//<number>在后面代表泛型，泛型规定了数组中的格式只能是数字
arr=[1,2,3,'abc']//报错
arr=[1,2,3]

let arr:Array<any>
arr=[1,2,3,'abc',1>2]

let arr:Array<number|string>
arr=[1,2,'abc']

另一种声明方式
let arr:string[]
arr=['','abc']

let arr:string[]|number[]//只能单独分开写
// arr=[1,'2']//报错，数组中不能同时存在
arr=[1,2,3]
arr=['a','b','c']

let arr:(string|number)[]
arr=[1,2,'abc']

三、元组

ts中元组规定了数组的长度和元素的数据类型，不可以添加多余的元素。但是可以使用数组的push方法添加元素，但是不能直接访问数组元素，需要通过length属性去访问数组元素。

let arr:[string,number]
// arr=['a',1,'']//报错，规定只有两个元素，且元素位置要与数据类型相对应
arr=['a',1]

//添加元素
// arr[2]=666//报错，此方法不能添加元素
arr.push(666)
console.log(arr.length);//3

//取元素
// console.log(arr[2]);//报错，访问不到元素
console.log(arr[arr.length-1]);//666

四、枚举

ts中枚举是将可能项列举出来，将列举出来的可能项组成数据展示出来。通过关键字enum来声明枚举类型，枚举中的数据是以键值对的形式呈现出来。

enum Sex{
    man='男',
    woman='女'
}
console.log(Sex.man);

//枚举的应用
enum Color{
    red='红',
    orange='橙',
    yellow='黄',
    green='绿'
}
// let obj:any={
//     name:'羊羊羊',
//     color:'red'
// }
// console.log(Color[obj.color]);

let arr:any[]=[
    {name:'翠花1',color:'red'},
    {name:'翠花2',color:'orange'},
    {name:'翠花3',color:'yellow'},
    {name:'翠花4',color:'green'},
]
arr=arr.map((item:any)=>{
    console.log(item);
    item.color=Color[item.color]
    return item
})
console.log(arr);

五、自定义类型

ts中每一个变量都会对应一种类型，这个类型可以是string、number......当多个变量需要对应同一种复杂的类型时，可以使用自定义类型。自定义类型使用关键字type声明。type 自定义类型名称=自定义结构。

let obj:{name:string,age:number}//obj这个变量的结构
obj={name:'羊羊羊',age:22}
//现在需要mmd和hhd的结构和obj一样
// let mmd:{name:string,age:number}
// let hhd:{name:string,age:number}

//根据上面需求，自定义一个类型
type Obj={name:string,age:number}
let hhd:Obj
hhd={name:'羊羊羊',age:22}

六、泛型

泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

6.1函数中使用泛型

//一般情况声明和调用函数,此种方式复用性不够，传参类型和函数返回值类型被约束
function fn(x:string,y:number):string{
    return x
}
fn('',1)

//使用泛型
function fn<T>(x:T,y:T):T{
    //<>代表数据类型的形参
    //T=number
    return x
}
fn<number>(1,2)//调用的时候把数据类型的值传递过去

//使用多个数据类型
function fn<A,B>(x:A,y:B):A{
    return x
}
fn<Array<number>,string>([1,2,3],'abc');

6.2类中使用泛型

//未使用泛型
// class Human{
//     name:string;
//     age:number;
//     constructor(name:string,age:number){
//         this.name=name;
//         this.age=age;
//     }
// }
// let obj=new Human('如花',22)
// console.log(obj);
// let obj:Human={name:'翠花',age:22}

//类中使用泛型
class Human<T>{
    name:T
    constructor(name:T){
        this.name=name
    }
}
let obj:Human<string>=new Human('abc')

七、类

7.1类

class Human{
   name:string;
   age:number;
   constructor(name:string,age:number){
      this.name=name;
      this.age=age;
   }
}
let obj=new Human('如花',22)
console.log(obj);
let obj:Human={name:'翠花',age:22}

7.2类的继承

class Human{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    //父类的方法
    // talk:(x:string)=>void//1、指定方法
    talk(){//2、方法实体
        console.log(666);
        
    }
}

class China extends Human{
    constructor(name:string,age:number){
        super(name,age)
    }
    // talk=(x:string)=>{//1、方法实体，结构与父类保持一致,把父类指定的方法结构具体写
    //     return x
    // }
    talk(){//2、对父类方法进行重写
        return 'speak Chinese'
    }
    //子类自己的方法
    call=()=>{
        console.log(66);
        
    }
}

let obj:China=new China('张三',22)
console.log(obj);

7.3抽象类

/**
 * 抽象类
 * 只能被继承，不能被实例
 */
abstract class Human{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    //抽象方法  定义方法
    abstract talk:(x:string)=>void
    //实体方法
    call(x:number){

    }
}

// let h:Human=new Human()//会报错，抽象类不能实例化

class China extends Human{
    constructor(name:string,age:number){
        super(name,age)
    }
    talk=(x:string)=>{//方法实体，结构与父类保持一致，把父类指定的方法结构具体写
        return x
    }
    //子类重写父类方法
    call(x:number){
        console.log(666);
    }
}

let p:China=new China('张三',22)
console.log(p);

八、接口

8.1接口的实现

interface myType{
    name:string
    age?:number
    //定义方法
    call:(x:string)=>void
    //不能写方法实体，会报错，只能写抽象的东西
    // call:()=>{
    //     console.log(666);
        
    // }
}
interface myType{
    like:string
}
//两个同名的接口会合并
let obj:myType
obj={name:'翠花',call(x:string){},like:'write'}

8.2类实现接口

interface myType{
    name:string
    age:number
    call:(x:string)=>void
}

class Human implements myType{
    name: string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    call=(x:string)=>{
        return ''
    }
}

let p:Human=new Human('张三',22)