TypeScript静态编译在MV中的应用

沉滞的剑

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

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

另付一个ts写的拖拽窗口插件(RM声明文件已经省略)
[pre lang="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;
      }
    }
  };
[/pre]

最后输出的Javascript文件:
[pre lang="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; };
[/pre]

附上我的js目录(我引入了lodash库, 同时安装了@types/lodash):
[pre lang="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[/pre]

MCCF

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

walf_man

大佬不愧是大佬，不过还是感觉js代码看起来好看一些呀，这ts完全就看不懂了
不禁感叹，为何要发明那么多语言

zths

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

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

inmyfiretopic

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

inmyfiretopic

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

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