☰

Json2Typescript

yapi接口Json转typescript

// ==UserScript==
// @name         Json2Typescript
// @namespace    https://github.com/codeshareman/tookit.git
// @version      0.2
// @description  yapi接口Json转typescript
// @author       codeshareman
// @match        *://*/*
// @run-at       document-end
// @license      MIT
// ==/UserScript==

(function () {
  "use strict";
  const TYPE_MAP = {
    string: "string",
    integer: "number",
    boolean: "boolean",
    object: "Object",
    "object []": "array",
  };

  var _wr = function (type) {
    var orig = history[type];
    return function () {
      var rv = orig.apply(this, arguments);
      var e = new Event(type);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return rv;
    };
  };
  history.pushState = _wr("pushState");
  history.replaceState = _wr("replaceState");

  window.onload = () => {
    function transQuery2Typescript(query) {
      if (query === undefined || query === null) return {};
      return query.reduce((pre, item, index) => {
        const name = item.name;
        pre[name] = "string";
        return pre;
      }, {});
    }

    function transBody2Typescript(body) {
      if (body === undefined || body === null) return {};
      const bodyJson = JSON.parse(body);
      let body_ts = {};

      function loop(body) {
        const properties = body.properties;
        const requiredList = body.required || [];
        let cloneData = {};
        const fieldList =
          properties !== undefined ? Object.keys(properties) : [];
        fieldList.forEach((_field, index) => {
          const fieldData = properties[_field];
          const type = fieldData.type;
          const isRequired = requiredList.includes(_field);
          const field = `${_field}${isRequired ? "" : "?"}`;

          if (!["array", "object"].includes(type)) {
            cloneData[field] = TYPE_MAP[type];
          } else {
            if (type === "array") {
              const fieldType = fieldData.items.type;
              const fieldProperties = fieldData.items.properties;
              // 非array或object
              if (fieldProperties === undefined) {
                cloneData[field] = `${TYPE_MAP[fieldType]}[]`;
              } else {
                const childData = loop(fieldData.items);
                cloneData[field] = [childData];
              }
            }
            if (type === "object") {
              const fieldProperties = fieldData.properties;
              const fieldList = Object.keys(fieldProperties);
              cloneData[field] =
                fieldList.length > 0 ? loop(fieldData) : "Object";
            }
          }
        });
        return cloneData;
      }

      if (bodyJson !== undefined) {
        body_ts = loop(bodyJson);
      }

      return body_ts;
    }

    function css(target, style) {
      for (const property in style) {
        target.style[property] = style[property];
      }
    }

    function copyText(text, onSuccess) {
      if (navigator.clipboard) {
        // clipboard api 复制
        navigator.clipboard.writeText(text).then(onSuccess);
      } else {
        var textarea = document.createElement("textarea");
        document.body.appendChild(textarea);
        // 隐藏此输入框
        textarea.style.position = "fixed";
        textarea.style.clip = "rect(0 0 0 0)";
        textarea.style.top = "10px";
        // 赋值
        textarea.value = text;
        // 选中
        textarea.select();
        // 复制
        document.execCommand("copy", true);
        // 移除输入框
        document.body.removeChild(textarea);
        onSuccess();
      }
    }

    function generateTypescriptElement(target, content) {
      // 清除旧节点
      const oldEle = document.querySelector(".code-typescript");
      oldEle && oldEle.remove();

      if (target === undefined || target === null) return;

      const $ele_ts_wrapper = document.createElement("pre");
      const $ele_copy = document.createElement("a");
      $ele_ts_wrapper.className = "code-typescript";
      css($ele_ts_wrapper, {
        position: "relative",
        margin: "8px 0",
        padding: "12px 0 12px 4px",
        background: "#f9f9f9",
        border: "1px solid #ebe7e7",
        boxShadow: "0px 0px 12px #eee",
      });
      $ele_ts_wrapper.innerHTML = content;

      $ele_copy.innerText = "复制(copy)";
      css($ele_copy, {
        position: "absolute",
        top: "12px",
        right: "12px",
        color: "#f00",
      });
      let copied = false;
      $ele_copy.addEventListener("click", () => {
        if (copied) return;
        copyText(content, () => {
          copied = true;
          $ele_copy.innerText = "已复制";
          const $ele_a = document.createElement("a");
          $ele_a.href = "http://json2ts.com/";
          $ele_a.target = "_blank";
          $ele_a.click();
          $ele_a.remove();
          setTimeout(() => {
            copied = false;
            $ele_copy.innerText = "复制(copy)";
          }, 3000);
        });
      });
      $ele_ts_wrapper.appendChild($ele_copy);
      target.appendChild($ele_ts_wrapper);
    }

    function transApi2Typescript() {
      const ORIGIN = location.origin;
      const API_ID = location.pathname.split("/").pop();
      const url = `${ORIGIN}/api/interface/get?id=${API_ID}`;
      fetch(url)
        .then((res) => res.json())
        .then((data) => {
          if (data !== undefined) {
            const errCode = data.errcode;
            if (errCode === 0) {
              const resData = data.data;
              const query = resData.req_query;
              const body = resData.res_body;

              const query_ts = transQuery2Typescript(query);
              const $ele_query = document.querySelector(".colQuery");
              const $ele_body = document.querySelector(".caseContainer");

              generateTypescriptElement(
                $ele_query,
                JSON.stringify(query_ts, null, 4)
              );

              const body_ts = transBody2Typescript(body);
              generateTypescriptElement(
                $ele_body,
                JSON.stringify(body_ts, null, 4)
              );
            }
          }
        });
    }

    transApi2Typescript();

    window.addEventListener("popstate", function (event) {
      transApi2Typescript();
    });

    window.addEventListener("pushState", function (e) {
      transApi2Typescript();
    });

    window.addEventListener("replaceState", function (e) {
      transApi2Typescript();
    });
  };
})();