相关疑难解决方法(0)

Typescript 泛型可用于扩展接口。

interface Sample1<P> {
  prop1: P;
}

interface Sample2<P> extends Sample1<P> {
  prop2: string;
}

但是当我尝试创建一个使用通用接口的功能组件时，打字稿会抛出错误。

const SampleSFC: React.SFC<Sample2<P>> = () => <div />;

错误 TS2304：找不到名称“P”。

如果我P用已知类型替换，string错误就会消失。

const SampleSFC: React.SFC<Sample2<string>> = () => <div />;

而不是硬编码类型的P，即完全杀死仿制药的目的，我想启用的用户SampleSFC以类型的集合P。

我怎样才能做到这一点？如果这是不可能的，那么我应该遵循什么样的替代设计，让我拥有带有通用道具的 SFC。

如何根据参数或外部配置在React无状态组件中定义泛型类型？

示例组件:

interface IProps<V> {
  value: V;
  doSomething: (val: V) => void;
}

const Comp: React.SFC<IProps<number>> = <T extends number>({
   value: T,
   doSomething
  }) => {
 return <div />;
}

以上示例将起作用,但仅以数字作为值.

是否可以升级以实现以下目标:

const Comp: React.SFC<IProps<??>> = <?? extends string | number>({
   value, /* of type ?? */
   doSomething
  }) => {
 return <div />;
}

因此,我们可以在使用组件时决定我们想要的数字或字符串.

所需用法:

// This should setup generic type to string
<Comp value="string" ... />

// Or number
<Comp value={123} ... /> …