使用 TypeScript編寫 React 代碼，除了需要 TypeScript 這個庫之外，還需要安裝 @types/react、@types/react-dom

使用方式

在編寫 React 項目的時候，最常見的使用的組件就是：

• 無狀態組件
• 有狀態組件
• 受控組件

無狀態組件

主要作用是用于展示 UI，如果使用 js 聲明，則如下所示：

import * as React from "React";

export const Logo = (props) => {
  const { logo, className, alt } = props;
  return <img src={logo} className={className} alt={alt} />;
};

但這時候 ts 會出現報錯提示，原因在于沒有定義 porps 類型，這時候就可以使用 interface 接口去定義 porps 即可

import * as React from "React";

interface IProps {
  logo?: string;
  className?: string;
  alt?: string;
}

export const Logo:React.FC (IProps) = (props) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

• React.FC 顯式的定義了返回類型，其他方式是隱式推導
• React.FC 對靜態屬性：displayName，propTypes，defaultProps提供了類型檢查和自動補全
• React.FC 為children提供了隱式類型（ReactElement | null）

有狀態的組件

可以是一個類組件且存在 props 和 state 屬性

如果使用 TypeScript 聲明則如下所示：

import * as React from "React";

interface IProps {
  color: string;
  size?: string;
}
interface IState {
  count: number;
}
class App extends React.Component<IProps, IState> {
  public state = {
    count: 1,
  };
  public render() {
    return <div>Hello world</div>;
  }
}

受控組件

受控組件的特性在于元素的內容通過組件的狀態 state 進行控制

由于組件內部的事件是合成事件，不等同于原生事件，

例如一個 input 組件修改內部的狀態，常見的定義的時候如下所示：

private updateValue(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ itemText: e.target.value })
}

常用 Event 事件對象類型：

• ClipboardEvent<T = Element> 剪貼板事件對象
• DragEvent<T = Element> 拖拽事件對象
• ChangeEvent<T = Element> Change 事件對象
• KeyboardEvent<T = Element> 鍵盤事件對象
• MouseEvent<T = Element> 鼠標事件對象
• TouchEvent<T = Element> 觸摸事件對象
• WheelEvent<T = Element> 滾輪事件對象
• AnimationEvent<T = Element> 動畫事件對象
• TransitionEvent<T = Element> 過渡事件對象

T 接收一個 DOM 元素類型