接口文档=>ts代码

接口文档=>ts代码，不能完美转化，但是还比较好用
换行
// ==UserScript==
// @name         接口文档=>ts代码
// @namespace    http://tampermonkey.net/
// @version      0.1.11
// @description  接口文档=>ts代码，不能完美转化，但是还比较好用
// @author       fangxianli
// @match        https://km.sankuai.com/*
// @icon         https://www.google.com/s2/favicons?domain=undefined.
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
const InterfaceModel = {
  // 字段名
  names: [/名称/, /参数/, /字段/, /属性/, /名字/, /name/i, /key/i],
  // 类型
  types: [/类型/, /type/i],
  // 含义
  means: [/含义/, /意义/, /意思/, /描述/, /解释/, /说明/, /备注/, /返回/, /mean/i],
  // 例子
  examples: [/示例/, /例子/, /举例/, /eg/i, /example/i]
}

// TODO： 做成可配置的
const TYPE_MAP = [
  {
    name: 'number',
    match: [
      /number/i,
      /int/i,
      /数字/,
      /integer/i,
      /float/i,
      /时间/,
      /date/i,
      /整数/,
      /整型/,
      // TODO: 长整型到底用不用字符串🤔，float 和 double 用字符串不
      /长整型/,
      /long/i,
      /float/i,
      /double/i,
    ]
  },
  {
    name: 'string',
    match: [
      /string/i,
      /字符/,
      /字符串/,
    ]
  },
  {
    name: 'boolean',
    match: [
      /Boolean/i,
      /布尔/,
    ]
  },
  {
    name: 'array',
    match: [
      /list<(\w+)>/i
    ]
  },
  {
    name: 'object',
    match: [
      /(\w+)/
    ]
  }
]

/**
 * 获取之前最邻近的文本内容
 * @param {Element} $currentNode
 */
const findPrevText = ($currentNode) => {
  if (!$currentNode) return
  if ($currentNode?.previousElementSibling?.innerText) return $currentNode?.previousElementSibling?.innerText
  return findPrevText($currentNode.parentElement)
}

/**
 * 深度优先遍历节点，获取树上最深的第一个文本节点
 * @param {Element} node
 */
const dfsFindText = (node) => {
  if (!node?.innerText) return
  if (!node?.children.length) return node.innerText
  for (let i = 0; i < node.children.length; i++) {
    const text = dfsFindText(node.children[i])
    if (text !== undefined) return text
  }
}

/**
 *
 * @param {Element} element
 */
const getContent = (element) => {
  if (!element) return
  const tableInTD = element.querySelectorAll('table')[0]
  if (tableInTD) return findPrevText(tableInTD)
  return element?.innerText?.trim()
}

const testInRegExpArray = (testStr, regExpArr = []) => regExpArr.some(regExp => regExp.test(testStr))

/**
 * 从表头里获取对应字段的位置
 * @param {String} name 字段名
 * @param {Element[]} headers 表头
 */
const getPropsIndex = (name, headers) => headers.findIndex(header => testInRegExpArray(header.innerText, InterfaceModel[name]))

/**
 * 将 table 中的数据转化为能够被识别的类型
 * @param {Element} table
 */
const convertTable2Map = (table) => {
  const prevText = findPrevText(table) || ''
  const charStringArray = prevText?.match(/\w+/g)
  const interfaceName = charStringArray ? charStringArray.join('-') : 'UnknownInterface'
  const typeModel = {
    name: interfaceName,
    defineList: [],
    table
  }
  const headers = [...table.querySelectorAll('th')]
  const nameIndex = getPropsIndex('names', headers)
  const typeIndex = getPropsIndex('types', headers)
  const meanIndex = getPropsIndex('means', headers)
  const exampleIndex = getPropsIndex('examples', headers)
  // 找到第一个 display 不为 none 的 body，即为数据表
  const targetTable = [...table.querySelectorAll('tbody')].find(tbody => tbody.style.display !== 'none')
  // 去除表头
  const rows = [...targetTable.children]
  rows.splice(0, 1)
  const defineList = rows.map((row) => {
    return {
    name: getContent(row.children[nameIndex]),
    type: getContent(row.children[typeIndex]),
    mean: getContent(row.children[meanIndex]),
    example: getContent(row.children[exampleIndex]),
  }})

  typeModel.defineList = defineList
  return typeModel
}

