TypeScript版Propsの受け渡し

React感覚でPropsの受け渡しをした際にうまくいかなかったので対処法をメモしてみた

ReactでのPropsの受け渡し

親コンポーネント

Main.jsx

import Child from "./Child";

export default function Main() {
  const text: string = "I'm Happy!";

  return <Child sendText={text} />;
}

子コンポーネント

Children.jsx

export default function Child(props) {
  return <div>{props.sendText}</div>;
}

TypeScriptで同様の実装をする

Main.tsx

return <Child sendText={text} />

sendTextにて以下のエラーメッセージが発生する

Type '{ sendtext: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'sendtext' does not exist on type 'IntrinsicAttributes'.

エラー対処

これは型の定義が不十分のために起こる。
Reactは型推論が効いているためこのエラーは発生しない。

なのでPropsの型を定義してあげれば問題は解決する

Main.tsx

import Child from "./Child";

export default function Main() {
  const text: string = "I'm Happy!";

  return <Child sendText={text} />;

Children.tsx

import { PropsType } from "./PropsType"

export default function Child(props:PropsType) {
  return <div>{props.sendText}</div>;
}

PropsType.ts

export interface PropsType{
  type sendText:string;
}

Propsが複数ある場合は型定義の記述を増やせば問題なし

おわり

IntrinsicAttributesこの見慣れない単語にあそばれた、、、
ググってもそれっぽい記事なかったので備忘録として残します。

（間違いある場合はご指摘いただきたいです。）