web-dev-qa-db-ja.com

ステートレスReactコンポーネントのTypeScriptタイプ定義を作成するにはどうすればよいですか？

statelessReactコンポーネントの既存のスイートの型定義を作成しようとしているので、ドキュメントを自動的に生成し、チームのインテリセンスを改善できますツーリング。

コンポーネントの例は次のようになります。

myComponent.js

import React from 'react';

export const MyComponent = ({ prop1, prop2, prop3 }) => (
    <div>
        { prop1 ? prop2 : prop3 }
    </div>
);

型定義を次のようにします。

  • どの小道具を許可するか（およびどの小道具が必要か）を定義する
  • JSXを返すこと

this TypeScriptを使用してReactコンポーネントを作成する例）を見て、タイプを発見しました：React.SFC。

私は私の定義でこれを使用しようとしました：

index.d.ts

declare module "MyComponent" {
    import React from 'react';

    interface MyComponentProps {
        prop1: boolean;
        prop2?: string;
        prop3?: string;
    }

    export const MyComponent = React.SFC<MyComponentProps>
}

しかし、リンティングエラーが発生しています[ts] '(' expected.

私はTypeScriptにはかなり慣れていないので、明らかに何かが欠けていますが、ステートレスコンポーネントの型定義の作成に関する記事は見つかりません。

[〜＃〜] edit [〜＃〜]明確にするために、TypeScriptでコンポーネントを書き換えたくありません。既存のES6ステートレスコンポーネントのタイプ定義ファイル（* .d.ts）を作成したい。

reactjstypescripttype-definition
10
penguinflip

多くの手間をかけた後、次の設定に落ち着きました。

import React from 'react';

export interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
}

declare const MyComponent: React.SFC<MyComponentProps>

export default MyComponent

このインスピレーションは以下から得られました： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts

TypeDocおよびVS Codeのインテリセンスともうまく機能します。

私は信じている export defaultは、ここでインテリセンスを解読するための鍵でした。

8
penguinflip

これを試して：

declare module "MyComponent" {
  import React from 'react';

  interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
  }

  export const MyComponent: (props: MyComponentProps) => React.SFC<MyComponentProps>
}

公式からReactページの推奨事項 タイプ定義

3
suleyman

var MyComponent: React.SFC<MyComponentProps>;

とにかく、TSCがどのような定義を生成するかを確認するために、TypeScriptで既存のコードを書き換えることを検討することもできます。次に、コードを破棄し、定義のみを保持します。

2
Tommi Komulainen

:ではなく、=。

export const MyComponent:React.SFC<MyComponentProps> = ({ prop1, prop2, prop3 }) => (
<div>
    { prop1 ? prop2 : prop3 }
</div>
);
1
Rohith Murali

このようなものを試すことができます。

export type YourComponentType = {
  props1,
  props2
}

const YourComponent = ({
  props1,
  props2,
  ...restProps //additional props if passed to components.
}: YourComponentType) => (
  <div>{props1}</div>
)

export default YourComponent;
0
A Qadeer Qureshi

Microsoftが提供する反応TypeScript反応ボイラープレートを使用しています https://github.com/Microsoft/TypeScript-React-Starter

次のように、TypeScriptでステートレスコンポーネントを作成します。

export interface IMyComponentProps {
   prop1: string;
   prop2: (event: React.MouseEvent) => void;
   prop3: number;
}

export class MyComponent extends React.Component<IMyComponentProps> {
    render(): JSX.Element {
        const {prop1, prop2} = this.props

        return (
            //My code here
            <button>prop1</button>
            <button>prop2</button>
        );
    }
}
0
GAJESH PANIGRAHI