1.引言——JavaScript就是一个熊孩子
1.1对于JSer们来说，js是自由的，但同时又有许多让人烦恼的地方。javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java这些“好孩子”那样循规蹈矩。因此给我们带来许多烦恼
<1>运行时候控制台报错：uncaught error，这尤其令人恼火的是系统告诉我们有错误但是又不告诉我们错误发生在哪里。试想一下，你到一个地方旅游迷了路，一个当地的熊孩子一直笑嘻嘻地跟在你后头告诉你：“你走错啦！”。但是不告诉你应该怎么走，你会不会很想揍他一顿？（╬￣皿￣）
<2>运行时报了确定的错误，然而我们发现这TM完全是一条驴唇不对马嘴的错误报告。甚至于去stackoverflow上寻找答案，却发现提问的错误场景跟自己的根本是两码事。让我们回到1中场景，假如这个熊孩子很好心地告诉了你路线，结果你走到天黑发现被熊孩子狠狠得耍了，导致你不得不在大晚上露宿街头，你会不会比1中场景更想揍他一顿？（╬￣皿￣）
<3>你主观地写错了了一个变量的类型，比如把字符串1写成数字1，但是系统“很好心”地不报错误提示。（我们都不需要特别的进行类型声明当然不会报告错误提示啦）而这却可能就是你接下来bug的源头。让我们回到1，2中场景，假如这个熊孩子知道你这个外地人绝逼是走错路了，但当你问路：“我走对路了吗？”时候，他笑靥如花满面春风得点点头，让你充满信心充满希望得一条路走到黑。我想你此时的心情不会比1和2中的要好（╬￣皿￣）
<2>中情况有时候比较难以避免
<1>中情况我们可以通过熟悉主要的6种uncaught error的情形加以判断。(在下一篇文章里我会讨论这个问题)
<3>中的情况呢，完全可以用类型检测的方式加以避免，这也就是我这篇文章所讲到的内容
本节主要讨论的是与react配套的类型检测库——prop-types的运用
今天我在这篇文章里面介绍的内容，就是通过react的propTypes进行类型检测，。顾名思义prop-types就是对react组件中props对象中的变量进行类型检测的，因为props是react数据流的管道，我们通过prop-types就可以轻松监控react里大多数据的变量类型先介绍下propTypes的基本用法。
2.prop-types基础入门
2.1首先你需要通过在终端npm install prop-types安装一个叫prop-types的第三方包
2.2然后通过下面的写法对你的某一个组件的props中的变量进行类型检测：
yourComponent.propTypes = {
属性1：属性1的变量类型，
属性2：属性2的变量类型
//...
}
</div>
3.propTypes的使用全解
3.1利用propTypes检测全部数据类型的变量
import React from 'react'
class Son extends React.Component{
render(){
return (<div style ={{padding:30}}>
{this.props.number}
<br/>
{this.props.array}
<br/>
{this.props.boolean.toString()}
</div>)
}
}
class Father extends React.Component{
render(){
return (<Son
number = {'1'}
array = {'[1,2,3]'}
boolean = {'true'}
/>)
}
}
</div>
比如这个例子，我们通过props从父组件向子组件传递属性，你原本试图通过number，array和boolean这三个属性分别向Son中传递一个数字，数组和一个布尔型数值，但由于你过度疲惫，把它们都写成了字符串，虽然渲染是正常的，但这可能会导致你接下来调用一些方法的时候发生错误，而系统并不提供任何提示。
让我们给它加上propTypes的类型检测：
import React from 'react'
import PropTypes from 'prop-types';
class Son extends React.Component{
render(){
return (<div style ={{padding:30}}>
{this.props.number}
<br/>
{this.props.array}
<br/>
{this.props.boolean.toString()}
</div>)
}
}
Son.propTypes = {
number:PropTypes.number,
array:PropTypes.array,
boolean:PropTypes.bool
}
class Father extends React.Component{
render(){
return (<Son
number = {'1'}
array = {'[1,2,3]'}
boolean = {'true'}
/>)
}
}
</div>
然后我们就能看到报的错误了，而且这个时候，报的错误包括错误的props属性名称，错误的变量类型，属性所在的组件名称，预期的正确的变量类型，错误代码的位置以及其他更详细的信息。
这种“人为控制”的报错比一般的系统报错看起来应该要亲切自然得多吧...你大可以说：这个error是我“私人定制”的呦 （//▽//）
propTypes 能用来检测全部数据类型的变量，包括基本类型的的string，boolean,number,以及引用类型的object,array,function,甚至还有ES6新增的symbol类型
Son.propTypes = {
optionalArray: PropTypes.array,//检测数组类型
optionalBool: PropTypes.bool,//检测布尔类型
optionalFunc: PropTypes.func,//检测函数（Function类型）
optionalNumber: PropTypes.number,//检测数字
optionalObject: PropTypes.object,//检测对象
optionalString: PropTypes.string,//检测字符串
optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}
</div>
【注意】下面这些是从官方英文文档里引用过来的，你大概能够注意到，五种基本类型中的undefined和null并不在此列，propTypes类型检测的缺憾之一是，对于undefined和null的值，它无法捕捉错误
让我们把上述实例中的Father组件传递给Son组件修改一下,改成：
class Father extends React.Component{
render(){
return (<Son
number = {null}
array = {null}
boolean = {null}
/>)
}
}
</div>
结果是输出台不报任何错误，（当然你改成undefined也是同样效果）。
3.2 通过oneOfType实现多选择检测——可规定多个检测通过的数据类型
上个例子中类型检测的要求是一个变量对应一个数据类型，也就是规定的变量类型只有一个。那么怎样能让它变得灵活一些，比如规定多个可选的数据类型都为检测通过呢？PropTypes里的oneOfType方法可以做到这一点，oneOfType方法接收参数的是一个数组，数组元素是你希望检测通过的数据类型。
import React from 'react'
import PropTypes from 'prop-types';
class Son extends React.Component{
render(){
return (<div style ={{padding:30}}>
{this.props.number}
</div>)
}
}
Son.propTypes = {
number:PropTypes.oneOfType(
[PropTypes.string,PropTypes.number]
)
}
class Father extends React.Component{
render(){
//分别渲染数字的11和字符串的11
return (<div>
<Son number = {'字符串11'}/>
<Son number = {11}/>
</div>)
}
}
</div>
这时候，因为在类型检测中，number属性的规定类型包括字符串和数字两种，所以此时控制台无报错
当然，如果你改为number = {数组或其他类型的变量}，那么这时就会报错了
3.3 通过oneOf实现多选择检测——可规定多个检测通过的变量的值
3.2是规定了多个可检测通过的数据类型，那么同样的道理，我们也可以规定多个可检测通过的变量的值，这就要用到PropTypes里的oneOf方法，和PropTypes方法一样oneOf方法接收参数的是一个数组，数组元素是你希望检测通过的变