react typescript propsでエラーになる

Question

reactをtypescriptで書いているのですが
Parameter 'props' implicitly has an 'any' type. TS7006
というエラーになってしまいます。

Title.tsx

import React from 'react';

const Title = (props) => {
  return(
    <div>
        <h2>{props.title}</h2>
    </div>
  );
}

export default Title;

わかる人がいたら教えてください

Answer 1

Props の型指定がされていないため、props.title の値が 存在しない可能性があるため、エラーになっています。
以下のように Props の型を指定してあげる必要があるかと思います。

import React from 'react';

type Props = {
  title: stirng
}

const Title = (props: Props) => {
  return(
    <div>
        <h2>{props.title}</h2>
    </div>
  );
}

export default Title;

すみません、ベストアンサーに選ばれてしまったのですが、以下追記です。
エラーは上記で解消されるかと思いますが、せっかく TypeScript を使っているのであれば、もっと型安全に書くことが出来ます。
今、Title の型を書いていませんが、これはファンクションコンポーネントなので、React.FC という型になります。
この型は props の型をジェネリクスで指定できるため、

const Title: React.FC<Props> = (props) => {

と書いた方がきれいかと思います。

Comments

[cuku]

ありがとうございます

[nerianighthawk]

エラーは最初の方で解消されると思いますが、
より型安全な書き方があるため、改めて追記しました。

[cuku]

<p onClick = {props.onClick} id= "upgradeButton">Upgrade</p>
onclickの場合はどのように指定してあげればいいのでしょうか？

[nerianighthawk]

`onClick` はクリック時に指定する関数だと思うので、とりあえずでいいのであれば `Function` 型を指定してあげればいいかと思います。
```
type Props = {
title: stirng,
onClick: Function
}
```
ちゃんと型安全にするのであれば、例えば関数が数値を受け取って、文字列を返す場合は `(n: number) => string` といったような型になります。
この場合は props で落とすの引数と返り値が固定されます。

TypeScript は例えばチームで開発をしている場合に、他の人が書いた部分に対して間違った改変をしてしまいバグを生むといった事態を防ぐためにあります。
もちろん、個人であっても昔書いたソースに対して間違った値を props で落としてしまうとかもあると思うので、有用です。
上記のような意図があるため、可能であれば、より型安全になるようにした方が良いです。

[cuku]

```
import React from 'react';

type Props = {
title: string,
onClick: Function
}
const Title : React.FC<Props> = (props) => {
return(
<div className = "titleSection">
<h2　style={{color: '#56D6FB'}}>{props.title}</h2>
<p onClick = {props.onClick} id= "upgradeButton">Upgrade</p>
</div>
);
}

export default Title;
```
onClickのとこでエラーになりました
Property 'onClick' is missing in type '{ title: string; }' but required in type 'Props'.
typeはpropsですと言われているのですがどういうことなんでしょうか？

[nerianighthawk]

そのコンポーネントを呼ぶ側で onClick を指定してあげていますか？
もしくは、ちゃんと保存出来ていないとか…

[cuku]

呼んでなかったです！

[cuku]

クラスコンポーネントの書き方がわからないのですが
class App extends Component {
だとエラーになってしまいます。

[cuku]

https://teratail.com/questions/224836に新しく質問しました

[cuku]

onClick呼んだのですが治らなかったです