React+Typescript エラーが解決できない

Question

import Title from './components/Title';

class App extends Component {

 //Event handlerやstateを定義する場所 → OK
 onClickHandler = () => {
  let title = document.getElementById('versionCounter');
  let upgradeButton = document.getElementById('upgradeButton');
  upgradeButton.style.display = "none";
}

//render()メソッド → OK
render() {

  //return → OK
  return (
    <div className="App">
      <header className="App-header">
        <Title
          title="Hello World 3.0"
          titleStyle={{color: 'orange'}}
          onClick={this.onClickHandler}
        >
          Hello World <span id="versionCounter" style={{borderBottom: '1px solid orange'}}>3.0</span>
        </Title>
      </header>
    </div>
  );
}
}
export default App;

import React from 'react';

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

export default Title;

下記の二つのエラーが解決できません
エラー内容
Type '{ children: (string | Element)[]; title: string; titleStyle: { color: string; }; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'titleStyle' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.

Type '{ children: (string | Element)[]; title: string; titleStyle: { color: string; }; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'titleStyle' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.ts(2322)

誰か教えてください

Answer 1

こんにちは

AppからTitleを使うときに、TitleのPropsに定義されていない、titleStyle を titleStyle={{color: 'orange'}} として渡しているのが原因と思われます。

解決策として、csstype を利用して、以下のように修正するといかがでしょうか？

修正前：

type Props = {
  title: string,
  onClick: Function,
  color: string
}

<h2 style={{props.titleStyle}}　･･･

修正後：

• yarn add csstype しておいて、

import * as CSS from 'csstype';

TitleのPropsから、colorを削除し、titleStyleを以下のように追加

type Props = {
  title: string;
  onClick: Function;
  titleStyle: CSS.Properties
}

それと、 props.titleStyle を囲む {} は二重である必要はないので、

<h2 style={props.titleStyle}　･･･

とします。

以上、参考になれば幸いです。

追記

より簡単な修正としては、現状のProps

type Props = {
  title: string;
  onClick: Function;
  color: string
}

のほうを生かしておいて、Appから使うほうで、titleStyleではなくcolorを渡すようにします。

<Title
  title="Hello World 3.0"
  color="orange"
  onClick={this.onClickHandler}
>

Title側では、受け取った color を以下のように style に設定します。

<h2 style={{color: props.color}}