文章快速索引:
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)