web-dev-qa-db-ja.com

一般的なステートレスコンポーネントの種類OR TypeScriptのジェネリック関数インターフェイスを拡張して、さらにジェネリックにする？

問題：Stateless Functional Componentのインターフェースは

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>

character 27でエラーが発生し、Cannot find name 'T'

ここにあります： 変更された例のTypeScript Playground

MyFindings：

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になります。 TypeScript React=ジェネリックパラメーター/戻り値の型 必要ありません。小道具に適切な型を指定したい

javascriptreactjstypescriptgenerics
21
Naman Kheterpal

このようなジェネリックは使用できません：

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

TypeScript仕様には次のように記載されています。

フォームの構成体

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

型パラメーターのある矢印関数式、または型パラメーターのない矢印関数に適用された型アサーションとして解析できます。

ソース; Microsoft/TypeScript spec.md

宣言がTypeScript仕様で定義されているパターンと一致しないため、機能しません。

ただし、SFCインターフェイスを使用せずに、自分で宣言することはできません。

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>
    );
}
16
jmattheis

コンポーネントの外部で汎用コンポーネントタイプエイリアスを宣言し、必要なときに単純にアサートすることで、この問題を軽減するパターンがあります。

それほどきれいではありませんが、それでも再利用可能で厳密です。

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>
9
vadistic

工場パターン：

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>();
5
chris

私は同様のソリューションを提案していますが、わずかに異なるソリューションです（友人とブレインストーミング）。 Formikラッパーを作成しようとしており、次のように動作させることができました。

_import React, { memo } from 'react';

export type FormDefaultProps<T> = {
  initialValues: T;
  onSubmit<T>(values: T, actions: FormikActions<T>): void;
  validationSchema?: object;
};

// We extract React.PropsWithChildren from React.FunctionComponent or React.FC
function component<T>(props: React.PropsWithChildren<FormDefaultProps<T>>) {
  // Do whatever you want with the props.
  return(<div>{props.children}</div>
}

// the casting here is key. You can use as typeof component to 
// create the typing automatically with the generic included..
export const FormDefault = memo(component) as typeof component;

_

そして、次のように使用します：

_ <FormDefault<PlanningCreateValues>
        onSubmit={handleSubmit}
        initialValues={PlanningCreateDefaultValues}
      >
         {/*Or any other child content in here */}
        {pages[page]}
</FormDefault>
_

メソッド式ではこれを達成できませんでした：

const a: React.FC<MyProp> = (prop) => (<>MyComponent</>);

0
Jose A

React.FCによる注釈付けをあきらめて、次のように書くことができます。

const myCom = <T>(props: Prop<T>) => <div>test</div>
0
Nikola Mihajlović

これがあります：

interface Prop<V> {
    num: V;
}

そして、次のようにコンポーネントを定義しました：

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

コンポーネントに実装しているので、インターフェイスのVに具体的な型を指定する必要があるため、これは機能しません。

次のようになります。

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

objectがあった場所でのTの使用に注意してください。これは単なる例です。

0
John Kennedy