TypeScript快速入门教程（三）、函数、范型使用

文章快速索引：

1、TypeScript快速入门教程（一）、基础类型和变量声明
2、TypeScript快速入门教程（二）、面向对象知识（接口、类、抽象类）
3、TypeScript快速入门教程（三）、函数、范型使用
4、TypeScript快速入门教程（四）、联合类型 & 交叉类型 & 类型保护

1、函数

函数的类型主要由参数类型和返回值组成

1-1、函数定义

function 方法名(): 返回值 {
   //方法体
}

对于函数，常见的几种定义方式

• 命名定义

function namedAdd(x: number, y: number): number {
    return x + y
}

• 匿名定义

let anonymousAdd = function (x: number, y: number) {
    return x + y;
}

• 箭头函数方式

使用箭头函数的完整定义方式如下

let 方法名: (参数类型) => 返回类型 = function(方法类型): 返回类型{ 方法体}

实例：

let lamAdd: (x: number, y: number) => number
		 = function (x: number, y: number): number {
    return x + y;
}

如果不需要返回类型，只需要将number 修改成void即可。

上面是一个完整的函数定义，看着比较繁琐，那是因为我们对参数进行了详细的定义，上面的方法也可以简化为下面的代码。

let simple2Add = (x, y) => x + y
//使用
simple2Add(2, 3)

1-2、可选参数

和之前文章中接口和类中可选参数使用一样，函数中的可选参数，也是遵循一致的要求。

下面是一个简单的可选参数实例

//定义
function getScreenResume(name: string, bust?: number, age: number = 24) {
    if (bust) {
        console.log(`胸围d: ${bust}`)
    }
    console.log(`名称: ${name}, 年龄：${age}`)
}
//使用
getScreenResume('john')
getScreenResume('john', 96)
getScreenResume('john', 96, 43)

上面的bust和age都属于可选参数，属于两个不同的类型：

• bust?: number ？方式可选
• age: number = 24 默认值方式

对于可选参数使用，必选参数必须要写在可选参数的前面，否则编译会出错。

function getScreenResume(name: string, bust?: number,
	 age: number = 24, type: number) {
	// do somethins
}

上面的代码，会提醒写法错误

TS1016: A required parameter cannot follow an optional parameter

1-3、剩余参数

剩余参数可以理解成为另一种可选参数，对于要传递多个数据，但是又不确定长度的时候，可以使用剩余参数方式。

function moreArguments(name: string, ...others: string[], type: string) {
}

剩余参数，必须作为最后函数的最后一个参数使用，否则会编译报错。

TS1014: A rest parameter must be last in a parameter list

1-4、this & 箭头函数

箭头函数不会捕获this

class Handler {
    info: string;
    onClick = (e: Event) => {  //这里就是一个箭头函数
        this.info = e.type;
    }
}

2、范型

范型可以给参数输入、参数输出、返回结果进行约束。

2-1、范型基本使用

function f<T>(arg: T): T {
    return arg;
}
//正确使用
f<string>('hello')
//错误使用
f<number>('hello') //TS2345: Argument of type 
//'string' is not assignable to parameter of type 'number'

范围还可以作为函数的类型定义

let f1: <U>(arg: U) => U = f
f1<string>('Hexo'). //使用,相当于这里确定了`U`必须是string类型

这里f1的函数类型和函数返回类型就是U

2-2、接口中使用范型

范型支持继承，通过继承，可以让范型对象获得更多的功能

class Drag {
    public x: number;
    public y: number;

    public move(x: number, y: number) {
        this.x = x
        this.y = y
        console.log(`移动到位置： x: ${x},y: ${y}`)
    }
}

展示范型继承

interface GenericId<T extends Drag> {
	//这边使用了一个比较特别的方式定义
	//可以理解成Java中的传进来一个类对象
    show(c: new () => T): T
}
...
class MyID implements GenericId<Drag> {

    show(c: new () => Drag): Drag {
        let drag = new Drag()
        drag.move(2, 3)
        let _c = new c()
        _c.move(2, 3)
        return drag;
    }
}

使用

let myId = new MyID()
myId.show(Drag)