ReactでライブラリをimportしてるコンポーネントにFlowTypeをつける

こういうコンポーネントを作るとします。 import React from ‘react’; import { Button } from ‘semantic-ui-react’; const Item = ({titl […]

広告ここから
広告ここまで

目次

    こういうコンポーネントを作るとします。

    import React from 'react';
    import { Button } from 'semantic-ui-react';
    
    const Item = ({title = 'no title', handleClick}) => (
      <Button content={title} onClick={handleClick} />
    );
    

    FlowTypeを仕込む

    仕込むとこうなります。

    // @flow
    import React from 'react';
    import { Button } from 'semantic-ui-react';
    type Props = {
      title: string,
      handleClick: Function,
    };
    
    const Item = ({title = 'no title', handleClick}: Props) => (
      <Button content={title} onClick={handleClick} />
    );
    

    エラーになる

    flowコマンドがこけます。

    Error: src/components/Example.jsx:2
      2: import { Button } from 'semantic-ui-react';
                                ^^^^^^^^^^^^^^^^^^^ semantic-ui-react. Required module not found
    

    .flowconfigを更新します

    こんな感じにします。

    [ignore]
    .*/node_modules/.*
    
    [include]
    
    [libs]
    flow-typed
    
    [lints]
    
    [options]
    
    [strict]
    
    

    flow-typed/semantic-ui-react.jsを作る

    中身は以下のようにしておきましょう。

    /* eslint-disable flowtype/no-types-missing-file-annotation */
    declare module 'semantic-ui-react' {
      declare module.exports: any;
    }
    

    1行目を省くと「ちゃんと型設定しろ」的なエラーをESLintが出します。
    外部ライブラリの型検証までやってらんないので、disableしてanyでいっちゃいます。

    再度テストする

    これで通るはずです。
    importするライブラリが他にもある場合は、この手順を繰り返しましょう。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark