TypeScript静态编译在MV中的应用

沉滞的剑 · 发表于 2020-6-7 16:59:19

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

都0202年了, 不能再用es3的老JS了, 要么Babel, 要么直接上TS

必要运行环境: Node.JS
全局安装ts:
npm i -g typescript
工程路径下初始化typescript 配置:
tsc --init
按需求修改一下tsconfig.json, 输出目录, 源目录, 输出目标(我选择ES5)等等
监控模式启动:
tsc -w
然后就可以快乐得写TS了, 不过一些声明得自己写, 反正用到啥写啥也很方便

另付一个ts写的拖拽窗口插件(RM声明文件已经省略)

TYPESCRIPT 代码复制

declare type Maybe<T> = T | null;

declare type Builder<T> = (...args: any[]) => T;

 
declare class Window_Draggable {

  dragableRect: Rectangle;

  updateDrag(): void;

}

 
const setNullDefault = <T extends any>(value: Maybe<T>, defaultValue: T) => (value === null ? defaultValue : value);

 
const extendsDraggableWindowClass = (WindowClass: typeof Window_Base): typeof Window_Base =>

  class Window_Draggable extends WindowClass implements Window_Draggable {

    static draggingWin: Maybe<Window_Draggable> = null;

    private _dragX: Maybe<number> = null;

    private _dragY: Maybe<number> = null;

    private _dragging: boolean = false;

 
    get dragableRect() {

      return new Rectangle(this.x, this.y, this.width, this.height);

    }

 
    constructor(...args: any[]) {

      super(...args);

    }

 
    update() {

      super.update();

      this.updateDrag();

    }

 
    updateDrag() {

      const isInside = this.dragableRect.contains(TouchInput.x, TouchInput.y);

      const isTriggered = TouchInput.isTriggered();

      const isReleased = TouchInput.isReleased();

      const isPressed = TouchInput.isPressed();

      const draggingWin = Window_Draggable.draggingWin;

      if (isTriggered && isInside) {

        this._dragX = this.canvasToLocalX(TouchInput.x);

        this._dragY = this.canvasToLocalY(TouchInput.y);

        this._dragging = true;

        const list = SceneManager._scene._windowLayer.children;

        list.sort((a, b) => Number(a === this) - Number(b === this));

        Window_Draggable.draggingWin = this;

      } else if (isPressed && this._dragging && draggingWin === this) {

        this.x = TouchInput.x - setNullDefault(this._dragX, 0);

        this.y = TouchInput.y - setNullDefault(this._dragY, 0);

      } else if (isReleased) {

        this._dragging = false;

      }

    }

  };

declare type Maybe<T> = T | null;



declare type Builder<T> = (...args: any[]) => T;



 


declare class Window_Draggable {



  dragableRect: Rectangle;



  updateDrag(): void;



}



 


const setNullDefault = <T extends any>(value: Maybe<T>, defaultValue: T) => (value === null ? defaultValue : value);



 


const extendsDraggableWindowClass = (WindowClass: typeof Window_Base): typeof Window_Base =>



  class Window_Draggable extends WindowClass implements Window_Draggable {



    static draggingWin: Maybe<Window_Draggable> = null;



    private _dragX: Maybe<number> = null;



    private _dragY: Maybe<number> = null;



    private _dragging: boolean = false;



 


    get dragableRect() {



      return new Rectangle(this.x, this.y, this.width, this.height);



    }



 


    constructor(...args: any[]) {



      super(...args);



    }



 


    update() {



      super.update();



      this.updateDrag();



    }



 


    updateDrag() {



      const isInside = this.dragableRect.contains(TouchInput.x, TouchInput.y);



      const isTriggered = TouchInput.isTriggered();



      const isReleased = TouchInput.isReleased();



      const isPressed = TouchInput.isPressed();



      const draggingWin = Window_Draggable.draggingWin;



      if (isTriggered && isInside) {



        this._dragX = this.canvasToLocalX(TouchInput.x);



        this._dragY = this.canvasToLocalY(TouchInput.y);



        this._dragging = true;



        const list = SceneManager._scene._windowLayer.children;



        list.sort((a, b) => Number(a === this) - Number(b === this));



        Window_Draggable.draggingWin = this;



      } else if (isPressed && this._dragging && draggingWin === this) {



        this.x = TouchInput.x - setNullDefault(this._dragX, 0);



        this.y = TouchInput.y - setNullDefault(this._dragY, 0);



      } else if (isReleased) {



        this._dragging = false;



      }



    }



  };

