tsconfig.jsonファイルでstrict:trueをコメントアウトしたのにエラーが出る

# 初めに
現在Web制作スキルに加えてReactを習得中の32歳です！
元々は医療系として病院勤務していましたが、昨年の3月に退職して1年間フリーランスとしてWeb制作を行ってきました。
簡単なJS開発は行っていましたが、React学習では躓きまくりなので躓きポイントを共有します！
今回はtsconfig.jsonファイルでstrict:trueをコメントアウトしたのですが、propsを渡す際にエラーが出て苦戦したので、その共有です。

# 前提
tsconfig.jsonファイルの中身は以下のとおりです。
```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
```
strictはコメントアウトしており、noImplicitAnyやstrictNullChecksの記述もしていません。
これであれば型定義がある程度ゆるくてもエラーは出ないと踏んでいました。

# 問題点
実装しようとしたことは親コンポーネントから小コンポーネントへのpropswp受け渡すという、超基本的な作業です。
```typescript
//App.tsx

import React, { useState } from 'react';
import axios from "axios";
import './App.css';
import { Todo } from './Todo';

function App() {
  const [todos, setTodos] = useState<Array<TodoType>>([]);

  const onClickFetchData = () => {
    axios.get<Array<TodoType>>("https://jsonplaceholder.typicode.com/todos").then((res) => {
      setTodos(res.data);
    })
  }

  return (
    <div className="App">
      <button onClick={onClickFetchData}>データ取得</button>
      {todos.map((todo) => (
        <Todo key={todo.id} title={todo.title} userid={todo.userId} completed={todo.completed} />
      ))}
    </div>
  );
}

export default App;
```
続いて子コンポーネントです
```typescript
//Todo.tsx

export const Todo = (props:TodoProps) => {
  const {title, userid, completed} = props;
  const completeMark = completed ? "[完]" : "[未]" ;
  return <p>{`${completeMark} ${title} (ユーザー名：${userid})`}</p>;
};
```

元々Reactではこの記述で問題なく、受け渡しができていました。
tsconfig.jsonでもstrictをコメントアウトしたし、何も問題はないかと思っていたのですが、以下のようなエラーが出ました。
>Type '{ title: any; userid: any; }' is not assignable to type 'IntrinsicAttributes & [any]'.
  Property 'title' does not exist on type 'IntrinsicAttributes & [any]'.
# 解決策
上記のエラーは調査すると、型定義がされていないために生じるエラーだそうです。
strictをコメントアウトしたのに？と思いましたが、typescriptのデフォルト？でpropsの型定義は必須だそうです。
そのため親コンポーネントと子コンポーネントを書き換えました。
```typescript
//App.tsx

import React, { useState } from 'react';
import axios from "axios";
import './App.css';
import { Todo } from './Todo';

type TodoType = {
  title: string;
  userId: number;
  id: number;
  completed: boolean;
}

function App() {
  const [todos, setTodos] = useState<Array<TodoType>>([]);

  const onClickFetchData = () => {
    axios.get<Array<TodoType>>("https://jsonplaceholder.typicode.com/todos").then((res) => {
      setTodos(res.data);
    })
  }

  return (
    <div className="App">
      <button onClick={onClickFetchData}>データ取得</button>
      {todos.map((todo) => (
        <Todo key={todo.id} title={todo.title} userid={todo.userId} completed={todo.completed} />
      ))}
    </div>
  );
}

export default App;
```
```typescript
//Todo.tsx

interface TodoProps {
  title: string;
  userid: number;
  completed:boolean;
}

export const Todo = (props:TodoProps) => {
  const {title, userid, completed} = props;
  const completeMark = completed ? "[完]" : "[未]" ;
  return <p>{`${completeMark} ${title} (ユーザー名：${userid})`}</p>;
};
```
これでエラーは解決しました。
# 終わりに
せっかくTypescriptを使用するなら、ちゃんとした型定義をしないといけないなと思いました。
今までtsconfig.jsonのstrictコメントアウトに甘えていたので、型定義が必須な箇所についての理解を深めていきたいです