模块管理
命名空间
typescript 像其他语言一样存在命名空间(namespace)的概念。 当我们在一个作用域下定义同名变量是不允许的,这样的情况可以采用命名空间来解决
ts
let name = "John";
let name = "Jane";
下面使用命名空间将变量隔离
- 数据需要使用 export 导出才可以使用
- 子命名空间也需要 export 后才可以使用
ts
namespace User {
export let name = "John";
}
namespace Member {
let name = "Jane";
}
console.log(User.name); // "John"
console.log(Member.name); // 报错,这里需要使用export 将变量导出
命名空间支持嵌套
ts
namespace User {
export let name = "John";
export namespace Info {
export let name = "John message";
}
}
console.log(User.name); // "John"
console.log(User.Info.name); // "John message"
单独编译
shell
tsc -w
编译成 js 文件之后在引入 html
合并打包
下面将多个文件合并成一个文件
shell
tsc --outFile ./dist/app.js user.ts app.ts
reference
如果存在多个文件都像上面一样在命令行填写,显然是很麻烦了。我们可以使用以下方法优化
在 index.ts 中使用 reference 引入依赖的文件
ts
/// <reference path="user.ts"/>
console.log(User.name);
然后使用下面的命令编译到一个文件中
shell
tsc --outFile ./dist/app.js index.ts
然后访问 test.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>test title</title>
<script src="dist/app.js" defer></script>
</head>
<body></body>
</html>
amd 与 requirejs
import 与 require