【TypeScript入门】TypeScript入门篇——模块

        TypeScript 模块的设计理念是可以更换的组织代码。模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

        模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。此外还有有 SystemJs 和 Webpack。


一、使用模块

二、不必要的命名空间

三、模块的取舍


一、使用模块

        像命名空间一样,模块可以包含代码和声明。 不同的是模块可以 声明它的依赖。模块会把依赖添加到模块加载器上(例如CommonJs / Require.js)。 对于小型的JS应用来说可能没必要,但是对于大型应用,这一点点的花费会带来长久的模块化和可维护性上的便利。 模块也提供了更好的代码重用,更强的封闭性以及更好的使用工具进行优化。对于Node.js应用来说,模块是默认并推荐的组织代码的方式。

        从ECMAScript 2015开始,模块成为了语言内置的部分,应该会被所有正常的解释引擎所支持。 因此,对于新项目来说推荐使用模块做为组织代码的方式。

        模块导出使用关键字 export 关键字,语法格式如下:

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入: 

import someInterfaceRef = require("./SomeInterface"); 

二、不必要的命名空间

        如果你想把命名空间转换为模块,它可能会像下面这个文件一件:

shapes.ts
export namespace Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

        顶层的模块Shapes包裹了TriangleSquare。 对于使用它的人来说这是令人迷惑和讨厌的:

shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle(); // shapes.Shapes?

        TypeScript里模块的一个特点是不同的模块永远也不会在相同的作用域内使用相同的名字。 因为使用模块的人会为它们命名,所以完全没有必要把导出的符号包裹在一个命名空间里。再次重申,不应该对模块使用命名空间,使用命名空间是为了提供逻辑分组和避免命名冲突。 模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。

改进方法:

shapes.ts
export class Triangle { /* ... */ }
export class Square { /* ... */ }
shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Triangle();

三、模块的取舍

        就像每个JS文件对应一个模块一样,TypeScript里模块文件与生成的JS文件也是一一对应的。 这会产生一种影响,根据你指定的目标模块系统的不同,你可能无法连接多个模块源文件。 例如当目标模块系统为 commonjsumd时,无法使用outFile选项,但是在TypeScript 1.8以上的版本能够使用outFile当目标为amdsystem

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
对于 TypeScript入门,我可以给你一些指导。 TypeScript 是一种由 Microsoft 开发的开源编程语言,它是 JavaScript 的一个超集,添加了类型系统和一些其他功能。它可以帮助开发者在大型项目中更好地管理代码,并提供更好的开发工具支持。 以下是一些入门步骤: 1. 安装 TypeScript:首先,你需要在你的计算机上安装 TypeScript。你可以通过 npm(Node 包管理器)进行安装。运行以下命令: ``` npm install -g typescript ``` 2. 创建 TypeScript 文件:创建一个新的文件,使用 `.ts` 后缀作为文件扩展名。例如,你可以创建一个名为 `hello.ts` 的文件。 3. 编写 TypeScript 代码:在 `hello.ts` 文件中写入你的 TypeScript 代码。TypeScript 代码与 JavaScript 代码非常相似,但你可以为变量、函数和参数指定类型。例如,你可以创建一个简单的函数来打印一条消息: ```typescript function sayHello(name: string) { console.log("Hello, " + name); } sayHello("TypeScript"); ``` 4. 编译 TypeScript 代码:在终端中,使用以下命令将 TypeScript 代码编译为 JavaScript 代码: ``` tsc hello.ts ``` 这将生成一个名为 `hello.js` 的 JavaScript 文件。 5. 运行 JavaScript 代码:现在,你可以在终端中运行生成的 JavaScript 文件: ``` node hello.js ``` 你应该会看到输出结果为 "Hello, TypeScript"。 这只是 TypeScript 的基本入门,但它可以帮助你开始学习和使用 TypeScript。你还可以深入了解类型注解、接口、类等 TypeScript 的高级特性。同时,与 JavaScript 生态系统的其他工具和框架(如 React、Node.js 等)结合使用 TypeScript,可以提高开发效率和代码质量。 希望这些信息对你有帮助!如果你有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肩匣与橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值