Json2Typescript

yapi接口Json转typescript

Устаревшая версия за 23.04.2022. Перейдите к последней версии.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==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();
    });
  };
})();