前端干货React Native 与 TypeScript
Posted 极客学院
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端干货React Native 与 TypeScript相关的知识，希望对你有一定的参考价值。
2017年，React Native 和 TypeScript 是各大前端新闻频繁刷屏的网红。
但其实很少有同学会想到，它们也可以直接搭配使用，而且效果意外的好。
但在介绍它们之前，还是得先给不熟悉前端的同学介绍下，什么是 React，只有这样，大家才能领略到 React Native 设计得精妙之处。
React 为程序猿们提供了一种子组件不能直接影响外层组件，俗称 Data Flows Down 的组件模型。
（配图是 Facebook 经典的 Data Flow 模型）
换句人话来讲，如果我们将每一个组件视作一个函数，参数是输入，状态表现是输出，那么 React 提供了非常一致性的解决方案。它的语义一致，资源建模，组件模型可组合，这也是软件行为的最小化的模型。 不只是应用于前端 Web，即便是更广阔的场景也同样是适用的。
也正由于它是基于虚拟 DOM 的实现，所以它不只可以对应 Web 进行开发，也能将虚拟 DOM 映射到 ios、android 等的 Native View 上去。
在这样思维的指导下，Facebook 就制造了 React Native。
React 的心，Native 是壳。
但不局限于 Native，在社区的帮助下，它输出到了 VR，也输出到了 Sketch，还到了 Windows，以及 macOS。
「Learn Once， Write Anywhere. 」的思想变现的淋漓尽致。
在 React Native 的早期，它的目的很简单，就是扩大 React 的适用场景，但出人意料的是，这个简单目的一脚踹开了大前端时代的大门。
同一种架构，同一种语言。让多端开发不再有语言和架构的隔阂，这是大前端时代大前端筑造巴别塔的又一次尝试。
为什么说又呢，因为在这之前是有无数次实践的，比如 ionic，PhoneGap。但它们的性能和拓展性相较于 React Native 而言，实在是不够看。
所以从工程实践来看，这次的巴别塔是十分成功的，成功到京东，QQ，Instagram 都愿意直接使用它。
非常幸运的是，React 生态的全家桶在整个 React Native 中也是完全通用的。
React 前端开发者直接切换到 React Native 开发是没有任何障碍的，这也是为什么大厂们很快转向了 React Native，确实让人力变得富裕了。
纯 Web 的前端开发者和 iOS、Android 等 Native 端的开发者确实很有必要去了解下大前端时代为我们带来的变革。
毕竟有人说过，一个人的命运啊，当然要靠自我奋斗，但是也要考虑到历史的行程。更加全面多样化的前端开发者更能适应大前端时代的浪潮。
TypeScript 是 javascript 的超集，也就是增加了类型的版本，在编译后会去掉类型，生成纯粹的 JavaScript 代码。
下面是一段 TypeScript 的代码
编译 成 ES5 后则是这样的
TypeScript 是 JavaScript 的超集，这意味着它支持所有的 ES5、ES6 语法，并有自己的特殊语法，比如类型和 enum 等。这会极大的提升代码的阅读性，也可以使 TypeScript 执行静态类型检查。
换句人话来讲就是，
1.静态类型检查
2.IDE 智能提示
3.代码重构
4.可读性
但 JavaScript 本身是没有类型，总有 TypeScript 无法表达类型的情况，不要急，虽然是强类型语言，但是如果对象被声明为了 any 类型，就会忽略它相应的类型检查。
依靠这样的操作，TypeScript 保持了灵活性。
最后我们再来看一下 TypeScript 在 Google Trends 上的排名。
与 React 这样的大热门而言，是完全不能相比的，但压制竞争对手 Flow，是完全可以的。
基于以上优点，希望带领大家进入 TypeScript 的世界一探究竟。
那为啥我们要将两者结合呢 ？
其实写过 iOS 或者 Android 原生代码的同学可能深有感触。在没有严格的类型检查的情况下，写出的 RN 的代码，是非常容易出问题的。
尤其是才从功能齐全的 XCode 和 Android Studio 转过来的同学，发现 JS 的 RN 在后期维护，重构方面非常的困难，IDE 也没有提示，整个人想死的心情都有了。
TypeScript 很好的弥补了这样的短板，为原生开发且想尝试 RN 的同学提供了一条较为平缓的道路，而对前端的东西来说，有 TS 的辅助也不是坏事。
常言有道，
“两件快乐的事情重合在一起，而这两份快乐，又给我带来更多的快乐，但是，为什么，会变成这样呢？”
需要准备的东西多了，环境搭建就会变得麻烦了，但不用担心，我们刚好有准备一个课程来帮你完成这两份的快乐，并给你带来更多的快乐。
此课程内容主要是基于 Demo 的 React Native 在 TypeScript 环境下的入门教学视频，同时也包括TDD 的内容。
没错，不止两份快乐，我们还会给你更多的快乐。
课程入门门槛中等偏低，强调工具的使用和理论的教学。
TDD 作为一门开发编程实践，在前端开发中，往往处于提的多，做的少的尴尬状态，也希望同学们能通过本视频教学，正式了解如何在生产环境中实践TDD，为自己的工作学习带来良好的习惯。这是非常有益的。
最后同学们可以点击“阅读全文”打开课程，好好研究下这更多的快乐：）
以上是关于前端干货React Native 与 TypeScript的主要内容，如果未能解决你的问题，请参考以下文章
前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）