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
不论看多少文章，还是要真正理解了，多实践，方能真正掌握。
来源：https://www.cnblogs.com/EnSnail/p/11000004.html |
發表於 2019-6-15 20:00:00
