用Typescript编写AngularJS应用是怎样一种感受.pdf

《用Typescript编写AngularJS应用是怎样一种感受.pdf》由会员分享，可在线阅读，更多相关《用Typescript编写AngularJS应用是怎样一种感受.pdf（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Typescript是一门拥有可选静态类型系统、基于类的编译型语言。这话如果你觉着怪，那尝试这么理解一下，她 是JavaScript的超集，也就是说，理论上她支持JavaScript的所有特性，然后又提供了额外的优势。举几个小栗子说明其优势:范型支持var lis t:Array=;list.push(,hello|,);A rgument of type string，is not assignable to parameter of Type错误提示var name=hello,;2 console.log(namj;Q Cannot find name nam.这类快速提示，在原生的Ja

2、vaScript中几乎是无法想象的，如果你的眼力不够好，那问题只能等到运行时再发现了，浪费时间、浪费精力。那既然Typescript这么屈，而 且 angular2就推荐使用Typescript编写应用,那AngularJS能不能也用叫Rescript编写应用？编写的过程又是怎样一种感受！？答案是肯定的，否则我我在这干什么。但使用起来是怎样的感受，请允许我先上一张动图表达我的心情：utils:Internalservice)this._init_();this._destroy_();_init_()this.$scope.todolist=this.todolist;I1this.$scop