最后输出的Javascript文件:

JAVASCRIPT 代码复制

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var setNullDefault = function (value, defaultValue) { return (value === null ? defaultValue : value); };
var extendsDraggableWindowClass = function (WindowClass) { var _a; return _a = (function (_super) {
        __extends(Window_Draggable, _super);
        function Window_Draggable() {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            var _this = _super.apply(this, args) || this;
            _this._dragX = null;
            _this._dragY = null;
            _this._dragging = false;
            return _this;
        }
        Object.defineProperty(Window_Draggable.prototype, "dragableRect", {
            get: function () {
                return new Rectangle(this.x, this.y, this.width, this.height);
            },
            enumerable: false,
            configurable: true
        });
        Window_Draggable.prototype.update = function () {
            _super.prototype.update.call(this);
            this.updateDrag();
        };
        Window_Draggable.prototype.updateDrag = function () {
            var _this = this;
            var isInside = this.dragableRect.contains(TouchInput.x, TouchInput.y);
            var isTriggered = TouchInput.isTriggered();
            var isReleased = TouchInput.isReleased();
            var isPressed = TouchInput.isPressed();
            var draggingWin = Window_Draggable.draggingWin;
            if (isTriggered && isInside) {
                this._dragX = this.canvasToLocalX(TouchInput.x);
                this._dragY = this.canvasToLocalY(TouchInput.y);
                this._dragging = true;
                var list = SceneManager._scene._windowLayer.children;
                list.sort(function (a, b) { return Number(a === _this) - Number(b === _this); });
                Window_Draggable.draggingWin = this;
            }
            else if (isPressed && this._dragging && draggingWin === this) {
                this.x = TouchInput.x - setNullDefault(this._dragX, 0);
                this.y = TouchInput.y - setNullDefault(this._dragY, 0);
            }
            else if (isReleased) {
                this._dragging = false;
            }
        };
        return Window_Draggable;
    }(WindowClass)),
    _a.draggingWin = null,
    _a; };

"use strict";


var __extends = (this && this.__extends) || (function () {


    var extendStatics = function (d, b) {


        extendStatics = Object.setPrototypeOf ||


            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||


            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };


        return extendStatics(d, b);


    };


    return function (d, b) {


        extendStatics(d, b);


        function __() { this.constructor = d; }


        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());


    };


})();


var setNullDefault = function (value, defaultValue) { return (value === null ? defaultValue : value); };


