TypeScript 3.0 + React + Redux 最佳实践

CloudwiseAPM 发布于2019-08-26 12:14 / 1898人阅读

摘要：首先声明这篇文章是想说明一下最新版本的的新特性带来的极大的开发体验提升而不是如何利用开发应用这个特性就是对的支持在的中有说明具体可以参考这里在版本之前我们在开发应用尤其是在配合一类库的时候经常用到诸如之类的封装而这些函数其实都可以用装饰器的

首先声明, 这篇文章是想说明一下最新版本的 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 {
  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 {
  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 {
  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 = >(WrappedComponent: T) => T

export const connect: (
  mapState: MapStateToPropsParam, P, S>,
  mapDispatch?: MapDispatchToPropsParam, P>
) => ComponentDecorator = nativeConnect as any

export const withRouter: ComponentDecorator = nativeWithRouter as any

云服务器 GPU云服务器 react-redux React_Redux_Appointm react-router-redux 最佳实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108302.html

TypeScript 、React、 Redux和Ant-Design的最佳实践

摘要：使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验，现在的第三方包基本上源码都是，方便查看调试。大型项目首选和结合，代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

wangbinke 2019-08-23 17:10 评论0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳实践

摘要：使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验，现在的第三方包基本上源码都是，方便查看调试。大型项目首选和结合，代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

codeKK 2019-08-29 18:42 评论0 收藏0
Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
平时积累的前端资源，持续更新中。。。

本文收集学习过程中使用到的资源。持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端微信公众号小程序 webpack GraphQL 性能与监控高质文章趋势动效数据结构与算法 js core 代码规范...

acrazing 2019-08-26 10:40 评论0 收藏0