Project1

标题: TypeScript静态编译在MV中的应用 [打印本页]
作者: 沉滞的剑    时间: 2020-6-7 16:59
标题: 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声明文件已经省略)
TYPESCRIPT 代码复制
  1. declare type Maybe<T> = T | null;
    

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

  3.  
  4. declare class Window_Draggable {
    

  5.   dragableRect: Rectangle;
    

  6.   updateDrag(): void;
    

  7. }
    

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

  10.  
  11. const extendsDraggableWindowClass = (WindowClass: typeof Window_Base): typeof Window_Base =>
    

  12.   class Window_Draggable extends WindowClass implements Window_Draggable {
    

  13.     static draggingWin: Maybe<Window_Draggable> = null;
    

  14.     private _dragX: Maybe<number> = null;
    

  15.     private _dragY: Maybe<number> = null;
    

  16.     private _dragging: boolean = false;
    

  17.  
  18.     get dragableRect() {
    

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

  20.     }
    

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

  23.       super(...args);
    

  24.     }
    

  25.  
  26.     update() {
    

  27.       super.update();
    

  28.       this.updateDrag();
    

  29.     }
    

  30.  
  31.     updateDrag() {
    

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

  33.       const isTriggered = TouchInput.isTriggered();
    

  34.       const isReleased = TouchInput.isReleased();
    

  35.       const isPressed = TouchInput.isPressed();
    

  36.       const draggingWin = Window_Draggable.draggingWin;
    

  37.       if (isTriggered && isInside) {
    

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

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

  40.         this._dragging = true;
    

  41.         const list = SceneManager._scene._windowLayer.children;
    

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

  43.         Window_Draggable.draggingWin = this;
    

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

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

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

  47.       } else if (isReleased) {
    

  48.         this._dragging = false;
    

  49.       }
    

  50.     }
    

  51.   };


最后输出的Javascript文件:
JAVASCRIPT 代码复制
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3.     var extendStatics = function (d, b) {
  4.         extendStatics = Object.setPrototypeOf ||
  5.             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  6.             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  7.         return extendStatics(d, b);
  8.     };
  9.     return function (d, b) {
  10.         extendStatics(d, b);
  11.         function __() { this.constructor = d; }
  12.         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  13.     };
  14. })();
  15. var setNullDefault = function (value, defaultValue) { return (value === null ? defaultValue : value); };
  16. var extendsDraggableWindowClass = function (WindowClass) { var _a; return _a = (function (_super) {
  17.         __extends(Window_Draggable, _super);
  18.         function Window_Draggable() {
  19.             var args = [];
  20.             for (var _i = 0; _i < arguments.length; _i++) {
  21.                 args[_i] = arguments[_i];
  22.             }
  23.             var _this = _super.apply(this, args) || this;
  24.             _this._dragX = null;
  25.             _this._dragY = null;
  26.             _this._dragging = false;
  27.             return _this;
  28.         }
  29.         Object.defineProperty(Window_Draggable.prototype, "dragableRect", {
  30.             get: function () {
  31.                 return new Rectangle(this.x, this.y, this.width, this.height);
  32.             },
  33.             enumerable: false,
  34.             configurable: true
  35.         });
  36.         Window_Draggable.prototype.update = function () {
  37.             _super.prototype.update.call(this);
  38.             this.updateDrag();
  39.         };
  40.         Window_Draggable.prototype.updateDrag = function () {
  41.             var _this = this;
  42.             var isInside = this.dragableRect.contains(TouchInput.x, TouchInput.y);
  43.             var isTriggered = TouchInput.isTriggered();
  44.             var isReleased = TouchInput.isReleased();
  45.             var isPressed = TouchInput.isPressed();
  46.             var draggingWin = Window_Draggable.draggingWin;
  47.             if (isTriggered && isInside) {
  48.                 this._dragX = this.canvasToLocalX(TouchInput.x);
  49.                 this._dragY = this.canvasToLocalY(TouchInput.y);
  50.                 this._dragging = true;
  51.                 var list = SceneManager._scene._windowLayer.children;
  52.                 list.sort(function (a, b) { return Number(a === _this) - Number(b === _this); });
  53.                 Window_Draggable.draggingWin = this;
  54.             }
  55.             else if (isPressed && this._dragging && draggingWin === this) {
  56.                 this.x = TouchInput.x - setNullDefault(this._dragX, 0);
  57.                 this.y = TouchInput.y - setNullDefault(this._dragY, 0);
  58.             }
  59.             else if (isReleased) {
  60.                 this._dragging = false;
  61.             }
  62.         };
  63.         return Window_Draggable;
  64.     }(WindowClass)),
  65.     _a.draggingWin = null,
  66.     _a; };


附上我的js目录(我引入了lodash库, 同时安装了@types/lodash):
JAVASCRIPT 代码复制
  1. js
  2. │  main.js
  3. │  plugins.js
  4. │  rpg_core.js
  5. │  rpg_managers.js
  6. │  rpg_objects.js
  7. │  rpg_scenes.js
  8. │  rpg_sprites.js
  9. │  rpg_windows.js
  10. │
  11. ├─libs
  12. │      fpsmeter.js
  13. │      iphone-inline-video.browser.js
  14. │      lodash.min.js
  15. │      lz-string.js
  16. │      pixi-picture.js
  17. │      pixi-tilemap.js
  18. │      pixi.js
  19. │
  20. ├─notes
  21. │      index.txt
  22. │
  23. ├─plugins
  24. │      CleanWindow.js
  25. │
  26. └─src
  27.         CleanWindow.ts
  28.         rpg_core.d.ts
  29.         rpg_managers.d.ts
  30.         rpg_windows.d.ts
作者: MCCF    时间: 2020-6-7 17:22
虽然看不懂但是前排沙发
（可能因为写习惯前端觉得还是原生的JS方便233333
作者: walf_man    时间: 2020-6-9 17:12
大佬不愧是大佬，不过还是感觉js代码看起来好看一些呀，这ts完全就看不懂了
不禁感叹，为何要发明那么多语言
作者: zths    时间: 2020-6-9 17:19
walf_man 发表于 2020-6-9 17:12
大佬不愧是大佬，不过还是感觉js代码看起来好看一些呀，这ts完全就看不懂了
不禁感叹，为何要发明 ...

所以就是 所谓的 封装 封装 再 封装。
语言语言套语言。
最后写个 hello world 都要 1GB ...(过分了
作者: inmyfiretopic    时间: 2020-8-1 11:56
未来的趋势一定是ts，ts强大太多了
作者: inmyfiretopic    时间: 2020-8-1 19:02
zths 发表于 2020-6-9 17:19
所以就是 所谓的 封装 封装 再 封装。
语言语言套语言。
最后写个 hello world 都要 1GB ...(过分了 ...

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



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1