TypeScript, Angular 和移动端的跨平台开发

摘要

Google技术经理陈亮将为你们介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。

内容来源：2017年7月15日，Google Engineering Manager陈亮在“2017 JavaScript中国开发者大会”进行《TypeScript, Angular, 和移动端的跨平台开发》演讲分享。IT 大咖说做为独家视频合做方，经主办方和讲者审阅受权发布。

阅读字数：2027 | 3分钟阅读

嘉宾演讲视频及PPT： t.cn/RTRvFIc

What’s TypeScript？

TypeScript是凌驾于ES五、ES6，具有静态类型的JavaScript的超集。它为咱们带来的优点包括将来JavaScript的一些特征在TypeScript里都有。而且它有一个很是强大的类型系统，经过这个强大的类型系统，可以和IDE进行很好的整合。

TypeScript在2012年的时候作了发布，当时的创始人Anders HejIsberg是微软的一个架构师，用他的话来讲，TypeScript makes JavaScript scale.当咱们用TypeScript来写程序的时候，咱们作更多的模版扩展，扩展software，可以有更强的可读性。同时咱们看到的一些接口也会更加明了，对于咱们的开发有很大帮助。当咱们用TypeScript来写程序的时候，可读性获得了大量的提升，全部的API接口更清晰明了，以帮助咱们更好的扩展庞大应用的开发。TypeScript的研发理念也但愿咱们不管在什么浏览器、什么工做系统上都能运行一个稳定可延性强的语言。

TypeScript Type System

TypeScript自带了一个编译器，经过一些简单的配置tsconfig.json就能够把TypeScript转换成ES5或ES6。它除了进行基本类型的检测以外，还能帮咱们作一些重构。

当一个变量的类型改变了以后，颇有可能在项目里其它地方也须要改动。它的tsc的compiler能够帮助咱们修改，不用手动去改每一个地方。

虽然TypeScript但愿你们尽可能在每一个地方都能标注它的类型，但其实这个类型是可选的。缘由有两个，其中一个缘由就是当咱们须要和不少其它第三方程序库进行整合的时候，咱们并不能保证它有这个型别的定义。另外一个缘由就是TypeScript对于不少开发团队来讲仍是比较新的，不少时候须要逐步地更改project来和TypeScript进行整合，因此它在设计的时候就已经把这个考虑进去了。

如今很火的三个框架都和TypeScript进行了整合，它们的类型定义在网上均可如下载。

TypeScript Typing

TypeScript自己其实有一些很是细微但颇有用的机制，这些机制能够帮助咱们在写前端代码的时候更加有效。

StrictNullCheck能够防止在整个流程中出现常见错误。

对于开发者来讲咱们不少时候须要必定的控制，TypeScript提供了类型的转换和类型的断言。

在TypeScript里有一个很是特别的类型叫any，用于描述咱们在编译时的未知类型Type。

TypeScript Type Definition

真正使TypeScript强大的仍是要归根于类型定义文件。类型定义文件里有接口、函数定义等等。在通常的前端构造里，浏览器和DOM有很是多的类型。

当你在用npm去安装这些模块的时候，假如它已经具有了这些类型的定义，那么编辑的环境就能够立刻意识到，帮助你在编程过程当中作到自动完成的功能，有效的提升了开发者的效率。

Why Angular?

速度和性能是选择Angular的重要缘由之一。

Angular很强大的一点在于他的模板编译是跨平台的，和传统的DOM作了一个脱钩的理念，让用户界面能更好的的呈如今用户面前。另外Angular 的强大选染引擎也在应用最终发布的时候能把APP压缩到是原来的60%左右。

Angular从一开始构建的时候就很是注重Scalability。在Google内部，当一个工程师改了一行Angular代码的时候有成千上万的单元测试都会被运行。咱们但愿平台是一个稳定的平台，新出的版本不会破坏之前现有产品的开发。

Angular还有三个支柱，一个是核心，一个是围绕核心衍生出的程序库，还有一个是工具。

Angular Core

鉴于咱们如今的渲染器彻底脱离了DOM，这样的渲染让咱们的表达很是expressive。不论是组件、指令、内容投放仍是“管道”都能让咱们的开发者更方便地去描述想要作的事情。

还有就是依赖注入，这个对于写过不少单元测试的朋友应该不陌生。它能帮助咱们在Angular组件里去更好地和服务以及内部一些API进行链接，咱们做为开发者就不用太过担忧怎样管理这样的一些关系。

Zones是非同步处理的执行环境。咱们的程序里有不少非同步的一些事件或函数，Zones会直接把它进行复写，复写以后经过对事件和函数的监测，能更有效的提升模板局部更新的速度。

Angular的变化检测跟不少前端框架同样，有一个模版须要被渲染，渲染的时候内部组件有一个物件的改变，就须要进行检测。

在Angular里面有一个非同步执行的context，它复写了全部非同步的函数和事件，当每次结束的时候都须要在每一个组件里作一个变化的检测。

Angular Animation

Angular的动画是基于standard Web Animation的API，因此它能够利用到不少浏览器自带的硬件加速对它进行支持，让它跑得更快。

Angular Tooling

Angular的工具也很强大，有AOT、Angular Universal和Angular CLI帮助你们去快速开发项目。

Future:Smaller,Faster,Easier to Use

Angular的下一代是Angular5，在今年稍晚就会推出。它的理念是让整个框架容量更小，在各个平台上跑得更快，各租件和API更通俗明了，容易上手。

Native Script

NativeScript是一个提供runtime编译转码的运行层框架，可让你的JavaScript和Angular模板直接转化成相对应的原生函数和租件。每个元素都会最终成为一个原生的元素，而由于它用的是Angular的语法，广大的前端开发同窗们能够很熟悉的上手，一目了然。NativeScript在运行过程时，用Angular的渲染器去编译模板，parse把它转换成protoview，protoview再通过Native Script run-time把它转换成原生的控件。

每个元素都会最终成为一个原生的元素。要注意的是，它全部的语法和Angular是同样的，因此在渲染的过程当中不会有任何问题。

Native Script渲染

用Angular的渲染器去编译XML，prase完成后，编译器会把它转换成protoview，protoview再通过Native Script run-time把它转换成原生的控件。

我以为今天给你们展现的还只是一些毛皮，我建议你们必定要看看TypeScript，由于它能帮助你们写出更好的程序。今天很高兴能和你们分享Google的一些技术，也但愿你们能多多思考一下前端将来的发展，谢谢你们！