TypeScript 在開發上除了定義每個 Component 的 Props Type 以外，我們還可以怎麼運用 Type 在我們原本的開發上？
TypeScript 在 React 框架中的運用
React typescript 有一些常見的 element types，是我們在使用 react 時會常常看到的，例如 props 的型別。比較常見的有 ReactNode 跟 JSX.element ，相信大家都不陌生！
在以前使用純 html 語法時，我們也常常用這樣巢狀的方式包住多個元素。那麼我們要怎麼在自製元素中使用包在中間的「其他東西」呢？在 react component中，我們把包在標籤中間的東西，稱為 children。他就是一種 ReactNode
想知道過多 React Types 可以從 Node module 裡面的 react 資料夾去尋找對應的 type element 唷！
React Component 的型別寫法
目前官方不建議使用 React.FC < >，而是直接像平常使用 JavaScript 寫 Components 一樣，TypeScript 會把這樣的 Component 型別自動推斷為「 JSX.element 」
一旦將 React 元件的型別定義成 React.FC< > 型別後，它會自動接受 children 作為可以傳入的 props。但在這個 React 元件中並不會使用到 children
使用 React.FC<> 若再針對元件定義 defaultProps 時可能會有誤判的情況
更多 Component With Types 的寫法可以參考下方第三張圖片，要先定義好 Props 的型別或是直接將型別寫在 Component 的參數上都可以
Specific Components 無法重複使用的元件
我們平常設計 Component 都是先決定好傳入的 props 型別，這樣的 Component 比較難以複用，如下圖就是我以 Todo List 為例撰寫的 React Component，這樣子的寫法就是所謂的 Specific Components。
Generic Components 寫一個可以被重複使用的組件
那要如何撰寫一個可以被重複使用的組件呢？這樣的組件主要包含三個要素，Props、Component 以及 Usage
Props
- renderItem：渲染資料的 function
- keyExtractor：渲染資料的 key index
- Data：渲染的陣列資料，型別未定
Component
所有的資料型別會依據傳入的資料而自定義，T extend unknown 代表 T 的型別未定義，泛型的特色就是不先定義物件型別，誰傳進去就是為的型別。
Usage
傳入對應的 Key、data、對應 render 的 Value 值，使用時無需再次將資料（陣列）以 .map 遍歷處理。可以直接傳入資料和函數。
上述的這種把泛型的設計概念運用在 Component 設計上就是源自於 React-Native 的 FlatList component 概念，因為復用性高也是許多 UI 框架中各種元件的原型設計。