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
  • 中文版

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