时间戳

首页 > 解决方案 > 如何在纯 javascript 中访问 typescript 模块？

typescript - 如何在纯 javascript 中访问 typescript 模块？

问题描述

可能做错了，因为我是打字稿的新手，但我创建了一个模块，我认为从整天看教程，让我创建 C# 中的一个类，我这样做是这样的：

export default class MyClass {

}

现在，我的理解是，要在 typescript 中创建此类的新实例，我会这样做：

import t from './MyClass';
var something = new t();

但是，在我的情况下，我的文件是 js 文件，而不是 ts 文件，因为我需要在 html 页面的底部进行。

但是我不知道怎么做，因为这样做new Myclass()给了我一个未定义的错误。

尽管看了几个教程，但我在导入和导出的概念上苦苦挣扎，所以我可能做错了，但我只想创建一个干净的项目，它让 mt 相信这是做到这一点的方法。

我还应该补充一点，我必须像这样添加我的模块：

<script type="module" src="~/Scripts/Proj/MyClass.js"></script>

我以前从未使用type="module"过，没有它就无法工作，我在随机的 SO 帖子上找到了它。

有什么建议吗？

标签： typescript

解决方案

我不知道全局脚本访问模块的任何方式。相反，您需要编写一个模块，将您希望在全局脚本中使用的所有内容复制到全局变量（即窗口的属性）中。MyClass.ts如果您愿意（为了简单起见，我会这样做），您可以直接在其中执行此操作，也可以在单独的模块中执行此操作。

第二个问题是模块总是被延迟的，所以为了让你的全局脚本在模块之后运行，你需要使用这个问题中的一种技术来延迟你的全局脚本。

工作示例：

索引.html：

<html>
<body>
<script type="module" src="./MyClass.js"></script>
<script defer src="global.js"></script>
</body>
</html>

MyClass.ts：

export default class MyClass {

}
(<any>window).MyClass = MyClass;

全球.js：

console.log(new MyClass());

简单的全局 TypeScript 脚本示例

MyClass.ts：

class MyClass {}

索引.html：

<html>
<body>
<script src="MyClass.js"></script>
<script>
console.log(new MyClass());
</script>
</body>
</html>

带有 TypeScript 命名空间的示例

MyClass.ts：

namespace MyNamespace {
  export class MyClass {}
}

索引.html：

<html>
<body>
<script src="MyClass.js"></script>
<script>
console.log(new MyNamespace.MyClass());
</script>
</body>
</html>

推荐阅读