如何在浏览器中使用TypeScript编译器?

时间:2019-12-29 18:26:12

标签: typescript typescript-compiler-api

我正在尝试在浏览器(例如Chrome)中使用TypeScript编译器:

import * as ts from "typescript";

[...]

const host = ts.createCompilerHost(options);

[...]

上面的代码失败,因为createCompilerHost内部引用了ts.sys(未定义)。

如何确保ts.sys存在?我可以自己模仿吗?分配ts.sys(ts.sys = ...)失败,因为它是只读的。

1 个答案:

答案 0 :(得分:2)

这可以通过创建自己的ts.CompilerHost实现来实现:

const compilerHost: ts.CompilerHost = {
    getSourceFile: (fileName: string, languageVersion: ts.ScriptTarget, onError?: (message: string) => void) => {
        // you will need to implement a way to get source files here
    },
    getDefaultLibFileName: (defaultLibOptions: ts.CompilerOptions) => "/" + ts.getDefaultLibFileName(defaultLibOptions),
    writeFile: () => {}, // do nothing
    getCurrentDirectory: () => "/",
    getDirectories: (path: string) => [],
    fileExists: (fileName: string) => { /* implement this */ },
    readFile: (fileName: string) => { /* implement this */ },
    getCanonicalFileName: (fileName: string) => fileName,
    useCaseSensitiveFileNames: () => true,
    getNewLine: () => "\n",
    getEnvironmentVariable: () => "" // do nothing
};

使用我的库@ts-morph/bootstrap可能会更容易,因为它应该可以在浏览器中工作并为您加载所有lib声明文件...如果不起作用,请告诉我有关回购。要在网络上使用它,只需指定使用内存文件系统即可:

import { Project, ts } from "@ts-morph/bootstrap";

const project = new Project({ useInMemoryFileSystem: true });
// use project here...