使用 TypeScript
編寫 React
代碼,除了需要 TypeScript
這個庫之外,還需要安裝 @types/reac
t、@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
元素類型