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 学习的更多相关文章

  1. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  2. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  3. TypeScript学习文档-基础篇(完结)

    目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有 ...

  4. React + TypeScript + Taro前端开发小结

    前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...

  5. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  6. 【学】React的学习之旅1

    React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...

  7. React Ntive 学习手记

    React使今年来比较热门的前端库,之所以说是库呢,因为React.js是应用于MVC中的V层, 它并不是一个完整的MVC框架,所以,我也不知称之为框架了. 不过这并不影响React的火热. 混合应用 ...

  8. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  9. TypeScript学习指南--目录索引

    关于TypeScript: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeS ...

随机推荐

  1. windows虚拟机中DNS服务配置

    在linux虚拟机中进行DNS服务配置并进行正向解析反向解析我博客中已经写过,下面 我来介绍一下在windows虚拟机中DNS服务的配置使用. 1.打开一台windows虚拟机中服务器管理器——角色— ...

  2. 自定义cell的步骤

    ---恢复内容开始--- 自定义cell的步骤(每个cell的高度不一样,每个cell里面显示的内容也不一样) 1.新建一个继承自UITableViewCell的子类 2.在initWithStyle ...

  3. 这个立冬,我线下面基了一位TMD高级专家,太牛逼了!

    立冬刚过,迎面而来的是一股寒气.天气如此,市场亦是如此.昨天周五,和1个认识的技术专家老刘约饭,也算是线下面基,增进感情.每年我都要向比我高阶的朋友讨教.不由自主聊到了他的职场生涯.鱼哥一直以为自己命 ...

  4. mint UI MessageBox 使用

    一.全局注册 1.在main.js中引入 //引入 import { MessageBox } from 'mint-ui';   //全局使用,挂载到原型上 Vue.prototype.$messa ...

  5. 数据库Oracle函数之单行函数的介绍

    函数介绍: 函数:是数据库产品中提供的能够处理查询结果的方法. 函数能够用于下面的目的: • 执行数据计算 • 修改单个数据项 • 格式化显示的日期和数字 • 转换列数据类型 • 函数有输入参数,并且 ...

  6. nginx的一些知识(一)

    第8章 web网站的搭建 curl -Lv 网站地址:查看网站的请求信息和响应信息,并且会将结果输出出来 8.1 web网站的的传输原理过程 会进行DNS的解析 进行客户端和服务端进行三次握手协议 客 ...

  7. PyCharm设置Python版本,你肯定不知道!

      前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:智小星    PyCharm默认会使用虚拟的Python解释器,即使 ...

  8. CMFCPropertyGridCtrl的属性改变事件代码

    //用于区分Prop, 使用SetData, GetData方法 CMFCPropertyGridProperty* pProp1 = new CMFCPropertyGridProperty(str ...

  9. Hadoop HDFS 源码解析记录

    版权说明: 本文章版权归本人及博客园共同所有,转载请标明原文出处( https://www.cnblogs.com/mikevictor07/p/12047502.html ),以下内容为个人理解,仅 ...

  10. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...