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

Posted 2023-03-13

【中文标题】通用 TS 在这种情况下如何工作

【英文标题】：How generic TS works in this instance

【发布时间】：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 不是在实际使用中被推断出来，并且表示将团队名称映射到其他数据的对象 - 在这种情况下，这会阻止使用团队该映射中不存在的名称。但是您甚至没有分享您正在查看的内容的链接，所以很难说。

【参考方案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 那么，这没有任何意义，甚至会造成伤害