成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

TypeScript 3.0 + React + Redux 最佳實(shí)踐

CloudwiseAPM / 1906人閱讀

摘要：首先聲明這篇文章是想說明一下最新版本的的新特性帶來的極大的開發(fā)體驗(yàn)提升而不是如何利用開發(fā)應(yīng)用這個特性就是對的支持在的中有說明具體可以參考這里在版本之前我們在開發(fā)應(yīng)用尤其是在配合一類庫的時候經(jīng)常用到諸如之類的封裝而這些函數(shù)其實(shí)都可以用裝飾器的

首先聲明, 這篇文章是想說明一下最新版本的 TypeScript(3.0) 的新特性帶來的極大的 React 開發(fā)體驗(yàn)提升. 而不是如何利用 TypeScript 開發(fā) React 應(yīng)用.

這個特性就是對defaultProps的支持, 在 TypeScript 的 Wiki 中有說明, 具體可以參考這里: Support for defaultProps in JSX.

在3.0版本之前, 我們在開發(fā) React 應(yīng)用, 尤其是在配合 redux 一類 HOC 庫的時候, 經(jīng)常用到諸如 connect(TodoList), withRouter(TodoList) 之類的封裝. 而這些函數(shù)其實(shí)都可以用裝飾器的方式來調(diào)用, 比如:

export interface TodoListProps extends RouteComponentProps<{}> {
  todos: Todo[];
}

@withRouter
@connect(mapStateToProps)
export class TodoList extends PureComponent {
  render() {
    return null
  }
}

但是在結(jié)合 TypeScript 的時候, 這中間有個問題, 就是裝飾器會自動注入一些 props 給組件, 這一部分屬性不需要外部傳入, 因此是可選的, 在strictNullCheck屬性開啟的時候, 就會出現(xiàn)屬性沖突. 因?yàn)?TS 給不允許裝飾器修改被裝飾的對象的類型, 因此在 props 定義中為required屬性依然為required.

比如對于上面的例子, 在實(shí)例化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 對外部組件都是可選的. 這就意味著外部組件可以什么屬性都不用傳也不會有錯誤. 同時內(nèi)部而言所有的屬性都是NotNullable.

綜上, 通常情況下, 我們的一個組件會有一部分屬性由裝飾器注入, 而另一部分則需要外部實(shí)例化時傳入, 因此, 可以將一個組件的 props 接口聲明成兩層結(jié)構(gòu), 第一層為由裝飾器注入的部分, 第二層則為完整的屬性接口, 然后將defaultProps設(shè)置成為第一層接口即可. 比如:

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 等函數(shù)在 @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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108302.html

相關(guān)文章

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動配置了一個項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    wangbinke 評論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    摘要：使用官方的的另外一種版本和一起使用自動配置了一個項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

    codeKK 評論0 收藏0

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

    摘要：多端統(tǒng)一開發(fā)框架優(yōu)秀學(xué)習(xí)資源匯總官方資源項(xiàng)目倉庫官方文檔項(xiàng)目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學(xué)從到構(gòu)建適配不同端微信小程序等的應(yīng)用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學(xué)習(xí)資源匯總 showImg(https://segmentfault.com/img/r...

    toddmark 評論0 收藏0

  • 平時積累的前端資源，持續(xù)更新中。。。

    本文收集學(xué)習(xí)過程中使用到的資源。 持續(xù)更新中…… 項(xiàng)目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端 微信公眾號 小程序 webpack GraphQL 性能與監(jiān)控 高質(zhì)文章 趨勢 動效 數(shù)據(jù)結(jié)構(gòu)與算法 js core 代碼規(guī)范...

    acrazing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<