如何和React項目中使用Typescript

使用 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 元素類型

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容