Javascript类型推断(1) - 获取token和类型

Javascript类型推断(1) - 获取token和类型

js类型推断的三种思路

第一种思路是用传统的编译类的方法，推断是没啥好办法，但是可以用来验证。
第二种思路是利用对象的属性或方法的调用来推断，JSNice就是这样做的。
第三种思路比较先进，充分利用到越来越流行的Typescript，通过学习Typescript生成的javascript进行监督学习。这种思路是Vincent J. Hellendoorn，Christian Bird，Earl T. Barr，Miltiadis Allamanis的论文《Deep Learning Type Inference》中提到的。

下载素材

既然是要落地了，我们就边做边说。
首先下载代码：git clone https://github.com/DeepTyper/DeepTyper.git

然后我们要下载一些Typescript工程做素材。作者们提供了一个cloner.sh。
为了方便Windows下的同学使用，我用Python将其改写一下：

import os
with open("./repo-SHAs.txt", "r") as fr:
    for line in fr:
        cmd1 = line.split()
        clone_cmd = 'git clone https://github.com/'+cmd1[0]+' ./Repos/'+cmd1[0]
        os.system(clone_cmd)
        checkout_cmd = 'git -C ./Repos/'+cmd1[0]+' reset --hard '+cmd1[1]
        os.system(checkout_cmd)

针对原作有一处修改是将git clone中的q选项去掉了，因为有几个工程是比较大的，需要下载一段时间，还是有个进度条看起来比较舒服。

在data/repo-SHAs.txt中，记录了github上托管的一些工程，和当时作者们所用的分支的SHA值。
我们看下前4行的内容：

0xProject/0x.js e25cc301fddbc67f793ca0eb0f7635cdb9147a71
0xProject/contracts d80460d94daf8725b0017ff40c81f02a9a8f7f89
1backend/1backend 29869b6b160feb764b5a4f9f1984a9d1db0bed80
2fd/graphdoc a5bbc7b601975b00ec83b781a6afe6014ebe171b

下载完成后，将data/Repos目录复制一份到data/Repos-cleaned下面。后面的处理要写数据都是在data/Repos-cleaned下面完成。

let repos = "data/Repos"
let cleaned = "data/Repos-cleaned";

读取token信息

下一步，我们调用CleanRepos.js来读这些工程中的类型信息，然后将其写到.ttokens文件中。如果是用户用注释方式描述的类型信息，则写到.ttokens.pure文件中

遍历ts和js文件

我们来读代码，第一段只是做个目录遍历，找到每一个工程后，调用traverse函数来处理。
org是一级目录，project是二级工程。
以“0xProject/0x.js”为例，0xProject就是org，而0x.js是project。
最后，由repos, org, project三级拼出每一个工程的完整的路径:

for (let org of fs.readdirSync( repos)) {
    for (let project of fs.readdirSync(repos + "/" + org)) {
        // This project stalls forever
        if (org == "SAP") continue
        let dir = repos + "/" + org + "/" + project;
        traverse(dir);
    }
}

我们知道，如果是ts工程，在根目录下会有一个tsconfig.json。所以我们到一个工程之后，首先去查找是否有tsconfig.json，如果有了。就去调用extractAlignedSequences去进行进一步的处理。

