Typescript--2节

我不是女神ヾ 2021-07-25 00:40 311阅读 0赞

# Typescript–2节 #

## Typescript联合类型 ##

*  联合类型表示取值可以为多种类型中的一种
 *  如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查
 *  只能访问此联合类型内的所有类型里共有的属性或者方法  
    代码实例：  
    编译前

var str:string|number="hello";//联合类型表示取值可以为多种类型中的一种
    str=10;
    // console.log(str.length)//str=10;时，会报错
    console.log(str.toString());//采用string和number都支持的方法

编译后

var str = "hello"; //联合类型表示取值可以为多种类型中的一种
    str = 10;
    // console.log(str.length)//str=10;时，会报错
    console.log(str.toString()); //采用string和number都支持的方法

## Typescript中对象类型-接口 ##

*  可描述的一部分抽象行为，也可描述对象的结构形状
 *  接口一般首字母大写，有的编程语言上面建议接口的名称加上I前缀
 *  赋值的时候，变量的形状必须要跟接口的形状保持一致
 *  接口中可定义属性，只读属性、任意属性  
    代码实例：  
    编译前

interface Istate{
        name:String,
        age:Number
    }
    var obj1:Istate;
    obj1={name:"张三疯",age:18};
    
    //可选属性
    interface Istate2{
        name:string,
        age?:number//？表示存疑，可有可无
    }
    var obj2:Istate2;
    obj2={name:'张思锋',age:18};
    obj2={name:"张武峰"}; 
    
    //属性个数不确定的时候   any必须是任意类型
    interface Istate3{
        name:string,
        age?:number,
        [propName:string]:any
    }
    var obj3:Istate3={name:"张留峰",age:22,sex:"男",isMarry:true};
    
    //只读属性  
    interface Istate4{
        name:string,
        readonly age:number
    }
    var obj4:Istate4={name:"张奇峰",age:12};
    obj4.name="张八峰";
    // obj4.age=33;  //年龄一旦赋予初始值之后，就不能在对其进行更改了！！！！！！！！

编译后

ar obj1;
    obj1 = { name: "张三疯", age: 18 };
    var obj2;
    obj2 = { name: '张思锋', age: 18 };
    obj2 = { name: "张武峰" };
    var obj3 = { name: "张留峰", age: 22, sex: "男", isMarry: true };
    var obj4 = { name: "张奇峰", age: 12 };
    obj4.name = "张八峰";
    // obj4.age=33;  //年龄一旦赋予初始值之后，就不能在对其进行更改了！！！！！！！！

## Typescript数组类型 ##

*  可采用\[类型+方括号\]表示

代码实例：  
编译前

//1.类型+方括号  
    var arr:number []=[1,2,3];
    var arr2:string []=['1','2','3'];
    var arr3:any[]=[1,2,'2','3',true];

编译后

//1.类型+方括号  
    var arr = [1, 2, 3];
    var arr2 = ['1', '2', '3'];
    var arr3 = [1, 2, '2', '3', true];

*  可采用数组泛型Array表示法

代码实例:  
编译前

//2.数组泛型Array<elemType>表示法
    var arrType:Array<number>=[1,2,3];
    var arrType2:Array<string>=['1','2','3'];
    var arrType3:Array<any>=['1',2,'2',true];

编译后

//2.数组泛型Array<elemType>表示法
    var arrType = [1, 2, 3];
    var arrType2 = ['1', '2', '3'];
    var arrType3 = ['1', 2, '2', true];

*  可采用接口表示法

代码实例:  
编译前

//3.接口表示法
    interface IArr{
        [index:number]:number
    }
    var arrType4:IArr=[1,2,3];
    
    interface Istata{
        username:string,
        age:number
    }
    interface IArr2{
        [index:number]:Istata
    }
    var arrType5:IArr2=[{username:"张三疯",age:18}];
    var arrType6:Array<Istata>=[{username:"张三疯",age:18}];
    var arrType7:Istata[]=[{username:"张三疯",age:18}];

编译后

var arrType4 = [1, 2, 3];
    var arrType5 = [{ username: "张三疯", age: 18 }];
    var arrType6 = [{ username: "张三疯", age: 18 }];
    var arrType7 = [{ username: "张三疯", age: 18 }];