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 Olog函数值得说一下，因为它的类型其实是：(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 OTest本身的类型是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部分和类型就基本上讲清楚了，细节可以对照完整代码再看一下。
参考文献
- 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.
