React 與 Hooks 如何使用 TypeScript 書寫類型？

本文寫於 2020 年 9 月 20 日

函數組件與 TS

對於 Hooks 來說是不支持使用 class 組件的。

如何在函數組件中使用 TS 呢？

首先定然是函數的類型，我們需要告訴 TS，這個函數他是個 React 組件。

如果是 JavaScript，我們會這么寫函數組件：

import React from 'react';

const MyComponent = () => {
  return <h1>你好，世界</h1>
}

但如果是 TypeScript，我們就應該加上類型了。

React 為我們提供了一個叫做 React.FunctionComponent 的類型，學過小學二年級英語的同學應該都知道，這個類型是 React.函數組件 的意思。如果你覺得這個名字太長了不好寫，React 也提供了一個簡單版本：React.FC

import React from 'react';

const MyComponent: React.FC = () => {
  return <h1>你好，世界</h1>
}

如果我們希望它能接收到 Children 該怎么寫呢？直接寫就可以了。

const MyComponent: React.FC = (props) => {
  return (
    <div>
      {props.children}
    </div>
  )
}

但這種情況是不可以接受額外的參數的。我們必須要聲明我們函數需要接收哪些參數。

interface Props {
  title: string;
  msg: string;
  list: number[];
}

然后將這個 Props 接口提供給 React.FC，寫成：React.FC<Props>。

此時我們函數接收的參數 props 除了函數組件默認可以接收的一些參數，例如 children 之外，還可以接收 Props 接口聲明的參數了。

useState

useState 的類型聲明如右邊：const [count, setCount] = useState<number>(0)。

useRef

useRef 我們通常用來管理 DOM，但也可以用用來管理其他的變量。

這里就說一下取 HTML DOM 元素的類型：HTMLInputElement 等等即可。

（完）