TypeScript泛型:React中具有联合类型的道具

和B。

在下面的代码中,我在一行上看到错误props.onChange(e.target.value as typeof props.value):“'string | string []'类型的参数不能分配给'string&string []'类型的参数”。

e.target.value是类型unknown如果onChange只是type (value: string) => void,那么我将像这样进行投射:props.onChange(e.target.value as string)那将起作用。同样适用于string[]

可能有一种方法可以使泛型实现这一功能,对吗?我还不知道怎么做。

e为了清楚起见,我将其包括在内;没有必要明确指出)。

import { MenuItem, Select } from '@material-ui/core';
import React, { ChangeEvent, FC } from 'react';

interface SingleProps {
  value: string;
  onChange: (value: string) => void;
  multiple: false;
}

interface MultiProps {
  value: string[];
  onChange: (value: string[]) => void;
  multiple: true;
}

const ReportDateSelect: FC<SingleProps | MultiProps> = props => (
  <Select
    value={props.value}
    onChange={(e: ChangeEvent<{ name?: string; value: unknown }>) =>
      props.onChange(e.target.value as typeof props.value)
    }
    multiple={props.multiple}
  >
    {[1, 2, 3].map((c, i) => (
      <MenuItem key={i} value={c}>
        {c}
      </MenuItem>
    ))}
  </Select>
);

export default ReportDateSelect;

扎卡里·哈伯(Zachary Haber)

问题之一是当您运行时props.onChange,打字稿实际上并不知道它在运行哪一个。

通过设置,您可以通过将onChange函数更改为以下内容解决打字错误

    onChange={(e: ChangeEvent<{ name?: string; value: typeof props.value }>) =>{
      if(props.multiple){
        props.onChange(e.target.value as typeof props.value)
      }else{
        props.onChange(e.target.value as typeof props.value)
      }
    }}

打字稿游乐场

这是执行通用方法的一种方法。为此,我不确定如果Type是数组,如何使multi prop要求为true,所以我只是使用Array#isArray

interface ReportDateSelectProps<Type = string | string[]> {
  value: Type;
  onChange: (value: Type) => void;
}

function ReportDateSelect<Type = string | string[]>(props: ReportDateSelectProps<Type>): React.ReactNode {
  return (
    <Select
      value={props.value}
      onChange={(e: ChangeEvent<{ name?: string; value: Type }>) =>
        props.onChange(e.target.value)
      }
      multiple={Array.isArray(props.value)}
    >
      {[1, 2, 3].map((c, i) => (
        <MenuItem key={i} value={c}>
          {c}
        </MenuItem>
      ))}
    </Select>
  );
}
export default ReportDateSelect;

打字稿游乐场

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

具有多个泛型类型的ArrayList?

来自分类Dev

创建具有泛型类型的函数

来自分类Dev

具有多个特征的泛型类型

来自分类Dev

具有泛型的Scala类型类

来自分类Dev

在C#中检查T泛型类型具有属性S(泛型)

来自分类Dev

具有泛型类型的泛型集合生成

来自分类Dev

具有泛型返回类型的vararg方法中的@SafeVarargs

来自分类Dev

类中具有2个泛型类型的方法,其中1个泛型类型

来自分类Dev

如何使用泛型缩小TypeScript联合类型

来自分类Dev

在TypeScript中,如何获取具有多个类型参数的方法中的泛型类型参数?

来自分类Dev

Typescript中的默认泛型类型派生

来自分类Dev

TypeScript和React中的联合类型道具

来自分类Dev

Typescript中具有泛型的子类型约束

来自分类Dev

TypeScript中泛型的深度条件类型

来自分类Dev

将Typescript泛型用于带有ESLint道具验证的React功能组件

来自分类Dev

使用泛型+联合类型从类中实现抽象方法时,类型安全性问题[Typescript]

来自分类Dev

TypeScript泛型:React中具有联合类型的道具

来自分类Dev

TypeScript中具有泛型的递归对象文字

来自分类Dev

Typescript从具有泛型类型的对象索引调用函数

来自分类Dev

具有联合类型抛出的泛型无法分配错误

来自分类Dev

具有接口类类型的泛型

来自分类Dev

react / typescript中的泛型道具-如何使T成为属性的类型?

来自分类Dev

具有泛型类型的泛型集合生成

来自分类Dev

类中具有2个泛型类型的方法,其中1个泛型类型

来自分类Dev

具有泛型类型的contains()

来自分类Dev

具有泛型类型的属性

来自分类Dev

具有类型依赖参数的 TypeScript 泛型方法

来自分类Dev

Typescript - 使用泛型扩展具有联合类型属性的接口

来自分类Dev

TypeScript 中的泛型类型继承

Related 相关文章

  1. 1

    具有多个泛型类型的ArrayList?

  2. 2

    创建具有泛型类型的函数

  3. 3

    具有多个特征的泛型类型

  4. 4

    具有泛型的Scala类型类

  5. 5

    在C#中检查T泛型类型具有属性S(泛型)

  6. 6

    具有泛型类型的泛型集合生成

  7. 7

    具有泛型返回类型的vararg方法中的@SafeVarargs

  8. 8

    类中具有2个泛型类型的方法,其中1个泛型类型

  9. 9

    如何使用泛型缩小TypeScript联合类型

  10. 10

    在TypeScript中,如何获取具有多个类型参数的方法中的泛型类型参数?

  11. 11

    Typescript中的默认泛型类型派生

  12. 12

    TypeScript和React中的联合类型道具

  13. 13

    Typescript中具有泛型的子类型约束

  14. 14

    TypeScript中泛型的深度条件类型

  15. 15

    将Typescript泛型用于带有ESLint道具验证的React功能组件

  16. 16

    使用泛型+联合类型从类中实现抽象方法时,类型安全性问题[Typescript]

  17. 17

    TypeScript泛型:React中具有联合类型的道具

  18. 18

    TypeScript中具有泛型的递归对象文字

  19. 19

    Typescript从具有泛型类型的对象索引调用函数

  20. 20

    具有联合类型抛出的泛型无法分配错误

  21. 21

    具有接口类类型的泛型

  22. 22

    react / typescript中的泛型道具-如何使T成为属性的类型?

  23. 23

    具有泛型类型的泛型集合生成

  24. 24

    类中具有2个泛型类型的方法,其中1个泛型类型

  25. 25

    具有泛型类型的contains()

  26. 26

    具有泛型类型的属性

  27. 27

    具有类型依赖参数的 TypeScript 泛型方法

  28. 28

    Typescript - 使用泛型扩展具有联合类型属性的接口

  29. 29

    TypeScript 中的泛型类型继承

热门标签

归档