React クラスコンポーネント propsの型指定

タイトル異なりますが、こちらの続きです。
electron-react-boilerplate5 - C#ATIA
段々初歩的な部分に戻ってる。(色々と吹っ飛ばしたので混乱中)

こちらをelectronで、と思っているのですが実質コピペで済みます。
コンポーネントと props – React
こちら関数コンポーネントなのですが、クラスコンポーネントに
した時がイマイチ分かっていないです。

正しいのかどうかも分からないのですが、とりあえずクラスコンポーネントに
したものがこちらです。

// App.tsx typescript

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';

export default function App() {

  class Welcome extends React.Component{
    render(){
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

  return (
    <Router>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </Router>
  );
}

無事表示はされます。が、よく見ると "name" が静的なエラーです。
あちらのサンプルはjavascriptのようです。

内容的には、typescript的に型の指定ないよ って事の様です。
まぁ指定していませんからね。

動けば良いような気もしますが、ビルドでクリアするのか
よくわからないですし、そもそも精神衛生上解消しておきたいです。

念のため、関数コンポーネントの場合、雑な対応ですが
anyでＯＫでした。

探したところ、こちらに答えが有りました。
React with typescript入門-Reactの型定義- - Qiita
そんな所で型を指定するのか・・・理解しがたい。

で直すとこんな感じでした。

// App.tsx typescript

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';

export default function App() {

  class Welcome extends React.Component<Props> {
    render(){
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

  type Props = {
    name?: string
  }

  return (
    <Router>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </Router>
  );
}

typeを作って、スーパークラス名の横に書くとエラー解消。
表示される結果には変化なしです。　やっぱり理解しがたい・・・。