Cocos Creator + TypeScript 初体验

本篇文章的主要目的只有一个

把一部分 JS 党转化到我 TS 党下。

---

01

前提

无论学什么技术知识，官方文档都应该是你第一个教程，所以新手上路请先至少阅读这一节 http://docs.cocos.com/creator/manual/zh/getting-started 再来看这篇文章。

这里假设你已经成功安装了 Cocos Creator。

02

TypeScript VS JavaScript 

这里当然只会讲优点：
1、TS 是 JS 的超集，所有 JS 的语法 TS 都支持；
2、TS 支持接近完美的代码提示，JS 代码提示接近于没有；
3、TS 有类型定义，编译时就可以排除很多无意义的错误；

4、TS 可以重构，适合大型项目；
5、TS 可以使用 ES6 async之类的所有新语法。而 JS Cocos Creator 还没有完全支持 ES6；
6、最重要的一点：我以后的教程都会用 TS 写，如果你不用 TS，你就会永远失去我了。

代码编辑器选择，这里只推荐两个：

1、Visual Studio Code

2、WebStorm

vs code 的优点是快，与 Cocos Creator 结合的好，一些功能需要自己安装插件。

webstorm 的优点是所有你想要的功能都先天内置了，缺点是占内存，个人感觉还有点丑。

对于我自己来说，我在公司用 WebStorm，在家用 VS Code。

如果你还是不知道用哪个，我只能先推荐你用VS Code，因为下面的内容是面向 VS Code。

03

学习 TypeScript  

既然要用 TS 开发游戏，肯定要知道 TS 的语法，我这一篇文章不可能把所有 TS 的语法都讲完，所以针对新手建议查看一下 TS 的基本文档： https://www.tslang.cn/docs/home.html，当然，不一定要一次性全看完，你可以先看个大概，遇到问题再补习。

TypeScript 环境配置

任意打开一个项目，把这几个都点一遍

控制台会输出

打开编辑器，你会发现一个名字为 creator.d.ts 的脚本

creator 的提示都依靠这个脚本，引擎的 API 变动也要及时更新这个脚本，所以每次更新引擎的时候都要重新点一次上面那个“更新 VS Code 提示数据“重新生成 creator.d.ts。

资源管理器右键新建一个 TS 脚本，点开后你会发现有很多没用的东西，而且还会有一个提示错误。

编辑器右上角 “打开程序安装路径”

static -> template -> new-script.ts
这个脚本就是新建 TS 脚本的默认样式，我们重新编辑后的脚本如下

新建一个 TS 脚本，你会发现跟刚才编辑的默认脚本是一个样子了。

配置自己的声明文件

以 d.ts 为后缀名的文件，会被识别为声明文件，creator.d.ts 是引擎的声明文件，我们也可以定义自己的声明文件，需要注意的是声明文件要放在 assets 文件外，因为 assets 文件里的脚本都会被引擎编译，而声明文件的作用就是写代码时提示一下，编译之后就不需要了。

举个栗子

在项目的根目录添加一个 global.d.ts 文件

然后在项目里的脚本里就可以得到对应的提示

更多类型定义戳 

https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

属性类型声明

04

用 TypeScript 写一个游戏

最后我们来切身体会一下 TypeScript 的丝滑柔顺。

挑一个熟悉的游戏来写，官方文档里有一个摘星星的游戏，我们用 TS 重新写一下。

第一步：新建一个工程

第二步：写几个脚本

Game.ts

Player.ts

Star.ts

05

游戏完成，开搞！ 

小伙伴们可以选择把游戏发布到 Github Pages（对于这个发布过程有疑问的，C姐会找个时间发教程），或直接从项目链接进去试玩：https://potato47.github.io/star-catcher

参考链接

http : //forum.cocos.com/t/typescript-creator-github/42200 

http：//docs.cocos.com/creator/manual/zh/scripting/typescript.html 

https：//www.tslang.cn / docs / home.html 

源码：https：//github.com/potato47/star-catcher