javascript - 如何使用 Typescript 模块

Question

我在理解如何正确创建 typescript 模块方面遇到了一些困难。

我想要实现的是每个文件 1 个模块，并且没有变量泄漏到全局范围内。

例如，如果我有一个名为“shoppingCart.js”的 js 文件，其中包含一个名为“addItem()”的函数，我希望只能通过“shoppingCart.addItem()”访问 addItem。

我可以通过创建 shoppingCart.js 并将 addItem() 函数放入其中来实现此目的，但乍一看，addItem() 函数似乎是全局范围的。

如果我将 shoppingCart.js 的内容包装在一个名为“shoppingCart”的模块中，看起来我得到了我想要的封装，但是，当我导入该模块时，就像我必须双重命名它，例如:

从'./shoppingCart'导入shoppingCartshoppingCart.shoppingCart.addItem()

我知道我可以将 import 语句上的变量更改为其他内容，但我不想这样做，我只想输入“shoppingCart”。并可以访问它的所有导出函数类和变量。

我是否应该使用“module”关键字？我想在模块的根部使用“模块”，并且仅使用类作为对象容器(在适当的情况下可能还使用高度相关的函数)。

我的 tsconfig.json 有以下感兴趣的属性:

"target": "es5",
"module": "commonjs",
"moduleResolution": "node"

我不确定这是否有什么不同，但我允许 Visual Studio 2015 将 .ts 文件转换为 .js 文件，然后使用 browserify 和 gulp 构建过程，将它们全部连接到一个文件中.

Answer 1

简而言之。

我假设您所做的只是使用全局函数导出整个文件。例如，当您应该使用类并根据您想要公开的内容创建函数时:

购物车.ts

export class ShoppingCart {
   private _cartNum: number;

   constructor(){
      this._cartNum = 1;
   }

   public class getCartNum(){
       return this._cartnum;
   }
}

该类现在可以按如下方式使用:

cartCaller.ts

 import {ShoppingCart} from './shoppingCart';

 const cart: any = new ShoppingCart();
 console.log('You have : ' + cart.getCartNum() +  ' carts');

希望这能回答您的问题。

--编辑:这可能有助于更详细地理解 ts 中的模块。

How do I use namespaces with TypeScript external modules?