史上最强 TypeScript 脚本 介绍

赞赏 2017-06-27

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集,并添加了可选的静态类型和基于类的面向对象编程。TypeScript的设计目标是开发大型应用,然后转译成JavaScript运行。由于TypeScript是JavaScript的超集,任何现有的JavaScript程序都是合法的TypeScript程序。


516直播回顾:TypeScript支持知识讲解  


01  TypeScript和Cocos Creator

Cocos Creator的很多用户之前是使用其他强类型语言(如 C++/C#)来编写游戏的,因此在使用 Cocos Creator 的时候也希望能够使用强类型语言来增强项目在较大规模团队中的表现。

从 v1.5 版本开始 Cocos Creator 支持在项目中使用 TypeScript 编写脚本,用户的源码可以完全使用 TypeScript,或者 TypeScript 和 JavaScript 混合使用。

和其他 JavaScript 脚本一样,项目 assets 目录下的 TypeScript 脚本(.ts 文件) 在创建或修改后激活编辑器,就会被编译成兼容浏览器标准的 ES5 JavaScript 脚本。编译后的脚本存放在项目下的 library(还包括其他资源)目录。


02 使用准备

在新项目中使用 TypeScript

新建项目时,从项目模板中选择 HelloWorld TypeScript,即可创建一个包括 TypeScript 相关设置和基本组件的 HelloWorld 项目。


在编辑 TypeScript 脚本时,我们推荐使用微软推出的VS Code作为代码编辑器,VS Code具有完善的TypeScript语言支持功能。


在已有项目中添加 TypeScript 设置 

如果希望在原有项目中添加 TypeScript 脚本,并获得 VS Code 等 IDE 的完整支持,需要执行主菜单的 开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据 和 开发者 -> VS Code 工作流 -> 添加 TypeScript 项目配置,来添加 creator.d.ts 和 tsconfig.json 文件到你的项目根目录中。creator.d.ts 声明了引擎的所有 API,用于支持 VS Code 的智能提示。tsconfig.json 用于设置 TypeScript 项目环境,您可以参考官方的 tsconfig.json 说明 进行定制。


在项目中创建 TypeScript 脚本 

和创建 JavaScript 脚本一样,你可以直接在文本编辑器里新建 .ts 文件,或通过编辑器的 资源管理器 的创建菜单,右键点击一个文件夹,并选择 新建 -> TypeScript。


使用 TypeScript 声明 CCClass 

在 TypeScript 中 class 的声明方式 和 ES6 Class 相似。但为了编辑器能够正确解析 属性检查器 里显示的各类属性,我们还需要使用引擎内置的一些装饰器,来将普通的 class 声明成 CCClass。这和目前将 JavaScript 中的 ES6 Class 声明为 CCClass 的方法类似。关于装饰器的更多信息请参考 TypeScript decorator。


下面是一个基本的 TypeScript 声明组件的实例:



装饰器使用 @ 字符开头作为标记,装饰器主要用于编辑器对组件和属性的识别,而 TypeScript 语法中的类型声明 myVar: Type 则允许 VS Code 编码时自动识别变量类型并提示其成员。


03 更多属性类型声明方法


 声明值类型 


 声明数组 


 声明 getset 


注意:TypeScript 的 public, private 修饰符不影响成员在 属性检查器 中的默认可见性,默认的可见性仍然取决于成员变量名是否以下划线开头。


04 完善的智能提示功能

按照使用准备里描述的方式创建项目或添加配置后,在 VS Code 里打开项目,就可以享受完善的代码智能提示功能了。

组件本身的属性成员 

只要输入 this. 就会自动提示组件本身的其他成员,输入 this.member. 可以继续提示该成员的属性或方法。


提示其他组件属性和方法

首先我们声明一个组件:


然后在其他组件中 import MyModule, 并且声明一个 MyModule 类型的成员变量:



输入 this.myModule. 时,就可以提示我们在 MyModule.ts 中声明的属性了。



更新引擎接口声明数据 

Creator 每个新版本都会更新引擎接口声明,建议升级了 Creator 后,通过主菜单的 开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据 来更新已有项目的 creator.d.ts 文件。


Cocos Creator 中对 TypeScript 的支持参考了很多 Creator TypeScript Boilerplate 项目的设置和做法,在此特别感谢。另外这个项目中也包含了很多关于使用 TypeScript 项目的工作流程和高级功能,可供参考。


05 资源下载链接

TypeScript官方网站

www.typescriptlang.org

VS Code

www.code.visualstudio.com

tsconfig.json

www.typescriptlang.org/docs/handbook/tsconfig-json.html

TypeScript 中 class 的声明方式

www.typescriptlang.org/docs/handbook/classes.html

ES6 Class 

es6.ruanyifeng.com/#docs/class

TypeScript decorator

www.typescriptlang.org/docs/handbook/decorators.html

Creator TypeScript Boilerplate

github.com/toddlxt/Creator-TypeScript-Boilerplate


进Github

登陆后阅读全文
阅读 1681 赞赏 0 有用 1 没用 0 收藏 1 分享

   



0 条留言

相关文章

Github 如何在命令行下处理 Pull Request?

如何使用 Issue 管理软件项目? (Github)

php composer install 慢 不动 怎么办?

黑客成长技术清单 (GitHub 万星推荐)

全文搜索引擎 ElasticSearch 入门教程

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer

从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo

推荐一款上线 Cocos商店的付费插件——可视化状态机

手把手教你如何优化cocos2d-x手游内存

「新手向」用Cocos Creator也可以轻松做阿拉斗牛

Cocos Creator v1.6支持Camera剔除功能!

Cocos Creator v1.6使用体验Q&A

Cocos Creator可以用来开发大型MMO吗?

教程:Cocos Creator如何给资源打上MD5版本号?

「教程」如何在Cocos Creator中优化首页打开速度

手机扫一扫
分享文章