返回類型 object 參數相同

Question

我希望能夠返回一個對象數組，其鍵名將取決於 function 接收的參數。 我有以下內容：

class CountryFilterFormatterService {
  public groupCountriesByRegion(
    groupLabelKey: string,
    groupValuesKey: string,
  ): {[groupLabelKey]: string, [groupValuesKey]: string}[] {
      return [
          {
              [groupLabelKey]: 'foo',
              [groupValuesKey]: 'bar'

        }
    ]
  }
}

export default CountryFilterFormatterService;

我希望 function groupCountriesByRegion的返回類型為{[groupLabelKey as string]: string, [groupValuesKey]: Country[]}[]但我收到以下錯誤： A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type

我怎樣才能實現這樣的返回類型？

操場

Answer 1

這個怎么樣？ 由於您提供的是動態密鑰，因此您只需指定一次即可。 如果您有一組固定的鍵，您還可以創建一個 Enum 並在通用string上使用它

 class CountryFilterFormatterService { public groupCountriesByRegion( groupLabelKey: string, groupValuesKey: string, ): {[groupLabelKey: string]: string}[] { return [ { [groupLabelKey]: 'foo', [groupValuesKey]: 'bar' } ] } } export default CountryFilterFormatterService;

Answer 2

我的建議是使function在 groupLabelKey 類型和groupLabelKey類型中都groupValuesKey ，如下所示：

class CountryFilterFormatterService {
    public groupCountriesByRegion<LK extends string, VK extends string>(
        groupLabelKey: LK,
        groupValuesKey: VK,
    ): { [K in LK | VK]: string }[] {
        return [
            {
                [groupLabelKey]: 'foo',
                [groupValuesKey]: 'bar'
            } as { [K in LK | VK]: string }
        ]
    }
}

有兩個通用類型參數： LK和VK ，分別對應於為groupLabelKey和groupValuesKey傳入的值的（希望） 字符串文字類型。 返回類型是一個映射類型的數組， {[K in LK | VK]: string} {[K in LK | VK]: string} 。 這意味着“一個 object 的鍵是LK和VK ，並且這些鍵的值是string s”。

這里有一個問題，編譯器無法將值{ [groupLabelKey]: 'foo', [groupValuesKey]: 'bar' }識別為正確的類型。 它看到通用計算鍵並將其一直擴展為string ，因此 object 的類型被推斷為{ [k: string]: string } ，如果您按原樣返回，編譯器會抱怨。 有一個關於此問題的公開 GitHub 問題microsoft/TypeScript#13948 ，但現在就是這樣。

解決方法是使用我上面所做的類型斷言，並添加as { [K in LK | VK]: string } as { [K in LK | VK]: string }在 object 文字之后。 還有其他解決方法，但這個不涉及運行時代碼。

所以，讓我們看看它是否有效：

const x = (new CountryFilterFormatterService()).groupCountriesByRegion("baz", "qux");
// const x: { baz: string; qux: string; }[]

x.forEach(
    v => console.log(v.baz.toUpperCase() + " " + v.qux.toUpperCase())
); // FOO BAR

看起來不錯。 我傳入了"baz"和"qux" ，編譯器認為x的類型是Array<{baz: string, qux: string}> ，正如您可能想要的那樣。

---

好的，希望有幫助； 祝你好運！

Playground 代碼鏈接