react + typescript 學習

react，前端三大框架之一，也是很是受開發者追捧的一門技術。而 typescript 是 javascript 的超集，主要特色是對 類型 的檢查。兩者的結合必然是趨勢，不，已是趨勢了。react 文檔、typescript 文檔都看過，例子也敲過了，對此也都有了必定的理解，可是把兩者很好的結合在一塊兒，仍是遇到了一些問題。純粹記錄一些，固然也但願有優秀資源的，提供一下，分享一下。提早道謝了~

學習曲線

首先，想到的是到 官網，看相關文檔，會系統些。

• typescript 中文網 jsx

• typescript 中文網 React & Webpack

  看後，也實踐了一遍，也算是入手練習了，但離實際應用還很遠呢。

• create-react-app + typescript

  對應的英文原版是 microsoft/TypeScript-React-Starter。

  中文版有點落後，英文版的比較新。

  最重要的一點是：不少根據中文網搭建練習時踩坑點的解決方案都是在其 issure 中找到的。

  tslint相關

  在 tslint.json 中加入

  • interface name must start with a capitalized I

  接口名稱必須以大寫的I開頭

  microsoft/TypeScript-React-Starter

  "rules": {
    "interface-name": [true, "never-prefix"]
  }

  • Import sources within a group must be alphabetized.

  組內的導入源必須按字母順序排列。

  "rules": {
    "ordered-imports": false
  }

  • The key 'onDecrement' is not sorted alphabetically

  鍵沒有按字母順序排序

  "rules": {
    "object-literal-sort-keys": false
  }

  其餘

  • import { connect, Dispatch } from 'react-redux'; 產生錯誤

  has no exported member 'Dispatch'.

  import { connect } from 'react-redux';
  import { Dispatch } from 'redux';

  • Redux createStore 產生錯誤：預期有4個類型參數，但獲得1

  Expected 4 type arguments, but got 1.

  使用redux 4.0.1時使用了redux 3.7.2

  npm install redux@3.7.2 --save

文章學習

看了不少文章，以爲不錯的，記錄一些，對總體掌握都頗有幫助。

• 優雅的在 react 中使用 TypeScript
• 多是你須要的react + typescript 50條規範和經驗
• TypeScript 在 React 中使用總結
• TypeScript 2.8下的終極React組件模式
• Notes on TypeScript: React Hooks
  • 中文版

不論看多少文章，仍是要真正理解了，多實踐，方能真正掌握。