3、e.$watch(todolist,this.onTodosChanged.bind(1onTodosChanged()this.remainingCount=this.todolist.filter(todo)=!toe处处有提示，纠错不是梦！有没有很风骚？但在一切开始之前，先让我强烈建议各位安装由Github主持开发的超强编辑器atom,再配合她的atom-typescript插件，绝对亮瞎曾经身为JSer的你！0 K,和之前用ES6编 写AngularJS程序是怎样一种体验一样，我们也代码未动，工具先行，谁让我们前端界又被称为“带薪搭环境界，环境，现在成了每一个入行前端朋友的梦魇！那么一

4、个快速、简洁的、跟得上时代的脚手架就显得尤为重要，于是我要介绍的是generator-ts-angularo安装9。（如果你还没安过的话）呼出 install-g yo请注意前缀sud。，如果你使用的是 八ix lik e操作系统的话安装 generator-ts-angularnpm install-g geMrator-ts-angular请注意前缀suWo,如果你使用的是unix lik e操作系统的话使用ge八0匕 七0/七-八9 彷 丫 创 建 项 目先找个你喜欢的目录，然后运行下面的命令，因为一会新项目会直接创建在该目录下。yo t$-aigular上面命令回车后，生成器会问你如下

5、问题，老实作答即可（注意：对单页应用没经验的孩纸，在Use Mtm/S xodel这个问题上，请选择No；当问你Which registry wouldyou 时，国内用户选择第一个淘宝镜像安装速度会快很多）w/cuaus/giinuD“snj.worK/movoxong(zsnjhowardzuo:/codes/github yo|I当命令执行完毕后，你就能在当前目录下看到刚才创建的项目了，本例中我使用的 project 八是 lagTypeo开启调试之旅#进入刚创建的项目目录cd ngTgpe#启动调试服务npm start然后你就可以在http:/localhost:8080下，看到刚创

6、建的项目的运行效果了:之 What needs to be done?J LcQFn AngulorJSJ Loam RpcScript7)Loam gulpJ Loam wcbpack0 item left All Active CompletedClear completed项目简介骨架结构ngTgpe|css|etcI ，3gI I|-features|I|-common|)|-directive 1-listeMr|j-todos|-controllerI I|-Model|I|-partialsI 1 1-service|-fwI I I-config|ext|-initI I I

7、他I I 1-serviceI II 1 typingsi|-atagularjsI|-e56-collection|-es&-promiseI 1I|-i id ex.ht FW|-package.jsoi|-七 qu/e.d.ts|-tsco 八 fig.jso 八|-tsd.jso 八|-webpack.co 八 fig.devjs|-webpack.co 八 fig.pedjs*c ss,这个不用多说吧，里面有个小 认.而，自己随便改改看嘛。我这里没有默认引入/ess或者sass理由非常简单，留给开发人员选择自己喜爱的工具*etc,一些公共配置性内容，可以放在这里，方便查找、通用*%,

8、用我多说么？放图片的啦均 分为生 仅 匕S和fw两大部分。这个内容略多，我后面详述吧。typings,这里放着那些非Tgpesc叩t编写的库、原始类型的Declaration Files,没有这个，Typescript的静态分析工具就没办法提供那些强大提示和检查了。*单页应用ktkvl模版，最 终 的 会 由webpack根据这个模版生成*packagejso项目的八描述文件，那些具体的工具命令（譬如刚才用过的呻侬s t a r t,都在这里面定义好了）reqiAire.d.ts,这个Declaration Fite还是由于webpack的缘故，详情看这里*tscoin.fig.jsom.,这

9、个是Tgpesc呻t需要的配置文件，里面包含的编译后的ECMAScript版本，已经模块规范.tsd.jso八,这里定义了本项目需要哪些额外的Declaration Files,根据这个文件下载的定义文件，就放在前面提到的火同口多目录里webpack.coifig.dev.js,开发、调试环境使用的webpock配置webpack.coiafig.prod.js,正式运行环境使用的 webpack,配置。npa nm release命令会用这个配置，生成的结果都会给文件名加以6,j 收 呻 亡文件也会压缩。可用工具介绍*npm start,启动调试服务器，使用 .fig.dev.js 作为 w

10、ebpack 配置,不直接生成物理文件，直接内存级别响应调试服务器资源请求。而且内置hot reload,不用重启服务，修改源码，浏览器即可刷新看到新效果*呻侬 run release,使用 webpack.ccmfig.pgd.js 作为 webpack 配置，生成压缩、去缓存化的匕 八 山。文 件 到 八 目 录 下。也就是说，如果你要发布到生产环境或者其它什么测试环境，你应该提供的是八gTgpe/以 目录下生成的那堆东西，而不是源码。呼出run dev,使 用webpack.configdev.js作 为webpack配置，生成物理文件。t s目录介绍featurescommon那 些

11、通 用 的 逻 辑、UI组 件 可 以 通 通 放 在 这 里，譬 如 为 了 演 示 方 便，我已经在fea tu res/co d irective 里 写 了*个 Autofocus.ts 的 指 令。引入基类import FeatureBase from././fw/l i b/Fcatu re Base1;class Autofocus extends FeatureBase(constructor0 设置名称，会在ts/mam.t5里的fi八dDepende八cies中用到superCAutoFocusMod”)；_autoFocus()return(restrict：A!t/注意

12、看，有了类型，当 你 点 的 时 候，有提示出现哦 八k:func力 。八($scope：angular.lScope,e/ement:aigular.lAugieiatedJQuery)He3e n珏oj.FoctxsO；)execute。(注册该指令到当前featurethis.dir&ctive(autofocus1 j tki._autoFocu);默认导出即可export default Autofocustodos这是一个单纯的演示f e a tu re,里面的内容我们后面详解f w这里面都是些所谓 框架”级别的设置，有兴趣的话挨个儿打开瞧瞧嘛，没什么大不了的。特别注意，大部分时候

13、，你的开发都应该围绕features目录展开，之所以叫f w,就是和具体业务无关，除非你需要修改框架启动逻辑，路由控制系统。，否则不需要动这里的内容源码介绍t s/i n de x.t s入口文件/*兴*这里连用两个enstx-c,是webpock的特性，可以强制在匕八山 时将内容拆成两个部分*然后两个部分还并行加载*/第一个部分是一个很小的卯/认八”，在并行加载两个c几m k时，这个非常小的部分q。会竞速成功于是你就看到了传说中的loading动画-screen/dist/splasKiiia.css1,plask-screen,八ction(require)这里的强转6mg类型，是因为我使

14、用的功能是webpnek的特性，所以Epesc切尤并不知道/所以要强制忽 略 pes”3 t的提示-scree 八/aist/sp/5.h/uhcss).se0；八9req eCsp/ask-scree,y)SplasKeable(circu(ar,);)；由于这里是真正的业务，代码多了太多，所以体积也更大，加载也更慢，于是在这个Mcmk加载完成前有个美好的/。力 认g动画，要比生硬的白屏更优雅。放心，这个八k加载完后，/。力hg动画也会被销毁req ire.e八s re(p./css/nA/,八.css-./kw川认/fuiactioia(require)(%q“i%C./css/kvwh.

15、css).seO；/这里启动了真正的 框架”var App=(require(,./kvaik,),default;(M W App().心 八()；1)；ts/m a in.ts 框架 启动器引入依赖部分import*as ng from angular1;import Initializers frokv fw/i八import Extensions from./fw/ext/iaiia1;import Configurators Fro3 L/fw/config/gah;import Services from/./fw/$ervfce/mamz;import Features from

16、,./featutres/kvain,;import Splash fs M splask-screen;import FeatureBase from./fw/lib/FeatureBase;class App(声明成员变量及其类型appNaie:string;features：Array:depends：Array;app：aiagular.lModule;constructor0 这里相当于vg-app的名字this.appName=gType1;实例化所有featuresFeatu res.forEack(fuirictioia(Featu re)thi.push(MW Feature

17、();jj this.features=);/从 features 实例中提取 AngHnrJS module vame,并将这些八“m e作为igType的依赖会在下面“catcApp时用到fi八dDepende八cies。tkisdcpc 八 ds=Exte 八s i0Kts.s ce(O);var=th/s.features.filter(feature=Hfeatureexport).iaap(feature=feat”reexport);以us.dcpe h ds.pusK.fc4t N MCS);)激活初始化器，个别操作希望在A nguS rJ S app启 动 前 完 成befo

18、reStartQ Mitializws.foKEack(l八itialize=(M W 伉击H iz c rftk is.fc 仅 s).ex ec tc O);this.features.foEach(feature=fature.beforeStartO);)/创建八gTgpe应 用 实 例eatcAppO this.features.forEack(featurc=feature.executeQ);this.app=ig.iodulthis.appNaie,tkis.depeiads);配置 cgTgpec(mfigApp()Co八figuKatod.foKEach(Configumt

19、oR)=(M W Config(Arator(this.featuresJ协 is”p).ex ec”t0();)/注册fw 下的“框架”级 serviceregisterServi。Services.forEach(Ser/ice)=(M W S e i砥this.fcatiAHes,thMpp).exccteO);)看到了么，这里我会销毁1。久 儿 认 g 动画，并做了容错也就是说，即便你遇到了那微乎其微的状况，/。力 认 g 动 画 比 业 务 的(八 k 加载还慢我也会默默的把它收拾掉的destroySplask():void(var _tkis-this；Splash.destroy

20、O；(ruire(,splash-scree 八/力品/平/5人.小，八.css).八 sc。；setTimeout(fuiactioia()if(SpSskisRaFmingO)fhis.WestrogSplashO；I 8 0)；/启动 Angu/arUS applauiackQ iag.bootstrap(docuvetJ this.appNaMe,stHctDi：true);runQ:void(this.findDepecdeccies。;tkis.befoscStart。;this.weateAppO；this.configAppO；this.registerSeniceO；this

21、.destirogSplasM);tkis.lauiackQ;1)export default App;用 T y pes c ript 写 F ea turets/features/todos/main.ts/一个feature的marKts负责管理该feature所用到的所有模块import:FeatureBase frokn,././fw/lib/Feature13ase,;/引入路由定义import Routes from./Routes;弓I入c。八卅。e r定义，和service定义import TodosCoitroller from,./cotroller/Todo$Coiat

22、rotlcr,;import TodosSeKvice from。/service/TodosService;class Feature extends FeatureBase.constructor0 指定feature名字sapWtodos，)；设置路由this.routes=Routes;)execute)注册 controfer 到本 featuretkis.coiatrollerCTodosCoiatrollej TodosCoitroller);注册 service 到本 featuretkis.serviceCTodosServicel TodosService);导出本feat