const addCommentPrefix = str => ` * ${str}`
const filterEmpty = arr => arr?.filter(x => x)

const preprocessCode2Arr = str => filterEmpty(str?.split('\n') || [])

const getComment = ({mean, example}) => {
  if (!mean && !example) return []
  const meanArr = preprocessCode2Arr(mean).map(addCommentPrefix) || []
  const exampleArr = preprocessCode2Arr(example).map(addCommentPrefix) || []
  if (exampleArr.length) {
    exampleArr.unshift(' * @example', ' * 示例：')
  }
  const comment = [
    `/**`,
    ...meanArr,
    ...exampleArr,
    ` */`
  ]
  return comment
}

const getTSTypeStr = (type) => {
  if (!type) return 'unknown'
  const tsTypeDesc = TYPE_MAP.find(typeMap => {
    return testInRegExpArray(type, typeMap.match)
  })
  const directReturnArr = ['number', 'string', 'boolean']
  const canDirectReturnName = directReturnArr.includes(tsTypeDesc?.name)
  const needMatch = tsTypeDesc?.name === 'array' || tsTypeDesc?.name === 'object'
  if (canDirectReturnName) return tsTypeDesc?.name
  if (needMatch) {
    for (const match of tsTypeDesc.match) {
      const matchResult = type.match(match)
      if (!matchResult?.[1]) continue
      if (tsTypeDesc.name === 'array') return matchResult[1] + '[]'
      return matchResult[1]
    }
  }
  return 'unknown'
}

const getNameDefine = ({name, type}) => {
  const typeStr = getTSTypeStr(type)
  return [`${name}: ${typeStr}`]
}

const addTab = str => `  ${str}`

const convertData2Code = ({name, defineList}) => {
  const getCode = (defineItem) => {
    return [...getComment(defineItem), ...getNameDefine(defineItem)]
  }

  const interfaceDefine = [
    `interface ${name} {`,
    ...defineList.map(getCode).flat(Infinity).map(addTab),
    `}`,
    ''
  ]
  return interfaceDefine
}

const getCode = () => {
  const allTables = document.querySelectorAll('table')
  /**
   * 筛选出接口定义的table
   */
  const defineTable = [...allTables].filter(table => {
    const headers = [...(table.querySelector('tr')?.children || [])]
    const tableRows = table.querySelectorAll('tr')
    const hasNameTableHeader = headers.some(header => testInRegExpArray(header.innerText, InterfaceModel.names))
    return hasNameTableHeader && tableRows.length > 1
  })

  const defineDataList = defineTable.map(convertTable2Map)
  console.log({defineDataList})
  const codeArray = defineDataList.map(convertData2Code)
  console.log(codeArray)
  return codeArray
}

const copyCode = () => {
  const codeArray = getCode()
  const textArea = document.createElement('textarea')
  textArea.value = codeArray.flat(Infinity).join('\n')
  document.body.append(textArea)
  textArea.select()
  document.execCommand('copy')
  // document.body.remove(textArea)
  textArea.style.display = 'none'
}

const logShortKey = () => console.log("%c  试试快捷键[ ⇧ + ⌃ + ⌥ + j] (shift + ctrl + option + j) 将接口文档转化成 ts 代码吧",
  `color: #333;
  font-size: 16px;
  background-image: linear-gradient(to right, #4facfe, #00f2fe);
  padding: 4px;
  border-radius: 20px;`
)

const logFeedback = () => console.log("%c  使用中遇到问题请点击右侧链接联系: https://x.sankuai.com/bridge/chat?uid=1833639275",
  `color: #333;
  font-size: 16px;
  background-image: linear-gradient(to right, #4facfe, #00f2fe);
  padding: 4px;
  border-radius: 20px;`
)

setTimeout(() => {
  logShortKey()
  logFeedback()
}, 1000)

document.addEventListener('keypress', (event) => {
  if (event.code === 'KeyJ' && event.shiftKey && event.altKey && event.ctrlKey) {
    try {
      copyCode()
      alert('转换代码复制成功，快去粘贴吧')
    } catch (err) {
      console.error(err)
    }
    logFeedback()
  }
})

// Your code here...
})();
欢迎访问Greasy Fork镜像
