代码之家 › 专栏 › 技术社区 › AWhitford

如何使用TypeScript Playground导入库

typescript-playground typescript

AWhitford · 技术社区 · 4 年前

TypeScript Playground 似乎并不反对这种进口:

import * as _ from "underscore";

直到你尝试使用它,比如:

const equalResult = _.isEqual('ABC', '123');

然后,它会生成错误:

[ERR]: Executed JavaScript Failed:
[ERR]: Cannot use import statement outside a module

操场似乎理解这个库,因为它提供了JSDoc,所以我认为这可以工作,但如何工作呢?

0 回复 | 直到 4 年前

mekwall 3 年前

TypeScript Playground不是一个成熟的沙盒解决方案。它只是作为一个不需要依赖关系的简单类型浏览器。

对于您的用例,我建议使用 CodeSandbox 相反。在创建沙盒时,它附带了一大堆TypeScript模板可供选择。TypeScript Playground还有一个导出菜单,您可以直接在CodeSandbox中打开代码。

UI是基于VS Code的,所以如果你习惯了,你会有宾至如归的感觉。

Connor Low Porkopek 3 年前

如果“导入”是指使用 import 不幸的是,包含一个可以在运行时访问的npm包,这不是TypeScript Playground的一个功能;它旨在测试语言和编译器的特性。

如果你想包含npm包、打包器等,你需要使用沙盒环境。;结账 CodeSandbox 正如其他人所建议的那样。

关于您的特定错误:

[ERR]: Executed JavaScript Failed:
[ERR]: Cannot use import statement outside a module

这是由于您当前的配置,而不是TypeScript Playground缺乏包支持。默认情况下,您的 .js 输出可能看起来像这样:

import * as _ from "underscore";
const equalResult = _.isEqual('ABC', '123');

这是因为默认 module 游乐场中的设置设置为 ESNext .

如果我们将其更改为 CommonJS 例如,我们得到:

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? 

// A bunch more lines .....

const _ = __importStar(require("underscore"));
const equalResult = _.isEqual('ABC', '123');

现在我们得到另一个错误,告诉我们的程序包不可用:

[ERR]: "Executed JavaScript Failed:" 
[ERR]: Check dependency list! Synchronous require cannot resolve module 'underscore'. 
       This is the first mention of this module!

虽然游乐场足够智能,可以自动导入以下类型 进口 语句,它不支持除此之外的外部模块。

Rachel McCluskie 4 年前

我来到这里试图解决同样的问题,然后继续挖掘,这是我想出的最好的解决方案:

如果你去 https://jsfiddle.net/ ,您可以选择“Typescript”作为您的语言,选择“underlight.js”作为库,它应该创建一个与游乐场类似的环境。可以通过单击JFiddle网站中JS文本框上方的语言类型来选择语言和库。

这并不能回答你最初的问题,但对某人来说可能是一个可行的解决方案。