function traverse(dir) {
    var children = fs.readdirSync(dir);
    if (children.find(value => value == "tsconfig.json")) {
        print("Config in: " + dir);
        extractAlignedSequences(dir);
    }

extractAlignedSequences中，首先去调用walkSync从inputDirectory获取文件列表：

function extractAlignedSequences(inputDirectory) {
    const keywords = ["async", "await", "break", "continue", "class", "extends", "constructor", "super", "extends", "const", "let", "var", "debugger", "delete", "do", "while", "export", "import", "for", "each", "in", "of", "function", "return", "get", "set", "if", "else", "instanceof", "typeof", "null", "undefined", "switch", "case", "default", "this", "true", "false", "try", "catch", "finally", "void", "yield", "any", "boolean", "null", "never", "number", "string", "symbol", "undefined", "void", "as", "is", "enum", "type", "interface", "abstract", "implements", "static", "readonly", "private", "protected", "public", "declare", "module", "namespace", "require", "from", "of", "package"];
    let files = [];
    walkSync(inputDirectory, files);

walkSync的功能也非常简单，就是将非.git目录中小于1M的js和ts文件返回回来：

function walkSync(dir, filelist) {
    var fs = fs || require('fs'), files = fs.readdirSync(dir);
    filelist = filelist || [];
    files.forEach(function (file) {
        let fullPath = path.join(dir, file);
        print('fullPath=',fullPath)
        try {
            if (fs.statSync(fullPath).isDirectory()) {
                if (file != ".git")
                    filelist = walkSync(dir + '/' + file, filelist);
            }
            else if (file.endsWith('.js') || file.endsWith('.ts')) {
                if (fs.statSync(fullPath).size < 1*1000*1000)
                    filelist.push(fullPath);
            }
        }
        catch (e) {
            console.error("Error processing " + file);
        }
    });
    return filelist;
}

创建Type Checker

然后我们调用typescript去创建program和checker:

    let program = ts.createProgram(files, { target: ts.ScriptTarget.Latest, module: ts.ModuleKind.CommonJS, checkJs: true, allowJs: true });
    let checker = null;
    try {
        checker = program.getTypeChecker();
    }
    catch (err) {
        return null;
    }

下面我们还要将d.ts过滤掉：

    for (const sourceFile of program.getSourceFiles()) {
        let filename = sourceFile.getSourceFile().fileName;
        if (filename.endsWith('.d.ts'))
            continue;
        try {
            let relativePath = path.relative(inputDirectory, filename);
            if (relativePath.startsWith(".."))
                continue;

最后调用到对于token的处理逻辑extractTokens：

            let memS = [];
            let memT = [];
            let memP = [];
            extractTokens(sourceFile, checker, memS, memT, memP);

在extractTokens中，有两类标记是暂不进行处理的，一类是空白符，一类是模板：

var removableLexicalKinds = [
    ts.SyntaxKind.EndOfFileToken,
    ts.SyntaxKind.NewLineTrivia,
    ts.SyntaxKind.WhitespaceTrivia
];
var templateKinds = [
    ts.SyntaxKind.TemplateHead,
    ts.SyntaxKind.TemplateMiddle,
    ts.SyntaxKind.TemplateSpan,
    ts.SyntaxKind.TemplateTail,
    ts.SyntaxKind.TemplateExpression,
    ts.SyntaxKind.TaggedTemplateExpression,
    ts.SyntaxKind.FirstTemplateToken,
    ts.SyntaxKind.LastTemplateToken,
    ts.SyntaxKind.TemplateMiddle
];

如果是空白符和JSDoc，则continue:

function extractTokens(tree, checker, memS, memT, memP) {
    var justPopped = false;
    for (var i in tree.getChildren()) {
        //print('i='+i);
        var ix = parseInt(i);
        var child = tree.getChildren()[ix];
        if (removableLexicalKinds.indexOf(child.kind) != -1 ||
            ts.SyntaxKind[child.kind].indexOf("JSDoc") != -1) {
            continue;
        }

先看个例子

进入正式的逻辑之前，我们先看个例子增加一下感性认识。

我们先写一个一句话的typescript:

let a = 1;

这里面是5个token: let, a, = , 1, ;.

对应的.ttokens为：

O $number$ O O O

再来一个字符串的例子：

let s = "Hello";

对应的.ttokens为：

O $string$ O O O

我们再看一个打印日志的例子：

console.log(s);

上面是6个token，

$Console$ O $void$ O $string$ O O

log函数值得说一下，因为它的类型其实是：(message?: any, ...optionalParams: any[]) => void
返回void是代码中进行了处理。

我们再来看一个面向对象的例子：

class Test{
    public value : number;
    constructor(v: number){
        this.value = v;
    }
}
let t = new Test(1);

我们看下token和对应的类型：

class Test { public value : number ; constructor ( v ) { this . value = v ; } } let t = new Test ( 1 ) ;
O $any$ O O $number$ O O O O O $number$ O O O O $number$ O $number$ O O O O $Test$ O O $any$ O O O O

Test本身的类型是typeof Test。而在保存到.ttokens中时，按$any$做处理。

对照了例子后，下面的代码就容易理解了：

        if (child.getChildCount() == 0) {
            var source = child.getText();
            var target = "O";
            switch (child.kind) {
                case ts.SyntaxKind.Identifier:
                    try {
                        let symbol = checker.getSymbolAtLocation(child);
                        if (!symbol) {
                            target = "$any$"
                            break;
                        }
                        let type = checker.typeToString(checker.getTypeOfSymbolAtLocation(symbol, child));
                        if (checker.isUnknownSymbol(symbol) || type.startsWith("typeof"))
                            target = "$any$";
                        else if (type.startsWith("\""))
                            target = "O";
                        else if (type.match("[0-9]+"))
                            target = "O";
                        else
                            target = '$' + type + '$';
                        break;
                    }
                    catch (e) {
                        console.error(e);
                     }
                    break;

到这里，获取token部分和类型就基本上讲清楚了，细节可以对照完整代码再看一下。

参考文献

1. Hellendoorn, V. J., Bird, C., Barr, E. T., & Allamanis, M. (2018, October). Deep learning type inference. In Proceedings of the 2018 26th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering (pp. 152-162). ACM.