之前我们有简单了解了一下使用接口表示函数类型。接下来我们了解 typescript 中的函数和泛型。
函数
//声明式
function add(x, y) {
return x + y;
}
// 函数表达式
let myAdd = function(x, y) {
return x + y;
};
JavaScript 声明方式有声明式和表达式,另外有具名函数和匿名函数:
// 匿名函数
(function() {
let a = 20;
console.log(a);
})();
typescript 除了在 JavaScript 基础上添加了一系列校验外其它没什么很大区别。
typescript 函数类型:
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number {
return x + y;
};
//完整类型
let myAdd: (x: number, y: number) => number = function(
x: number,
y: number
): number {
return x + y;
};
// 函数的参数名称不需要与参数类型定义时的名称一致
let myAdd: (baseValue: number, increment: number) => number = function(
x: number,
y: number
): number {
return x + y;
};
这里我们队函数的参数和返回值指定了 number 类型的校验。TypeScript 能够根据返回语句自动推断出返回值类型,因此我们可以省略它。完整函数类型等于号之前的分别为参数和返回值的类型校验,有点类似写箭头函数()=>
,=>箭头代表返回。函数的参数名称不需要和参数类型定义时得名称一致。
let myAdd = function(x: number, y: number): number {
return x + y;
};
// 当指定了参数类型定义但 待校验函数参数没有标注类型时,typescript会自动识别类型
let myAdd: (baseValue: number, increment: number) => number = function(x, y) {
return x + y;
};
当指定了参数类型定义但 待校验函数参数没有标注类型时,typescript 会自动识别类型,按照类型定义规则校验。
JavaScript 里函数的参数是可选的定义之后可传可不传,没有传参的时候是 undefined,例如:
function aa(name, age) {
// do something
}
但是 typescript 里一旦表明这个函数有参数,那么在调用这个函数的时候必须加上参数。如果我们想要添加可选参数,可以使用可选类型:
// 可选参数必须跟在必须参数后面。 如果我们想让first name是可选的,那么就必须调整它们的位置,把first name放在后面
function buildName(firstName: string, lastName?: string) {
if (lastName){
return firstName + " " + lastName;
} else{
else return firstName;
}
}
我们也可以直接像 ES6 一样给参数一个默认值:
// 当调用函数没有传参数lastName时ÿ