利用prop-types第三方库对组件的props中的变量进行类型检测-创新互联

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的变量类型
  //...
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。