Typescript Modules

本文介绍了TypeScript中的模块概念,包括全局命名空间的问题及其潜在风险,并详细解释了如何使用文件模块来避免命名冲突,确保代码更加健壮。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


原文链接: https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

Modules

Global Module

By default when you start typing code in a new TypeScript file your code is in a global namespace. As a demo consider a file foo.ts:

var foo = 123;

If you now create a new file bar.ts in the same project, you will be allowed by the TypeScript type system to use the variable foo as if it was available globally:

var bar = foo; // allowed

Needless to say having a global namespace is dangerous as it opens your code up for naming conflicts. We recommend using file modules which are presented next.

File Module

Also called external modules. If you have an import or an export at the root level of a TypeScript file then it creates a local scope within that file. So if we were to change the previous foo.ts to the following (note the export usage):

export var foo = 123;

We will no longer have foo in the global namespace. This can be demonstrated by creating a new file bar.ts as follows:

var bar = foo; // ERROR: "cannot find name 'foo'"

If you want to use stuff from foo.ts in bar.ts you need to explicitly import it. This is shown in an updated bar.ts below:

import {foo} from "./foo";
var bar = foo; // allowed

Using an import in bar.ts not only allows you to bring in stuff from other files, but also marks the file foo.ts as a module and therefore foo.ts doesn't pollute the global namespace either.

What JavaScript is generated from a given TypeScript file that uses external modules is driven by the compiler flag called module.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值