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

【问题标题】：Typescript and React: Failing type inference when using React.Component and conditional typed propsTypescript 和 React：使用 React.Component 和条件类型化道具时类型推断失败
【发布时间】：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) {} } 这样的类，则此方法有效

标签： reactjs typescript react-native

【解决方案1】：

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

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

【讨论】：

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