首先声明, 这篇文章是想说明一下最新版本的 TypeScript(3.0) 的新特性带来的极大的 React 开发体验提升. 而不是如何利用 TypeScript 开发 React 应用.
这个特性就是对defaultProps
的支持, 在 TypeScript 的 Wiki 中有说明, 具体可以参考这里: Support for defaultProps
in JSX.
在3.0版本之前, 我们在开发 React 应用, 尤其是在配合 redux 一类 HOC 库的时候, 经常用到诸如 connect(TodoList)
, withRouter(TodoList)
之类的封装. 而这些函数其实都可以用装饰器
的方式来调用, 比如:
export interface TodoListProps extends RouteComponentProps<{}> {
todos: Todo[];
}
@withRouter
@connect(mapStateToProps)
export class TodoList extends PureComponent<TodoListProps, {}> {
render() {
return null
}
}
但是在结合 TypeScript 的时候, 这中间有个问题, 就是装饰器会自动注入一些 props 给组件, 这一部分属性不需要外部传入, 因此是可选的, 在strictNullCheck
属性开启的时候, 就会出现属性冲突. 因为 TS 给不允许装饰器修改被装饰的对象的类型, 因此在 props 定义中为required
属性依然为required
.
比如对于上面的例子, 在实例化TodoList
这个组件的时候, 必需要传入所有的TodoListProps
所定义的属性, 否则会有TS2322
错误.
而在 TS 3.0 中, 可以声明defaultProps
属性来表明某些属性对外部组件而言是可选的. 比如:
@withRouter
@connect((state) => ({ todos: state.todos })
export class TodoList extends PureComponent<TodoListProps, {}> {
static defaultProps: TodoListProps
render() {
return null
}
}
这里的static defaultProps: TodoListProps
表明, 所有的TodoList
的 props TodoListProps
对外部组件都是可选的. 这就意味着外部组件可以什么属性都不用传也不会有错误. 同时内部而言所有的属性都是NotNullable
.
综上, 通常情况下, 我们的一个组件会有一部分属性由装饰器注入, 而另一部分则需要外部实例化时传入, 因此, 可以将一个组件的 props 接口声明成两层结构, 第一层为由装饰器注入的部分, 第二层则为完整的属性接口, 然后将defaultProps
设置成为第一层接口即可. 比如:
export interface TodoListInnerProps extends RouteComponentProps<{}> {
todos: Todo[];
}
export interface TodoListProps extends TodoListInnerProps {
className?: string;
onLoad?(): void;
}
@withRouter
@connect((state) => ({ todos: state.todos })
export class TodoList extends PureComponent<TodoListProps, {}> {
static defaultProps: TodoListInnerProps
render() {
return null
}
}
需要注意的是:
- TypeScript 要
3.0.1
以上 -
@types/react
要最新版 -
withRouter
,connect
等函数在@types
中, 签名有问题, 需要手动修改一下:import { ComponentClass } from 'react' import { connect as nativeConnect, MapDispatchToPropsParam, MapStateToPropsParam } from 'react-redux' import { withRouter as nativeWithRouter } from 'react-router' export type ComponentDecorator<P = any> = <T extends ComponentClass<P>>(WrappedComponent: T) => T export const connect: <P, S = Todo>( mapState: MapStateToPropsParam<Partial<P>, P, S>, mapDispatch?: MapDispatchToPropsParam<Partial<P>, P> ) => ComponentDecorator = nativeConnect as any export const withRouter: ComponentDecorator = nativeWithRouter as any
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。