解析TypeScript以生成简单的调用图

Question

我不太确定从哪里开始，所以我正在寻找如何开始的指针。如果这不是此类问题的正确答案，请告诉我，谢谢^^

我想可视化swimlanes.io中的呼叫列表，因此我认为解析器将帮助我实现此过程的自动化：

示例输入：

const removeKey = (key: string, { [key]: _, ...rest }: any) => rest;

export const expandedOutput = (array: any[]) => {
  return array.reduce(function(r, o, i) {
    Object.keys(o).forEach(function(k) {
      r[k] = r[k] || [];
      r[k][i] = o[k];
    });
    return r;
  }, {});
};

export const previewQuery = (table: string, lines: number) => `
select * from ${table} limit ${lines};
`;

const id = 'test';

const [preview] = await bigquery.query(previewQuery(id, 3));

console.table(removeKey('created_at', expandedOutput(preview)));

所需输出：

（[https://swimlanes.io/d/JXXXMC0YF）

previewQuery -> previewQuery: table: string
note:
'test'

previewQuery -> previewQuery: lines: number
note:
3

previewQuery -> bigquery.query: query: string
note: 
=> \`
select * from ${table} limit ${lines};
\`

bigquery.query -> [preview]: PagedResponse<any, Query, bigquery.ITableDataList>

[preview] -> expandedOutput: array: any[]

removeKey -> removeKey: key: string
note:
'created_at'

expandedOutput -> removeKey: { [key]: _, ...rest }: any
note:
=> {
  return array.reduce(function(r, o, i) {
    Object.keys(o).forEach(function(k) {
      r[k] = r[k] || [];
      r[k][i] = o[k];
    });
    return r;
  }, {});
}

removeKey -> console.table: (key: string, { [key]: _, ...rest }: any)
note:
=> rest

令我惊讶的是，现在还没有这样的工具，但也许我会不知所措...

1. 我希望能够解析一个打字稿文件，但还包括其他模块中的所有调用函数。我是否需要写一些看起来像“摇树”的东西？

2. 我不确定在我的示例中如何处理函数内部的内容，例如expandedOutput（）...对我而言，整个过程的重点主要在于查看函数之间的连接，因此我不太担心关于功能内部。忽略它们就可以了

3. 如果能弄清楚如何读取*.ts.d声明文件中的隐式类型或类型，例如VS Code如何在我的示例中提取“ PagedResponse”，那将很酷...您做了多少工作？认为会是这样吗？如果仅包含显式类型，可能会更容易

嗯，也许我可以使用typescript-estree

我不太确定从哪里开始，所以我正在寻找一些入门指南。如果这不是此类问题的正确答案，请告诉我，谢谢^^，我想将...

Answer 1

我正在构建一种工具，用于从TypeScript文件生成功能

的图形：