Question

如何根据参数或外部配置在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} ... />

// Should be compilation error as we cannot use * on 'text' * 5
<Comp value="text" doSomething={val => val * 5} />

编辑：应该完成与function相同的工作：

 function Comp <T>({value, doSomething}: IProps<T>) { ... }

SFC类型有定义：

interface SFC<P> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement<any>;
  ...
}

Answer 1

我能够在TS 2.3中做到这一点。重点是使用2种类型用于＆＃34;内部＆＃34;和＆＃34;外面＆＃34;该组件。

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

// type "inside" component
function _Comp<T>(props: IProps<T>) {
    return <div />;
}

// type for "outside" of component
interface GenericsSFC extends React.SFC<any> {
    <T>(props: IProps<T> & { children?: React.ReactNode }, context?: any): JSX.Element;
}

const Comp = _Comp as GenericsSFC;

// dont type check: v is of type "hey"
<Comp value={"hey"} doSomething={v => v - 1} />;

Typescript使用泛型参数/返回类型实现无状态函数

1 个答案: