Typescript 和 React：使用 React.Component 和条件类型化道具时类型推断失败

Posted 2023-03-13

【中文标题】Typescript 和 React：使用 React.Component 和条件类型化道具时类型推断失败

【英文标题】：Typescript and React: Failing type inference when using React.Component and conditional typed props

【发布时间】：2019-06-21 16:22:21

【问题描述】：

在下面的设置中，我尝试为 onChange 函数中的 value 参数获取正确的推断类型。下面的设置给了我一个string | number 类型的值，尽管我认为它应该是string，因为该值被分配了一个string。

import * as React from 'react'

type NumberProps = 
    decimals: number;
;

type StringProps = ;

type Props<T> = 
    value: T;
    onChange: (value: T) => void;
 & (T extends number ? NumberProps : StringProps);

class Y<T extends string | number> extends React.Component<Props<T>> 

new Y( value: 2.5, onChange:((value) =>  /* value is inferred as string | number, but should be number */ ))

有两件事可以使推理正确 - 但在其他方面当然会不正确 - 但可能会为错误提供线索：

我可以去掉Props类型的这一部分：& (T extends number ? NumberProps : StringProps);

我可以从 React.Component 以外的其他东西创建 Yderive，因为 例如像class X<T> constructor(props: T) 这样的类。

我是在做/期待什么错误，或者这是 Typescript 和/或 React 类型中的错误。

【问题讨论】：

number 在T extends number ... 中的值是多少？它是在哪里定义的？

@JohnKennedy 是它所指的内置类型 number。

在那种情况下，我认为你想做的事情不会奏效。您无法检查是否定义了内置类型 number。您需要删除它并在那里拥有您想要的类型。

@JohnKennedy 我不确定我是否关注你？如果我不是从 React.Component 派生而是使用像 class X<T> constructor(props: T)

这样的类，则此方法有效

【参考方案1】：

如果类型推断不起作用，您可以自己显式指定类型参数的值：

new Y<string>( value: 'test', onChange:((value) =>  /* value is now a string */ ))

【讨论】：

正确，但这并不能回答我的问题:)