TypeScript + React环境构建和demo

下面的示例项目可以从我的github上获取

为什么用TypeScript

TypeScript为JavaScript这个弱类型语言添加了基本的类型检测以及对于ES6甚至ES7的一些高级语法的转移，在一定程度上相当于增强功能版的babel，现在的很多开源项目为了得到更好的项目管理和维护性能，使用了TypeScript或者Flow来为JavaScript添加强类型。
TypeScript添加了很多强类型语言的功能，比如interface，class(ES6已有，功能增强)，类型检测，泛型等。
TypeScript的入门可以看一个TypeScript入门的网站或者TypeScript中文官方文档。

项目环境构建

这里默认大家的nodeJS基础。

这里项目环境的构建使用官方提供的create-react-app脚手架工具和微软提供的TypeScript支持TypeScript-react-starter，这两个项目都可以在github上面找到。

构建基本环境

cnpm install -g create-react-appcreate-react-app my-app --scripts-version=react-scripts-ts# 如果感觉下载速度比较慢的话，请切换npm的镜像源到淘宝的镜像源npm config set registry https://registry.npm.taobao.org# 可以检查一下镜像源是否切换成功npm config get registry

基本上已经获得了一个完整的React项目，这里的webpack以及各种配置默认是不能够修改的，如果希望修改的话需要将配置文件弹出。

# yarnyarn ejectyarn start# npmnpm run ejectnpm start

这里用yarn或者是npm都可以，目前感觉使用yarn会方便一些。

增加额外的配置

这样搭建的环境中仅有React和ReactDOM两个模块，这样在正式开发的时候仍然还是不够使用的。全家桶里面还缺少很多东西。

yarn add react-router redux react-redux react-bootstrap bootstrap@3yarn add @types/react-router @types/redux @types/react-redux @types/react-boostrap

这里要注意，一定要安装所有外部依赖模块的类型定义，否则模块在使用的时候会因为没有TypeScript的类型定义而报错。

使用typescript开发react，对于所有需要的外部模块，都需要有.d.ts的类型定义文件，一般比较常用的模块在npm上面都是有已经写好的类型定义文件了。但是一些比较小的外部依赖还是需要自己去写。

类型定义文件一般放在/node_modules/@types/*目录下面，类型名为.d.ts，关于类型定义文件具体可以看TypeScript的模块部分相关文档。

react-bootstrap是React官方提供的React和Boostrap结合一个组件样式库，使用起来也很简单。

注意

在使用TypeScript开发React的时候，需要注意资源的引入，因为在很多时候，资源由于导出方式和模块的不同，引入的方式也会不同。

静态资源的引入方法，对于css类型的资源，使用：import './style.css';，这样用是因为css模块需要作为其引用模块的全局方式引入，并且css模块并没有导出的代码，所以只能够使用这种方式导入。

对于图片这种静态资源，仍然是没有导出的，在demo里面是使用const svg = require('./logo.svg')引入的。

由于CommonJS和RequireJS的模块导出和导入方法是不一致的，TypeScript提供了一种方法来兼容这两种模块加载方式，所以很多的外部模块定义文件都会采用export =这种方式进行模块的导出，比如React.d.ts就使用的是export = React这种方式进行导出，所以在导入的时候就需要匹配导出方式，导入的时候需要使用TypeScript提供的import React = require('react')来进行引入。