（React）親要素から受け取ったデータの型は使いたいものだけ使えば良い

型でいつも怒られているTypeScriptに何故か怒られなかったので共有します。

MainComponentはSubComponentをimportして使用しています。
MainComponentではTestTypeという型を定義して、その型が持っている要素に'comp1'と'comp2'という文字列を代入しています。そして、それをSubComponentに渡しています。

MainComponent.tsx

import { SubComponent } from './SubComponent';

const MainComponent =>{

  type TestType = {
    comp1: string;
    comp2: string;
  };

  const components: TestType = {
    comp1: 'comp1',
    comp2: 'comp2',
  };

 return(
   <SubComponent  {...components} />
 );

}

SubComponentはMainComponentから受け取ったpropsからcomp1というキーの値をdiv要素に入れて返しています。

ここで、SubComponentでもTestPropsという型を定義しています。この型はMainComponentで定義したTestTypeという型からcomp2というキーを削除したものになります。

SubComponent.tsx

type TestProps = {
  comp1: string;
};

const SubComponent = (props: TestProps) => {
  console.log(props); // {comp1: "comp1", comp2: "comp2"}

  return (
    <div>{props.comp1}</div>
    // <div>{props.comp2}</div> // コメントアウトを外すとエラーになる
  )
};

export default SubComponent;

上の例はコンパイル成功しますが、SubComponentの中でprops.comp2を使用しようとすると、エラーになってしまいます。これはpropsの型がTestPropsと定義しているからです（TestPropsはcomp2という要素を持っていない）。

しかし、propsの中身を見るとcomp2の要素も入っています。

これはTypeScriptがデータは受け取るが、型宣言に入っていないものは弾くようによしなにやってくれてるんだと思います（調べてもよく分からなかったので分かる人教えてください）。

確かにデータ受け取っても宣言してないもの以外は使用できないようにすれば問題なさそうなので、上手く活用していきたいと思います。