TypeScript入门-模块

econi 发布于2019-08-20 15:35 / 2435人阅读

摘要：模块模块是自声明的，两个模块之间的关系是通过在文件级别上使用和来建立的。类似地，我们必须通过导入其他模块导出的变量函数类等。模块使用模块加载器去导入它的依赖，模块加载器在代码运行时会查找并加载模块间的所有依赖。

学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。

模块

模块是自声明的，两个模块之间的关系是通过在文件级别上使用 import 和 export 来建立的。TypeScript 和 ES6 一样，任何包含顶级 import 或者 export 的文件都会被当成一个模块。

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

模块使用模块加载器去导入它的依赖，模块加载器在代码运行时会查找并加载模块间的所有依赖。常用的模块加载器有 SystemJs 和 Webpack。

模块导出方式

模块可以通过导出方式来提供变量、函数、类、类型别名、接口等给外部模块调用，导出的方式分为以下三种：

导出声明

任何模块都能够通过 export 关键字来导出，示例代码如下：

export const COMPANY = "EG";    // 导出变量

export interface IdentiryValidate {    // 导出接口
    isValidate(s: string): boolean;    
}

export class ErpIdentityValidate implements IdentiryValidate {    // 导出类
     isValidate(s: string) {
         return true;
     }
}

导出语句

有时我们需要对导出的模块进行重命名，这个时候就用到了导出语句，示例代码如下：

export class ErpIdentityValidate implements IdentiryValidate {    // 导出类
     isValidate(s: string) {
         return true;
     }
}

export { ErpIdentityValidate }
export { ErpIdentityValidate as EGIdentityValidate };    // 重命名

模块包装

有时候我们需要修改和扩展已有的模块，并导出供其他模块调用，这时，可以时候模块包装来再次导出，我看到别的文章将其称为 “重新导出” 。示例代码如下：

export { ErpIdentityValidate as EGIdentityValidate } from "./ErpIdentityValidate";

一个模块可以包裹多个模块，并把新的内容以一个新的模块导出，示例代码如下：

export * from "./IdentiryValidate";
export * from "./ErpIdentityValidate";

模块导入方式

模块导入与模块导出相对应，可以使用 import 关键字来导入当前模块依赖的外部模块。导入方式有如下几种：

导入一个模块

import { ErpIdentityValidate } from "./ErpIdentityValidate";
let erpValide = new ErpIdentityValidate();

别名导入

import { ErpIdentityValidate as ER} from "./ErpIdentityValidate";
let erpValide = new ERP ();

另外，我们也可以对整个模块进行别名导入，将整个模块导入到一个变量，并通过这个变量来访问模块的导出部分，实例代码如下：

import * as validator from "./ErpIdentityValidate";
let myValidate = new validator.ErpIdentityValidate();

模块的默认导出

模块可以用 default 关键字实现默认导出的功能，每个模块可以有一个默认导出。类和 函数声明 可以直接省略导出名来实现默认导出。默认导出有利于减少调用方调用模块的层数，省去一些冗余的模块前缀书写，示例代码如下：

默认导出类

// ErpIdentityValidate.ts
export default class ErpIdentityValidate implements IdentiryValidate {
     isValidate(s: string) {
         return true;
     }
}

// test.ts
import validator from "./ErpIdentityValidate";
let erp = new validator();

默认导出函数

// nameServiceValidate.ts
export default function(s: string){
    return true;    // 具体代码略
}

// test.ts
import validate from "./nameServiceValidate";
let name = "Angular";

// 使用导出函数
console.log(`"${name}" ${validate(name)? " matches": " does not matches"}`);

默认导出值

// constantService.ts
export default "Angular";

// test.ts
import name form "./constantService";
console.log(name);

模块设计原则

在模块设计中，公共遵循一些原则有利于更好地编写和维护项目代码，下面列出几点模块设计的原则

1.尽可能的在顶层导出

2.明确地列出导入的名字

import {ClassTest, FuncTest} from "./ModuleTest";

3.使用命名空间模式导出

// MyLargeModule.ts
export class Dog {}
export class Cat {}
export class Tree {}

// test.ts
import * as myLargeModule from "./MyLargeModule";
let x = new myLargeModule.Dog();

3.使用模块包装进行扩展

我们可能经常需要去扩展一个模块的功能，推荐的方案是不要去改变原来的对象，而是导出一个新的对象来提供新的功能，示例代码如下：

// ModuleA.ts
export class ModuleA {
    constructor(){/*... */}
    sayHello() {/*... */}
}

// ModuleB.ts
import { ModuleA } from "./ModuleA";
class ModuleB extends ModuleA {
    constructor(){super(); /*... */}
    // 添加新方法
    sayHi() {/*... */}
}
export { ModuleB as ModuleA }

// Test.ts
import { ModuleA } from "./ModuleB";
let C = new ModuleA();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82357.html

TypeScript快速入门

摘要：添加了可选的静态类型注意并不是强类型和基于类的面向对象编程。类类型接口示例接口更注重功能的设计，抽象类更注重结构内容的体现模块中引入了模块的概念，在中也支持模块的使用。一：Typescript简介维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delp...

moven_j 2019-08-22 11:11 评论0 收藏0
TypeScript入门-接口

摘要：接口类型检查不会去检查属性顺序，但是属性的必须存在且类型匹配。函数的返回值函数的返回值类型必须与接口定义的返回值保持一致。示例代码如下张三李四张三输出张三输出张三索引签名支持字符串和数字两种数据类型。学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更有利...

sewerganger 2019-08-21 15:32 评论0 收藏0
JavaScript => TypeScript 类入门

摘要：静态属性静态方法目前支持静态方法表示，类属性及静态属性目前作为提案还未正式成为标准。在中，抽象类不能用来实例化对象，主要做为其它派生类的基类使用。不同于接口，抽象类可以包含成员的实现细节。中也是这样规定的抽象类不允许直接被实例化。尝试重写在此之前，通过《JavaScript => TypeScript 入门》已经掌握了类型声明的写法。原以为凭着那一条无往不利的规则，就可以开开心心的...

geekidentity 2019-08-21 17:44 评论0 收藏0
TypeScript极速完全入门-3ts结合react进行项目开发

摘要：前面我们已经说了大部分的核心内容，接下来我们就说说如何用开发实际项目。因为和结合很紧密，资料也很多，而且我会找机会专门说下这方面的知识，所以我们将重点放到如何用结合上来。所以前面打牢基础，现在我们开始实际组建工作流。前面我们已经说了大部分typescript的核心内容，接下来我们就说说如何用typescript开发实际项目。因为angular和typescript结合很紧密，资料也...

arashicage 2019-08-22 16:45 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0