Typescript--3节

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("男");