react + typescript 学习

Posted 2022-01-13 ensnail

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 [email protected] --save

文章学习

看了很多文章，觉得不错的，记录一些，对整体掌握都很有帮助。

• 优雅的在 react 中使用 TypeScript
• 可能是你需要的react + typescript 50条规范和经验
• TypeScript 在 React 中使用总结
• TypeScript 2.8下的终极React组件模式
• Notes on TypeScript: React Hooks
  • 中文版

不论看多少文章，还是要真正理解了，多实践，方能真正掌握。