Typescript--3节

小灰灰 2021-07-24 16:44 297阅读 0赞

# Typescript–3节 #

## Typescript函数类型 ##

*  函数约束，有函数本身的参数约束，返回值约束
 *  还有函数本身赋值的变量的约束

代码实例：  
编译前

//声明式类型的函数  
    function funcType(name:string,age:number):number{
        return age;
    }
    var ageNum:number=funcType("张三疯",18);
    
    //函数参数不确定
    function funcType2(name:string,age:number,sex?:string):number{
        return age;
    }
    var ageNum2:number=funcType2("张思锋",18,"男");
    
    //函数参数的默认值
    function funcType3(name:string="张武峰",age:number=16):number{
        return age;
    }
    
    //表达式类型函数
    var funcType4=function(name:string,age:number):number{
        return age;
    }
    
    var funcType5:(name:string,age:number)=>number=function(name:string,age:number):number{
        return age;
    }
    
    interface funcType6{
        (name:string,age:number):number;
    }
    var funcType6:funcType6=function(namre:string,age:number):number{
        return age;
    }

编译后

//声明式类型的函数  
    function funcType(name, age) {
        return age;
    }
    var ageNum = funcType("张三疯", 18);
    //函数参数不确定
    function funcType2(name, age, sex) {
        return age;
    }
    var ageNum2 = funcType2("张思锋", 18, "男");
    //函数参数的默认值
    function funcType3(name, age) {
        if (name === void 0) { name = "张武峰"; }
        if (age === void 0) { age = 16; }
        return age;
    }
    //表达式类型函数
    var funcType4 = function (name, age) {
        return age;
    };
    var funcType5 = function (name, age) {
        return age;
    };
    var funcType6 = function (namre, age) {
        return age;
    };

*  可采用重载的方式才支持联合类型的函数关系

代码实例：  
编译前

//采用重载的方式才支持联合类型的函数关系
    // 输入是number类型，输出也是number
    // 输入是string'类型，输出也是string
    function getValue(value:number):number;
    function getValue(value:string):string;
    function getValue(value:string|number):string|number{
        return value;
    }
    let a:number=getValue(1);
    let b:string=getValue("1");

编译后

function getValue(value) {
        return value;
    }
    var a = getValue(1);
    var b = getValue("1");

## Typescript类型断言 ##

*  类型断言，可以用来手动指定一个值得类型
 *  语法<类型>值，或者值as类型
 *  在tsx语法(react的jsx语法的ts版)，必须采用后面的一种
 *  类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

代码实例：  
编译前

// let num:number|string="10";
    // num=20; //会报错
    // console.log(num.length);
    
    //类型断言   只能断言联合类型中存在的类型
    function getAssert(name:string|number){
        // return (<string>name).length;
        return (name as string).length;
    }

编译后

// let num:number|string="10";
    // num=20; //会报错
    // console.log(num.length);
    //类型断言   只能断言联合类型中存在的类型
    function getAssert(name) {
        // return (<string>name).length;
        return name.length;
    }

## Typescrip类型别名 ##

**类型别名可以采用一个类型起一个新名字**

采用关键字type，例如type Name=string|number
    例子中的Name就是表示设置字符串和数值类型
    也可以采用type来约束取值只能是某些字符串中的一个：如
    type EventNmes='click'|'scroll'|'mousemove'

代码实例：  
编译前

type strType=string|number|boolean;
    var str:strType='10';
    str=10;
    str=true;

编译后

var str = '10';
    str = 10;
    str = true;

对于接口也采用类型别名  
编译前

//可以对于接口也采用类型别名  
    interface muchType1{
        name:string
    }
    
    interface muchType2{
        age:number
    }
    type muchType=muchType1|muchType2;
    var obj1:muchType={name:"张三疯"};
    var obj2:muchType={age:22};
    var obj3:muchType={name:"张三疯",age:22};

编译后

var obj1 = { name: "张三疯" };
    var obj2 = { age: 22 };
    var obj3 = { name: "张三疯", age: 22 };

限制字符串的选择  
编译前

//限制字符串的选择
    type sex="男"|"女";
    function getSex(s:sex):string{
        return s;
    }
    getSex("男");

编译后

function getSex(s) {
        return s;
    }
    getSex("男");