typescript -系统入门到项目实战 百度网盘_「React TS3 专题」手把手教你创建一个 React TypeScript3项目...

关于React、TypeScript的介绍和其在前端的重要地位，想必大家都很清楚吧，在这里我就不过多的介绍。你也许会问为什么要基于 TypeScript3 构建 React ？不同的人也许有不同的答案，由于 TypeScript3 和 React 分别来自微软和Facebook，其江湖地位的显赫不言而喻，React的强大灵活些再结合TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性,让我们能以类似Java这样工程化的思维构建我们的项目，让我们的代码更易阅读和易于维护。

本系列文章，基于笔者对这本书《React with TypeScript 3》的读书笔记，不是翻译此书，笔者也是初学者，在这里与大家一起分享共同学习，本书的例子笔者都会亲自实践，替大家提前采坑，由于笔者英语水平有限，理解难免有偏差，如你发现问题欢迎大家留言指正，咱们一起共同进步。

为了表示对作者劳动的尊重，我就不在这里分享电子书了，感兴趣的可以可以到packtpub官网购买(packtpub.com)。

关于作者：Carl Rippon

在学习之前，我们先了解下本书的作者：Carl Rippon。Carl Rippon从事软件行业已超过20年，在各个领域开发了一系列复杂的业务应用程序。过去八年来，他一直使用各种JavaScript技术构建单页应用程序，包括Angular，ReactJS和TypeScript。 Carl撰写了100多篇关于各种技术的博客文章。

本系列专题目录结构

由于本书在一开始花了不少的篇幅介绍 TypeScript ，为了让大家快速接触基于 TypeScript3 的 React 项目笔者就不在这系列里进行介绍了，如果你认为有必要介绍，欢迎大家在留言区留言，如果留言人数多的话，我会专门开设个 TypeScript 3 专题进行专门介绍。

本系列目录结构暂定如下，在笔者读的过程中，为了让大家更全面的理解本系列专题，可能会进行补充和调整，并不是完全基于书的结构。

• 入门基础知识(创建、组件、生命周期等基础知识)
• React路由
• 高级类型
• 组件设计模式专题
• 如何使用表单
• Redux专题
• hook专题
• 数据请求专题
• 使用GraphQL
• 用Jest进行单元测试

技术与系统环境要求

为了有更好的阅读体验，你至少具备基础的JS、CSS基础知识，掌握了一些 ES6+语法和 TypeScript 的基础知识。

运行本系列示例你至少安装了node环境，npm版本至少为 5.2，有一款你熟悉的编辑器，推荐你使用 Visual Studio。( 需要TSLint扩展和Prettier扩展。)

本系列笔者运行环境： npm 6.9.0 node v10.16.3

开始创建我们的第一个基于 TypeScript3 的 React 项目

笔者将介绍两种方式进行构建 React TS3( TypeScript3 简称，后面的内容都会以简称出现)，分别为使用 create-react-app 进行快速构建 和 手工方式构建。

一、使用 create-react-app 构建

1、全局安装 create-react-app 和 typescript

使用以下命令进行全局安装：

npm install -g create-react-appnpm install -g typescript

2、运行项目创建命令

npx create-react-app my-react-ts-app --typescript

注：请查看根目录下的的 package.json 文件确保React版本不低于16.7.0-alpha.0，笔者的react版本为16.9.0，如果低于16.7.0-alpha.0，你可以使用以下命令进行安装

npm install react@16.7.0-alpha.0npm install react-dom@16.7.0-alpha.0

3、添加 tslint.json 文件

3.1 为了让我们的代码更符合规范，我们安装tslint及相关依赖检查约束我们的代码规范：

cd my-react-ts-appnpm install tslint tslint-react tslint-config-prettier --save-dev

3.2 为了方便开发，我们在Visual Studio Code 编辑器里安装扩展( Ctrl + Shift + X )，在左上角的搜索框中输入tslint

3.3 在根目录创建 tslint.json 文件

touch tslint.json

3.4 打开 tslint.json 文件，添加相关规则

{ "extends": [ "tslint:recommended