var extendsDraggableWindowClass = function (WindowClass) { var _a; return _a = (function (_super) {


        __extends(Window_Draggable, _super);


        function Window_Draggable() {


            var args = [];


            for (var _i = 0; _i < arguments.length; _i++) {


                args[_i] = arguments[_i];


            }


            var _this = _super.apply(this, args) || this;


            _this._dragX = null;


            _this._dragY = null;


            _this._dragging = false;


            return _this;


        }


        Object.defineProperty(Window_Draggable.prototype, "dragableRect", {


            get: function () {


                return new Rectangle(this.x, this.y, this.width, this.height);


            },


            enumerable: false,


            configurable: true


        });


        Window_Draggable.prototype.update = function () {


            _super.prototype.update.call(this);


            this.updateDrag();


        };


        Window_Draggable.prototype.updateDrag = function () {


            var _this = this;


            var isInside = this.dragableRect.contains(TouchInput.x, TouchInput.y);


            var isTriggered = TouchInput.isTriggered();


            var isReleased = TouchInput.isReleased();


            var isPressed = TouchInput.isPressed();


            var draggingWin = Window_Draggable.draggingWin;


            if (isTriggered && isInside) {


                this._dragX = this.canvasToLocalX(TouchInput.x);


                this._dragY = this.canvasToLocalY(TouchInput.y);


                this._dragging = true;


                var list = SceneManager._scene._windowLayer.children;


                list.sort(function (a, b) { return Number(a === _this) - Number(b === _this); });


                Window_Draggable.draggingWin = this;


            }


            else if (isPressed && this._dragging && draggingWin === this) {


                this.x = TouchInput.x - setNullDefault(this._dragX, 0);


                this.y = TouchInput.y - setNullDefault(this._dragY, 0);


            }


            else if (isReleased) {


                this._dragging = false;


            }


        };


        return Window_Draggable;


    }(WindowClass)),


    _a.draggingWin = null,


    _a; };

附上我的js目录(我引入了lodash库, 同时安装了@types/lodash):

JAVASCRIPT 代码复制

js
│  main.js
│  plugins.js
│  rpg_core.js
│  rpg_managers.js
│  rpg_objects.js
│  rpg_scenes.js
│  rpg_sprites.js
│  rpg_windows.js
│
├─libs
│      fpsmeter.js
│      iphone-inline-video.browser.js
│      lodash.min.js
│      lz-string.js
│      pixi-picture.js
│      pixi-tilemap.js
│      pixi.js
│
├─notes
│      index.txt
│
├─plugins
│      CleanWindow.js
│
└─src
        CleanWindow.ts
        rpg_core.d.ts
        rpg_managers.d.ts
        rpg_windows.d.ts

js


│  main.js


│  plugins.js


│  rpg_core.js


│  rpg_managers.js


│  rpg_objects.js


│  rpg_scenes.js


│  rpg_sprites.js


│  rpg_windows.js


│


├─libs


│      fpsmeter.js


│      iphone-inline-video.browser.js


│      lodash.min.js


│      lz-string.js


│      pixi-picture.js


│      pixi-tilemap.js


│      pixi.js


│


├─notes


│      index.txt


│


├─plugins


│      CleanWindow.js


│


└─src


        CleanWindow.ts


        rpg_core.d.ts


        rpg_managers.d.ts


        rpg_windows.d.ts

MCCF · 发表于 2020-6-7 17:22:03

虽然看不懂但是前排沙发
（可能因为写习惯前端觉得还是原生的JS方便233333

walf_man · 发表于 2020-6-9 17:12:19

大佬不愧是大佬，不过还是感觉js代码看起来好看一些呀，这ts完全就看不懂了

不禁感叹，为何要发明那么多语言

zths · 发表于 2020-6-9 17:19:14

walf_man 发表于 2020-6-9 17:12
大佬不愧是大佬，不过还是感觉js代码看起来好看一些呀，这ts完全就看不懂了
不禁感叹，为何要发明 ...

所以就是所谓的封装封装再封装。
语言语言套语言。
最后写个 hello world 都要 1GB ...(过分了

inmyfiretopic · 发表于 2020-8-1 11:56:52

未来的趋势一定是ts，ts强大太多了

inmyfiretopic · 发表于 2020-8-1 19:02:45

zths 发表于 2020-6-9 17:19
所以就是所谓的封装封装再封装。
语言语言套语言。
最后写个 hello world 都要 1GB ...(过分了 ...

ts 比js 强大十倍以上，你说的问题的确存在，但是相对于ts的好处，可以忽略不计。

帐号		自动登录	找回密码
密码			注册会员

[交流讨论] TypeScript静态编译在MV中的应用

加入我们，或者，欢迎回来。

点评

点评

点评

R考场第七期银奖

开拓者