打字稿，为类中的可选参数设置默认值

Question

我有这堂课

export class dialogConfig {
    title: String;
    message?: String;
    okText?: String;
    withDecline?: false;
    width?: Number;
    height?: Number;
}

我有这个功能

  openDialog(config:dialogConfig){
        ...
    });

我想像这样调用函数

  openDialog({
    title: 'viola'
  }

其余未指定的参数，我想设置默认值。 我怎样才能做到这一点。

Answer 1

关于这个问题可能应该改变的事情：

• dialogConfig应该是DialogConfig ，因为在 TypeScript 中，命名对象类型通常以大写字母开头。 初始小写标识符通常表示变量名称或可能的原始类型。

• 我怀疑您应该使用interface而不是class 。 值{title: "viola"}在运行时实际上不是任何此类类的实例。 您可以将class用作interface ，这就是为什么openDialog({title: "viola"})不会出错的原因，但直接使用interface直接。 除非您正在编写new DialogConfig()或instanceof DialogConfig您不需要class 。 如果你正在写这些东西，你应该非常小心像{title: "viola"}这样的非实例文字。

• Number应该是number并且String应该是string 。 使用原始数据类型的大写版本几乎总是一个错误。

• false可能应该是boolean ，除非您说withDecline应该在指定时始终为false 。 这是可能的，但我很困惑这将如何与指定默认值的预期用例一起使用。 如果您希望withDecline为true ，那么您需要boolean 。

这给了我们：

interface DialogConfig {
    title: string;
    message?: string;
    okText?: string;
    withDecline?: boolean;
    width?: number;
    height?: number;
}

---

话虽如此，这是我分配默认值的方式：

const defaultValues = {
    message: "",
    okText: "",
    withDecline: false,
    width: 0,
    height: 0
}

function openDialog(config: DialogConfig) {
    const filledInConfig: Required<DialogConfig> = { ...defaultValues, ...config };    
    console.log(JSON.stringify(filledInConfig));
};

在这里，我使用一个名为defaultValues的对象，并使用object spread创建一个具有defaultValues所有属性的新值，然后用config所有属性覆盖。 假设config没有任何明确包含的undefined属性，这将导致类型为Required<DialogConfig>的filledInConfig值，与DialogConfig相同，但具有所需的所有属性，而不是将其中一些属性作为 optional 。

如果您不想使用对象传播，还有Object.assign() ：

const filledInConfig: Required<DialogConfig> = Object.assign({}, defaultValues, config);

无论哪种方式都会产生所需的结果：

openDialog({
    title: 'viola'
}); 
// {"message":"","okText":"","withDecline":false,"width":0,"height":0,"title":"viola"}

---

好的，希望有帮助； 祝你好运！

Playground 链接到代码

Answer 2

您可以做的手动对象分配越少越好（在我看来）。 让语言内置功能为您处理这个问题。

您可以将此函数签名用于openDialog来实现您要查找的内容：

// note that I have changed this to `interface` here
interface dialogConfig {
    title: String;
    message?: String;
    okText?: String;
    withDecline?: false;
    width?: Number;
    height?: Number;
}

// set your default values for any parameters here, like you see with
// message = 'default'
function openDialog ({ title, message = 'default' }: dialogConfig) {
  console.log(title);
  console.log(message);
}

openDialog({ title: 'Foobar' });
// will output:
// > Foobar
// > default