react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术。而 typescript 是 javascript 的超集,主要特点是对 类型 的检查。二者的结合必然是趋势,不,已经是趋势了。react 文档、typescript 文档都看过,例子也敲过了,对此也都有了一定的理解,但是把二者很好的结合在一起,还是遇到了一些问题。纯粹记录一些,当然也希望有优秀资源的,提供一下,分享一下。提前道谢了~
学习曲线
首先,想到的是到 官网,看相关文档,会系统些。
-
typescript 中文网 React & Webpack
看后,也实践了一遍,也算是入手练习了,但离实际应用还很远呢。
-
对应的英文原版是 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
不论看多少文章,还是要真正理解了,多实践,方能真正掌握。