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