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

问题描述

我将在这里回答我自己的问题，因为这对 Google 来说非常困难，我希望每个人都能更轻松地找到它。

This article explains what this pattern is:

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

您可以使用打字稿功能以更简洁的方式实现此模式。请参阅我的答案以了解如何操作。

您可以在此处看到有关 JavaScript 的类似问题：Implement JavaScript options object parameter pattern?

这个问题不同，因为它是关于 JavaScript 的。碰巧在那个 JavaScript 问题上有一个答案，解释了如何以打字稿的方式进行操作，但我发现它很难阅读，因为语法标点符号太多。

解决方法

Here's a link to code you can play around with.

    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",{lastSeparator: ",and "}))
    console.log(separatedMessage(["a",and ",separatorBetweenArrayOfTwo: " and "}))

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

,

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

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' });