通用无状态组件的类型？或者在typescript中扩展泛型函数接口以获得进一步的泛型？

Question

问题：无状态函数组件的接口给出为

interface SFC<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
}

我的组件的prop类型也是通用的：

interface Prop<V>{
    num: V;
}

如何正确定义我的组件？作为：

const myCom: <T>SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>

在字符27处出现错误，找不到名称“T”

下面是修改后的示例的Typescript

我的调查结果：

1： TypeScript 2.9.1支持有状态通用组件：http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements

class myCom<T> extends React.Component<Prop<T>, any> {
   render() {
      return <div>test</div>;
   }
}

2：扩展SFC以创建一个新接口，如以下答案所述，将使组件的prop类型为any：Typecript React无状态函数，具有我不想要的通用参数/返回类型。我想给我的道具适当的类型

Answer 1

工厂模式：

import React, { SFC } from 'react';

export interface GridProps<T = unknown> {
  data: T[];
  renderItem: (props: { item: T }) => React.ReactChild;
}

export const GridFactory = <T extends any>(): SFC<GridProps<T>> => () => {
  return (
    <div>
      ...
    </div>
  );
};

const Grid = GridFactory<string>();

要避免钩子错误规则，必须使用如下语法：

import React, { FC } from 'react';

export interface GridProps<T = unknown> {
  data: T[]
  renderItem: (props: { item: T }) => React.ReactChild
}

export const GridFactory = <T extends any>() => {
  const Instance: FC<GridProps<T>> = (props) => {
    const [state, setState] = useState(props.data)

    return <div>...</div>
  }

  return Instance
}

const Grid = GridFactory<string>()

Answer 2

有一种模式可以通过在组件外部声明通用组件类型别名，然后在需要时简单地断言它来缓解此问题。

虽然没有那么漂亮，但仍然是可重用的和严格的。

interface IMyComponentProps<T> {
  name: string
  type: T
}

// instead of inline with component assignment
type MyComponentI<T = any> = React.FC<IMyComponentProps<T>>

const MyComponent: MyComponentI = props => <p {...props}>Hello</p>

const TypedComponent = MyComponent as MyComponentI<number>

Answer 3

不能像这样使用泛型：

const myCom: <T>SFC<Prop<T>> = <T>(props: Prop<T>)=> <div>test</div>

TypeScript规范说明：

形式的构造

< T > ( ... ) => { ... }

可以解析为带有类型参数的arrow函数表达式或应用于不带类型参数的arrow函数的类型断言。

来源Microsoft/TypeScript spec.md

您的声明与TypeScript规范中定义的模式不匹配，因此无法工作。

然而，您可以不使用证监会界面，只需自己声明。

interface Prop<V> {
    num: V;
}

// normal function
function Abc<T extends string | number>(props: Prop<T>): React.ReactElement<Prop<T>> {
    return <div />;
}

// const lambda function
const Abc: <T extends string | number>(p: Prop<T>) => React.ReactElement<Prop<T>> = (props) => {
   return <div />
};

export default function App() {
    return (
        <React.Fragment>
            <Abc<number> num={1} />
            <Abc<string> num="abc" />
            <Abc<string> num={1} /> // string expected but was number
        </React.Fragment>
    );
}