TypeScript

React & TypeScript

如果对 TypeScript 尚不了解的同学可以参考 TypeScript CheatSheet

组件基础

React 的 TypeScript 类型声明可以参考 types/reactantd 也是非常不错的使用 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;

状态管理

链接