TypeScript
React & TypeScript
如果对 TypeScript 尚不了解的同学可以参考 TypeScript CheatSheet。
组件基础
React 的 TypeScript 类型声明可以参考 types/react，antd 也是非常不错的使用 TypeScript 开发的大型 React 项目。
import * as React from "react";
import formatPrice from "../utils/formatPrice";
export interface IPriceProps {
num: number;
symbol: "$" | "€" | "£";
}
const Price: React.SFC<IPriceProps> = ({ num, symbol }: IPriceProps) => (
<div>
<h3>{formatPrice(num, symbol)}</h3>
</div>
);
export function positionStyle<T>(
Component: React.ComponentType
): React.StatelessComponent<T & { left: number; top: number }> {
return (props: any) => {
const { top, left, ...rest } = props;
return (
<div style={{ position: "absolute", top, left }}>
<Component {...rest} />
</div>
);
};
}
事件处理
设计模式
高阶组件
譬如在 types/react-redux 中，connect 函数的类型声明可以 interface 来声明多个重载：
export interface Connect {
...
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
...
}
export declare const connect: Connect;