TypeScript参数的灵活性:可选与默认参数的实践
在JavaScript中,函数参数默认都是可选的,这意味着你可以调用函数时不传递任何参数。例如:
function test(x, y) {
console.log("x: " + x);
console.log("y: " + y);
}
test();
test(1);
输出结果为:
x: undefined
y: undefined
x: 1
y: undefined
然而,在TypeScript中,默认情况下所有参数都是必需的。如果我们用TypeScript重写上面的代码,将会得到编译错误:
function test(x: number, y: number): void {
console.log("x: " + x);
console.log("y: " + y);
}
test();
test(1);
编译错误为:
ts-no-optional.ts(6,1): error TS2554: Expected 2 arguments, but got 0.
ts-no-optional.ts(7,1): error TS2554: Expected 2 arguments, but got 1.
在TypeScript中声明可选参数
在TypeScript中,我们可以通过在参数后面添加?
来声明一个参数是可选的。这与我们在接口中描述对象属性时使用可选属性的方式类似:
function test(x: number, y?: number): void {
console.log("x: " + x);
console.log("y: " + y);
}
test(1);
test(1, 2);
输出结果为:
x: 1
y: undefined
x: 1
y: 2
需要注意的是,任何可选参数都必须跟在必需参数之后。例如,下面的代码将会导致编译错误:
function test(y?: number, x: number): void {
console.log("x: " + x);
console.log("y: " + y);
}
编译错误为:
ts-optional-param-wrong-ordering.ts(1,27): error TS1016: A required parameter cannot follow an optional parameter.
默认参数
TypeScript同样支持ES6的默认参数特性,这甚至适用于ES6之前的版本。在TypeScript中,你可以为函数参数指定默认值:
function test(x: number, y: number = 3): void {
console.log(`x= ${x}, y=${y}`);
}
test(2);
test(2, 5);
输出结果为:
x= 2, y=3
x= 2, y=5
如果你在编译TypeScript时使用了--target es6
标志,生成的JavaScript代码将会使用ES6的默认参数语法。如果没有使用该标志,编译器将会生成一个检查undefined
并赋值的逻辑。
函数类型中的可选/默认参数
可选参数也可以包含在函数类型定义中。例如:
let f: (x: number, y?: number) => void;
f = function(x: number, y?: number): void {
console.log(`x= ${x}, y=${y}`);
}
f(3);
输出结果为:
x= 3, y=undefined
但是,不能在函数类型定义中包含默认参数。例如:
let f: (x: number, y: number = 2) => void;
编译错误为:
default-params-function-type.ts(1,20): error TS2371: A parameter initializer is only allowed in a function or constructor implementation.
如果函数实现具有默认参数,它可以被赋值给一个具有相应参数的可选的函数类型。例如:
let f: (x: number, y?: number) => void;
f = function(x: number, y: number = 2): void {
console.log(`x= ${x}, y=${y}`);
}
f(3);
输出结果为:
x= 3, y=2
示例项目
本博客使用了以下依赖和技术:
- TypeScript 3.0.3
通过这个示例,我们可以看到TypeScript在函数参数方面的灵活性,以及如何利用可选参数和默认参数来编写更加健壮和灵活的代码。