通用 TS 在这种情况下如何工作答案

【问题标题】：How generic TS works in this instance通用 TS 在这种情况下如何工作
【发布时间】：2021-12-06 04:39:26
【问题描述】：

我在网上遇到了以下代码，我对T 泛型如何发挥作用感到有些困惑。

代码如下所示：

interface TeamProps<T> {
   name: keyof T & string;
   league: string;
}

function Team<T>({
   name,
   league
}: TeamProps<T>){
   .... React component
}

组件是这样使用的：

<Team name="Liverpool" league="Premier League" />

我看不到T 的定义位置以及keyof T 的来源。

谁能帮忙解释一下，如果需要更多信息，请告诉我。

【问题讨论】：

T 是从name 的值推断出来的，它必须是字符串和 T 的键，所以在这种情况下T 是{ Liverpool: any }。但是，如果没有更多上下文，很难说为什么使用泛型。
是T 也不是PremierLeague？
不，正如您从TeamProps 中看到的那样，league 属性和T 之间没有任何联系——只有name 属性必须是keyof T。
实际上没有更多的代码/上下文，所以你认为这是不必要地添加泛型的情况还是增加了任何价值？是否增加了更多安全性？
大概T 不是在实际使用中被推断出来，并且表示将团队名称映射到其他数据的对象 - 在这种情况下，这会阻止使用团队该映射中不存在的名称。但是您甚至没有分享您正在查看的内容的链接，所以很难说。

标签： reactjs typescript generics typescript-generics

【解决方案1】：

这取决于Team 是如何被调用/构造的。

考虑这个例子：

import React from 'react'

interface TeamProps<T> {
  name: keyof T & string;
  league: string;
}

function Team<T>({
  name,
  league
}: TeamProps<T>) {
  return null
}

const ok = <Team<{ age: 42 }> name='age' league='League' /> // ok

const error = <Team<{ age: 42 }> name='Name' league='League' /> // expected error

const error2 = <Team<{ 2: 42 }> name={2} league='League' /> // expected error, keys should be string

Playground

如果 Team 的调用方式与您在示例中的方式相同，但在 Team<{ age: 42 }> 中没有显式泛型参数，则使用 T 没有任何意义。

【讨论】：

是的，我想如果它被不同地调用，但它的调用方式与我上面的示例相同 <Team name="Liverpool" league="Premier League" />
@peterflanagan 那么，这没有任何意义，甚至会造成伤害