如何在打字稿中实现选项对象模式？

Question

我将在这里回答我自己的问题，因为这对于谷歌来说相当困难，我希望每个人都更容易找到它。

本文解释了这种模式是什么：

“选项对象”是一种编程模式，可用于将任意数量的命名参数传递给函数。您只需传递一个参数，而不是使用有序的参数列表，该参数是一个包含所有选项的命名键的对象。继续阅读以了解如何以及为什么。

您可以使用打字稿功能以更简洁的方式实现此模式。具体方法请参阅我的回答。

您可以在这里看到有关 JavaScript 的类似问题：实现 JavaScript 选项对象参数模式？

这个问题有所不同，因为它是关于 TypeScript 的。关于 JavaScript 问题恰好有一个答案，解释了如何以打字稿方式进行操作，但我认为它值得有自己的问题。

Answer 1

这是您可以使用的代码链接。

    interface Options {
      lastSeparator?: string;
      separatorBetweenArrayOfTwo?: string;
      wrap?: (word: string) => string;
    }
    
    const separatedMessage = (
      words: string[],
      separator: string,
      { 
        lastSeparator = separator, 
        separatorBetweenArrayOfTwo = lastSeparator, 
        wrap = (word: string): string => {
          return word.toString();
        }
       }: Options = {} // the = {} at the end means you don't have to pass in an Object here if you don't want.
    ): string => {
      let buf = '';
    
      words.forEach((word, index, array) => {
        if (index !== 0) {
          if (array.length === 2) {
            buf += separatorBetweenArrayOfTwo;
          } else if (index === array.length - 1) {
            buf += lastSeparator;
          } else {
            buf += separator;
          }
        }
          buf += wrap(word);    
      });
      return buf;
    };
    
    console.log(separatedMessage(["a", "b", "c", "d"], ", "))
    console.log(separatedMessage(["a", "b"], ", ", {}))
    console.log(separatedMessage(["a", "b"], ", ", {lastSeparator: ", and "}))
    console.log(separatedMessage(["a", "b"], ", ", {lastSeparator: ", and ", separatorBetweenArrayOfTwo: " and "}))

这就是通过解构，您可以使用选项对象模式和打字稿的方式。此函数允许您传入单词数组，并用字符分隔它们。您可以选择指定最后一个分隔符 - 以实现“a, b, c, and d” - 可以选择指定两个数组之间的分隔符 - 以实现“a 和 b”或“a, b, c,和 d”，具体取决于您传入的内容，并且可以选择传入一个将每个单词包装在某些内容中的函数，以实现“'a'、'b'、'c' 和 'd'”。

Answer 2

我们可以为接口定义特定的键值对或任何键值对，然后破坏这些值。

interface Person {
    name: string;
    age: number;
    gender: string;
    hobby?: string;
    [key: string]: any;
}

function logPerson(person: Person) {
    console.log(person);
    return person;
}

function logPerson1(person: { [key: string]: any }) {
    console.log(person);
}

console.clear();
logPerson({ name: 'Kevin', age: 33, gender: 'male', hobby: 'basketball', hah: 'Hah' });
logPerson1({ name: 'Lucy', age: 100, gender: 'female', extra: 'extra property' });