23、”七,别担心，再上一级调用方会正确处理的export default Feature;用T y pes c ript写路由简单到没朋友引入路由对应的模版，还是因为webpack,将模版作为字符串引入，就是这么easg还是因为webpack特性的缘故，这里只能通过强转的形式让/DE忽略检查var tpl=(requitre(,./partials/todo$.htkvl,)；import:Route from,././fw/lib/Route,:const routes：Route=id：todosLisDefault：truCjwke八：/todoscontroller.TodosCoiatr

24、ollejcontrollers):dodos,template：tpl狂export default routes;这里路由的内容你可以写错试试看，会有错误提示哦!用 T y pes c ript 写 C ontrol l erimport*as angular from angula;import 伍tenaRScrvice from./././fw/serve/伍CenaRServimport TodosService from./ser/ice/TodosSer/ice1;import Todo from./iodel/Todo1;定义一个表示状态的类型，可以约束输入哦！interfa

25、ce IStatusFiltcr completed?：boolean自定义 丁。dosScope,因为Scope本身没有todolist属 性需要自定义添加interface ITodosScopc extends aigular.lScopc todolist?:Array;class TodosCoiatroller 声明成员，并赋予初始值todolist:Array=口；statusFilter：IStatusFilter=;reiaiiaiiagCout：八HASCH=O;filter：string=editedTodo:Todo;MA/Todo:string=局炸天的ng-anno

26、tate插件，妈妈再也不用担心我手写什么m/me w o ta ti。或者为,坷cc属性了/*ng ect*/coi$tructor(public Escape:ITodosScope,public TodosService:TodosService,public utils:titenaalSeKvice)this.n it_0;this._desWog_。;Jn/tX)(this.$scope.todolist=this.todolist;/从 service中获取初始值，并放入物Mtodohstthis.ToclosSenice.get 以 rtTodos。.thei.(data=thi

27、s.todolist.pash(data););/监视todolist的变化tkis.cope4watck(todolist,j this.。八 丁。dosCk4八 ged.b/Md(tkis),true);。nTodosC 八ged。tkis.reiaiiiagCouiat=this.todolist.fi(ter(todo)=!to&o.coMplcted).length;)addTodoQ this.todolist.push(title：this.八cwTod。，completed：false!)；this.八 cwTod。=)editTodo(todo)this.editedTodo

28、=todo;doMEditi.g(todo:Todo)this.editedTodo=IA 八 Hefi八。4;if(!todo.title.triiO)this.reioveTodo(todo);)reioveTodotodo：Todo)this.$scope.todolisi:=tkis.todolist=this.to4olist.fi【tcK(t)=t/=todo);iarkAll(checked：boolean)tkis.todotist.forEack(todo=to pleted.-checked;toggleFiltee：MouseEveit,filter：string)thi

29、s.bctikstopEve八t(e);this.filteg=filter)thisstatusFilter=!filter?:filter=active1?completed：false :completed:true;clearPoMTodosO this.$scope切dolist=tkis.todolist=this.todolist.filter(todo)=!pleted);)_destrog_0 th/s.$scope.$o八(午dcstrog。0=);)export default TodosCoiatroller;最后，你可能还有其它问题，直接来看看这里，或者Gi协助上给我提issue也未尝不可呢typescriptangulagsspa