ReactでのTypeScriptのpropsの自動補完が行われない。

Question

すこし地味なことなのですが、いろいろと検索しても解決できませんでしたので質問させて頂ければとおもいます。

本来、

interface about {
  hoge: string,
  huga: string,
}

export function About(props: about) {

と子のコンポーネントで定義して、
親のコンポーネントで

import { About } from '../pages/About';
importして、<About />

と入力していくと自動補完され、必要なpropsである、hoge、hugaが自動補完されるのではないかと思うのですが、<About/>下部に赤い波線がつき、そういったpropsが必要である、ということが

(alias) function About(props: about): JSX.Element
import About
Type '{}' is missing the following properties from type 'about': hoge, hugats(2739)

エラーとしてでるだけで、自動補完は行われません。

こういった場合、なにか設定が抜けているのでしょうか。

教えて頂けますと幸いです。

Answer 1

AboutをReact.FC型としておく必要があるかもしれません。

const About: React.FC<about> = props => {
  /*略*/;
}

export { About };

Comments

[mika2002]

ご回答頂きありがとうございます！！
教えて頂いた方法で試したのですが、状況が変わりませんでした、、