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するライブラリが他にもある場合は、この手順を繰り返しましょう。