如何传递可选参数,而省略了其他一些可选参数?

请签名如下:

export interface INotificationService {
error(message: string, title?: string, autoHideAfter?: number);
}

如何调用函数error() ,指定title参数,但将autoHideAfter设置为1000?

464107 次浏览

不幸的是,TypeScript中没有这样的东西(更多细节在这里:https://github.com/Microsoft/TypeScript/issues/467)

但是为了解决这个问题,你可以把你的参数改成一个接口:

export interface IErrorParams {
message: string;
title?: string;
autoHideAfter?: number;
}


export interface INotificationService {
error(params: IErrorParams);
}


//then to call it:
error({message: 'msg', autoHideAfter: 42});

正如在文档中指定的那样,使用undefined:

export interface INotificationService {
error(message: string, title?: string, autoHideAfter? : number);
}


class X {
error(message: string, title?: string, autoHideAfter?: number) {
console.log(message, title, autoHideAfter);
}
}


new X().error("hi there", undefined, 1000);

操场上的链接

你可以在接口上指定多个方法签名,然后在类方法上重载多个方法:

interface INotificationService {
error(message: string, title?: string, autoHideAfter?: number);
error(message: string, autoHideAfter: number);
}


class MyNotificationService implements INotificationService {
error(message: string, title?: string, autoHideAfter?: number);
error(message: string, autoHideAfter?: number);
error(message: string, param1?: (string|number), param2?: number) {
var autoHideAfter: number,
title: string;


// example of mapping the parameters
if (param2 != null) {
autoHideAfter = param2;
title = <string> param1;
}
else if (param1 != null) {
if (typeof param1 === "string") {
title = param1;
}
else {
autoHideAfter = param1;
}
}


// use message, autoHideAfter, and title here
}
}

现在所有这些都可以工作了:

var service: INotificationService = new MyNotificationService();
service.error("My message");
service.error("My message", 1000);
service.error("My message", "My title");
service.error("My message", "My title", 1000);

...而INotificationServiceerror方法将有以下选项:

过载智能感知

<一个href = " http://www.typescriptlang.org/Playground/ src =接口% 20 inotificationservice % 7 b % d % 0 a % 20% 20% 20% 20% 20错误消息(% % 20字符串3 % 2 3 c % 20标题% 3 f % % 20字符串% 2 3 c % 20 autohideafter % 3 f % % 20号)% 3 b % d % 0 a % 09年错误(消息% % % 20字符串3 2 3 c % 20 autohideafter % % 20号)% 3 b % d % 0 a % 7 d % 0 d % 0 a % d % 0 aclass % 20 mynotificationservice % 20实现% 20 inotificationservice % 7 b % d % 0 a % 20% 20% 20% 20% 20错误消息(% % 20字符串3 % 2 3 c % 20标题% 3 f % % 20字符串% 2 3 c % 20 autohideafter % 3 f % % 20号)% 3 b % d % 0 a % 09错误消息(% % % 20 3字符串2 c % 20 autohideafter % 3 f % % 20号)% 3 b % 3 0 d % 0 a % 09年错误消息(% % % 20字符串3 2 3 c % 20 param1 % 3 f % % 20 (string % 7 cnumber) % 2 c % 20 param2 3 % 3 f % % 20号)% 20% 7 b % d % 0 a % 09% 09 var % 20 autohideafter % 3 % 20号% 2 c % 0 d % 0 a % 09% 09% 09冠军% 3 % 20字符串% 3 b % d % 0 0 d % 0 a % % 09% 09% 09% 09% 2 f % 2 f % 20例% 20 % 20映射的% 20 % 20参数% 0 d % 0 a % 09% 09年如果% 20 (param2 % 20 ! % 3 d % 20 null) % 7 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20 autohideafter % 20% 3 d % 20 param2 % 3 b % 0 d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20标题3 d % % 20% 20% 3装运箱% 3 e % 20 param1 % 3 b % 0 d %0 a % 20% 20% 20% 20% 20% 20% 20% 20% 7 d % 0 d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20其他% 20如果% 20 (param1 % 20 ! % 3 d % 20 null) % 7 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20如果% 20 (typeof % 20 param1 % 20% 3 d % 3 d % 3 d % 22字符串20% % 22)% 7 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20标题% 20% 3 d % 20 param1 % 3 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 7 d % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20其他% 7 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20 autohideafter % 20% 3 d % 20 param1 % 3 b % d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 7 d% 0 d % 0 a % 20% 20% 20% 20% 20% 20% 20% 20% 7 d % d % 0 0 d % 0 a % % 09% 09% 09%, 09年console.log(消息% 2 c % 20标题% 2 c % 20 autohideafter) % 3 b % d % 0 7 09% % d % d % 0 a % 7 d % 0 d % 0 a % d % 0阿瓦尔人% 20服务% 20% 3 d % 20新% 20 mynotificationservice () % 3 b % d % 0 aservice.error(% 22我% 20消息% 22)% 3 b % d % 0 aservice.error(% 22我% 20消息% 22% 2 c % 201000) % 3 b % d % 0 aservice.error(% 22我% 20消息% 22% 2 c % 22 20% % 20标题% 22)% 3 b % d % 0 aservice.error(% 22我% 20消息% 22% 2 c % 22 20% % 20标题% 22% 2 c % 201000) % 3 b nofollow noreferrer“rel = >操场< / >

这与@Brocco的答案几乎相同,但略有扭曲:只在对象中传递可选参数。(并且也使params对象可选)。

它最终有点像Python的**kwargs,但又不完全是。

export interface IErrorParams {
title?: string;
autoHideAfter?: number;
}


export interface INotificationService {
// make params optional so you don't have to pass in an empty object
// in the case that you don't want any extra params
error(message: string, params?: IErrorParams);
}


// all of these will work as expected
error('A message with some params but not others:', {autoHideAfter: 42});
error('Another message with some params but not others:', {title: 'StackOverflow'});
error('A message with all params:', {title: 'StackOverflow', autoHideAfter: 42});
error('A message with all params, in a different order:', {autoHideAfter: 42, title: 'StackOverflow'});
error('A message with no params at all:');

您可以在没有接口的情况下做到这一点。

class myClass{
public error(message: string, title?: string, autoHideAfter? : number){
//....
}
}

使用?操作符作为可选参数。

你可以通过?使用可选变量,或者如果你有多个可选变量通过...,例如:

function details(name: string, country="CA", address?: string, ...hobbies: string) {
// ...
}

其中:

  • name是必需的
  • country是必选项,有默认值
  • address是可选的
  • hobbies是一个可选参数数组

您可以尝试将title设置为null。

这对我很管用。

error('This is the ',null,1000)

另一种方法是:

error(message: string, options?: {title?: string, autoHideAfter?: number});

所以当你想要省略title参数时,就像这样发送数据:

error('the message', { autoHideAfter: 1 })

我宁愿这个选项,因为允许我添加更多的参数,而不必发送其他人。

你也可以在方法的签名中使用Partial<T>类型,但在这种情况下,你必须为你的选项创建一个接口:

interface IMyOptions {
title: string;
autoHideAfter: number;
}

然后这个方法的签名可以是这样的:

error(message: string, options?: Partial<IMyOptions>);

用法与上述相同。

Partial<T>类型应该已经在全局类型中声明,如下所示:

type Partial<T> = {
[P in keyof T]?: T[P];
};

您可以创建一个helper方法,该方法根据错误参数接受一个对象参数

 error(message: string, title?: string, autoHideAfter?: number){}


getError(args: { message: string, title?: string, autoHideAfter?: number }) {
return error(args.message, args.title, args.autoHideAfter);
}

在TS中,您还可以将参数设置为Object,并使对象的值可选,这样您就不必定义每个参数,只需定义您想要使用的参数即可。

public functionBeingCalled(obj: {status?: number, error?: string, message?: string}) {
if(obj.message) { console.log(obj.message) }
}


this.functionBeingCalled({message: 'Error Detected'})

在这种情况下,你可以使用“undefined”;值设置为您不想覆盖的可选参数

export interface INotificationService {
error(message: string, title?: string, autoHideAfter?: number);
}

你可以调用类似的错误方法

error("it works", undefined, 20);

小心null在这里不起作用。

https://www.typescriptlang.org/docs/handbook/functions.html

在JavaScript中,每个参数都是可选的,用户可以根据自己的需要去掉它们。当它们这样做时,它们的值是未定义的。我们可以在TypeScript中通过添加?我们希望参数的末尾都是可选的。例如,我们希望上面的last name参数是可选的:

function buildName(firstName: string, lastName?: string) {
if (lastName) return firstName + " " + lastName;
else return firstName;
}
 

let result1 = buildName("Bob"); // works correctly now
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
Expected 1-2 arguments, but got 3.
let result3 = buildName("Bob", "Adams"); // ah, just right