【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲

简介: 【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲



第五弹:TypeScript 模块

5.1 模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 importexport 建立的。

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

此外还有有 SystemJsWebpack

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

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

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

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

5.1.1 实例

5.1.1.1 IShape.ts 文件代码:
//
/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}
5.1.1.2 Circle.ts 文件代码:
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}
5.1.1.3 Triangle.ts 文件代码:
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
5.1.1.4 TestShape.ts 文件代码:
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
 
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
 
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

使用 tsc 命令编译以上代码(AMD):

tsc --module amd TestShape.ts

得到以下 JavaScript 代码:

5.1.1.5 IShape.js 文件代码:
define(["require", "exports"], function (require, exports) {
});
5.1.1.6 Circle.js 文件代码:
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});
5.1.1.7 Triangle.js 文件代码:
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});
5.1.1.8 TestShape.js 文件代码:
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

使用 tsc 命令编译以上代码(Commonjs):

tsc --module commonjs TestShape.ts

得到以下 JavaScript 代码:

5.1.1.9 Circle.js 文件代码:
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();
 
exports.Circle = Circle;
5.1.1.10 Triangle.js 文件代码:
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;
5.1.1.11 TestShape.js 文件代码:
var circle = require("./Circle");
var triangle = require("./Triangle");
 
function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

输出结果为:

Cirlce is drawn (external module) Triangle is drawn (external module)



欢迎添加微信,加入我的核心小队,请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

目录
相关文章
|
28天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
56 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
28天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
44 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
1月前
|
IDE 开发工具
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
本文介绍了如何使用 Flutter SDK 3.22.0 搭建鸿蒙开发环境。首先安装 Flutter SDK 3.22.0,并通过 FVM 管理多个版本。接着配置项目,使用 `fvm use custom_3.22.0` 设置自定义 SDK 版本。添加鸿蒙平台支持并进行项目签名,最后通过 `fvm flutter run` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
83 7
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
|
13天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
36 4
|
1月前
|
缓存 前端开发 API
鸿蒙应用开发:下载功能
鸿蒙应用开发:下载功能
111 1
|
1月前
|
UED
<大厂实战经验> Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析
在 Flutter 开发中,处理异步请求是常见需求。本文详细介绍了如何在 `initState` 中触发异步请求,并使用 `mounted` 属性确保在适当时机更新 UI。通过示例代码,展示了如何安全地进行异步操作和处理异常,避免在组件卸载后更新 UI 的问题。希望本文能帮助你更好地理解和应用 Flutter 中的异步处理。
65 3
|
1月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
106 1
|
2月前
|
存储 开发工具 开发者
紧跟科技潮流,揭秘鸿蒙应用开发新世界:打造全场景智慧生活,你准备好迎接这场技术革命了吗?
【10月更文挑战第20天】随着华为鸿蒙系统的发布,一个全新的操作系统生态正在形成。本文将探讨基于鸿蒙系统的应用软件开发,介绍其跨设备特性、开发工具链及框架,并通过示例代码展示开发流程,帮助开发者更好地理解和利用这一平台。
41 4
|
1月前
|
移动开发 资源调度 IDE
鸿蒙Taro实战:01-搭建开发环境
本文介绍了如何使用 Taro 4.x 框架搭建鸿蒙应用开发环境。主要内容包括:下载并配置 DevEco IDE,创建鸿蒙项目,安装 Taro 4.x,初始化 Taro 项目,配置鸿蒙插件和编译配置,修改 `package.json`,运行 Taro 和鸿蒙项目。通过本文,读者可以快速上手鸿蒙应用开发。
|
1月前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
126 0