hxDocs

Appearance

模块管理 ​

上次更新 2024年10月11日星期五 1:53:42 字数 0 字 时长 0 分钟

命名空间 ​

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

Copyright © 2019-present Haixin Yang