Javascript类型推断(1) - 获取token和类型-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: Javascript类型推断(1) - 获取token和类型 ## js类型推断的三种思路 第一种思路是用传统的编译类的方法,推断是没啥好办法,但是可以用来验证。 第二种思路是利用对象的属性或方法的调用来推断,JSNice就是这样做的。 第三种思路比较先进,充分利用到越来越流行的Typescript,通过学习Typescript生成的javascript进行监督学习。这种思路是Vi

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.

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章