使劲卷Typescript认识--函数类型、类型断言、类型别名、枚举

175 阅读2分钟

这是我参与更文挑战的第11天,活动详情查看: 更文挑战

一、类型断言定义:

类型断言可以用来手动指定一个值的类型, 将一个联合类型的变量指定为一个更加具体的类型。

/**
* params: name: string, age: number
* return age:number
*/
function fun1(name:string,age:number):number {
    return age
}

let age1 = fun1('张三',18)

console.log(age);

image.png

二、函数类型

如果函数的参数不确定, 可以使用扩展运算符的方式来定义动态参数,

function fun2(name:string,age:number,...args:any):any {
    return args
}

let age1 = fun2('张三',18,'3434',34,13231)

console.log(age1);

image.png

1. 类型后面加='xx'设置默认值

function fun3(name:string='王五',age:number=20,...args:any):any {
    return age
}

let age2 = fun3()

console.log(age2);

image.png

2. 在es6中使用

let fun4: (name:string,age:number) =>  number=function(name:string='张三',age:number=20):number {
        return age 
}

let age4 = fun4('王五',18)
console.log(age4);

image.png

3. 接口方式定义类型

interface fun5Interface {
    (name: string, age: number):number
}

let fun5:fun5Interface = function(name,age) {return age}

let age5 = fun5('赵6',17)

console.log(age5);

image.png

4. 函数重载

// 5. 函数重载
function getValue(value:string):string
function getValue(value:number):number

function getValue(value:string|number):string|number {
    return value
}

let v:string = getValue('555')
console.log(v);

image.png

5.没有返回值

// 6. 没有返回值void
function getName(name: string):void {
    console.log(name);
    
}
getName('赵七')

image.png

6. 断言是某个类型的时候才执行

// 断言
function getAssert(value: string|number) {
    return (<string>value).length
}

console.log(getAssert('张三'));
console.log(getAssert(18));

image.png

7. 断言在jsx中使用较好的支持性

// 断言
function getAssert(value: string|number) {
    return (value as string).length
    // return (<string>value).length
}

console.log(getAssert('张三'));
console.log(getAssert(18));

image.png

三、类型别名

1. 定义

类型别名可以给一个类型起一个新的名字, 采用关键字type定义, 可以设置字符串和数值类型.

  • 约束类型
// type 声明类型别名
type strType = string | number
let str:strType = 666
console.log(str);

image.png

  • 约束字符串
// type 约束字符串
type strType2 = '男' | '女'
function getGender(sex: strType2):string {
    return sex
}

let sex = getGender('男')

image.png

四、枚举

1. 定义

枚举(enum)类型是对javascript标准数据类型的一个补充, 用于取值被限定在一定范围内的场景, 定义数值集合,枚举成员会被赋值为从0开始递增的数字, 同时也会被枚举值到枚举名进行反向映射.

  • 例子
enum Days{
    Sun,
    Mon,
    Tue,
    Web,
    Thu,
    Fri,
    Sat
}

console.log(Days);
// 枚举中某个值
console.log(Days[0]);

// 枚举成员
console.log(Days.Sun);

image.png

  • 例子 双向映射, 自增性
enum Colors{
    red,
    gree=11,
    blue
}

// 自增性
console.log(Colors);

image.png