分享:创建Typescript版的HelloWorld项目

前言

实现方式

简单来说就是2步:

  1. 更新 creator.d.ts
  2. 增加两个文件 ts-support.js 和 ts-support.d.ts
    具体实现方法可以参考: https://github.com/livingyang/cocoscreator-typescript-helloworld

添加ts支持的HelloWorld文件预览:

@cc.RegisterComponent
class HelloWorld extends cc.Component {
    @cc.Property(cc.Label)
    label: cc.Label;

    @cc.Property('Hello, World!')
    text: string;

    fromTypescript = ' From typescript!';

    onLoad() {
        this.label.string = this.text + this.fromTypescript;
    }

    update() {
    }
}
  • 可以看到这种类的组织逻辑更加清晰
  • @cc.RegisterComponent 用于将当前类注册到cocoscreator的组件系统中
  • @cc.Property(options) 这个用于添加编辑器属性,options可以是类名,也可以是{default: null, type: cc.Label}这样的配置属性
  • fromTypescript = ' From typescript!'; 这一行创建了一个类成员变量,不会在编辑器中显示

一些想法和疑问

  • ts-support.js 和 ts-support.d.ts 这两个文件用于增加Typescript的支持,不到20行代码,且不影响原有的功能,有没有希望整合到引擎中?
  • 用Typescript编译时,自带的 creator.d.ts 有很多的编译错误,将来会不会持续更新,然后修复这些Typescript的编译错误?
4赞

沙发帮顶顶顶顶

其实这个是会变的。。。 说不定哪天你就发现 Creator 可以使用 Typescript 了 :smile:

2赞

支持~~~~~~~~~~~

1赞

感谢分享!很高兴有更多人加入TypeScript的阵营,哈哈。我一直忍住没说,但是现在忍不住了:前两周natas大大告诉我下个版本会加入TypeScript SourceMap的支持(Chrome里调试时可以直接显示TS代码),并且在研究加入.ts文件的支持(像CoffeeScript一样,就不用维护TS、JS两套代码了),装饰器的实现Jare大神会看(我后来也意识到可以用cc.Class简单实现,但是已经好用就懒得改了)。这几点实现后,再完善一下creator.d.ts,基本上就等于支持TypeScript了。
翻了一下你的github项目,看到了很多我走过的老路,提几点建议:

  1. 在tsconfig.json中include creator.d.ts和ts-support.d.ts,WebStorm是不支持的,会报错。所以我采用WebStorm和VS Code都支持的reference方式(见我的项目的typescript/types/GlobalNamespace.d.ts第一行,里面还定义了jsb, dragonBones, CC_EDITOR等常见全局变量 ,否则项目中使用时IDE会报错)。
  2. CCEditor装饰器是很常用的,你的项目里应该需要实现一下。
  3. 每个JS文件都生成了相同的TS的Helper代码:

    代码文件一多的话整个项目就会有大量重复代码。需要在tsconfig.json在开启noEmitHelpers选项并将这些Helper代码单独设置为插件。我项目中的typescript/plugins/TypeScriptHelper.js是完整版的TypeScript Helper代码,我还对Creator1.4做了优化,可以直接复制。
  4. 可以复制一下我的项目的typescript/decorators/ComponentDecorators.ts中的ICCProperty与ICCEditor两个类型声明到你的ts-support.d.ts,这样写properties和editor的时候都会有代码提示。
  5. 下个版本如果加入了TypeScript SourceMap的支持,需要在tsconfig.json里加上"inlineSourceMap": true和"inlineSources": true。
5赞

用我的方法,在web平台上ok,但是native平台会报这个错误:
Simulator: Can not find class “113feFvfsJMuICSI3B47906”

我调试了一下,应该是web平台和native平台的class注册方式有差异,你有没有遇到过呢?

遇到过,忘记怎么解决的了,好像是装饰器里要加一个什么,我看看。

找到了,我当时遇到这个native平台报错的时候去看了下引擎代码,看它是如何检测的。发现只要加一行constructor.$super = cc.Component就可以,你的装饰器这样加一行:

cc.RegisterComponent = function (constructor) {
    constructor.$super = cc.Component;
    cc.Class({
        extends: constructor,
        properties: constructor.$properties
    });
    return constructor;
}

就没有报错了。你再测试测试,其它的功能我没看。

1赞

我也在等TS,没有TS实在没信心用javascript写一个工程。先白鹭飞起。

现在呢,打脸了吧?

五年前的帖子是什么机缘让你找到的 :rofl: