【typescript进阶篇】(第二章) 模块与命名空间

TS中的模块

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

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

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

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

ts 复制代码

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

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

ts 复制代码

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

typescript 复制代码

// moduleTest.ts中的代码
export interface Iperson {
  name: string;
  age: number;
  sex: string;
  show(): void;
}

export const obj = {
  name: "陈都灵"
}

typescript 复制代码

// JS中的模块
/*
1.默认导入与导出
// 注意点: 这里导入和导出的名字，可以不一致
export default xxx
import ooo from "路径"
*/

/* 
1.按需导入与导出
注意点: 这里导入和导出的名字必须一致
export xxx;
import {xxx} from "路径"
*/

// node中的模块
/* 
1.exports.xxx = xxx
const xxx = require("path");
const {xx, xx} = require("path");

2.module.exports.xxx = xxx
const xxx = require("path");
const {xx, xx} = require("path");
*/

// 3.TS中的模块
// 默认在JS中是不兼容上面两种混合使用的，而JS中兼容混合写法
import Test = require("./moduleTest")

export class UserInfo implements Test.Iperson { 
  name = "高圆圆";
  age = 18;
  sex = "女";
  show() {
    console.log("你好");
    
  }
}

let u = new UserInfo();
console.log(u.name);


import { obj } from "./moduleTest";
console.log(obj);

TS中的命名空间

项目开发过程中，我们会发现我们的命名是有严格规范的，我们不能随意的去起名字，但若是都采用尽量标准化的方式去命名，我们又无法避免的会造成污染，TypeScript提供了namespace 避免这个问题出现

在TS1.5之前被叫做内部模块，主要用于组织代码，避免命名冲突
本质就是定义一个大对象, 把变量/方法/类/接口...的都放里面
通过 export 导出
通过 namespace 定义

typescript 复制代码

namespace A {
  export const a = 100;
}

console.log(A.a);

// 嵌套命名空间
namespace B {
  export const b = 200;
  export namespace C {
    // export const b = 300;
    export const c = 300;
  }
}

console.log(B.b);
// console.log(B.C.b);
console.log(B.C.c);

// 简化命名空间
import c = B.C.c
console.log(c);


// namespaceTest.ts内容
export namespace D {
    export const d = 1000;
}    
// 主文件
// 从其他文件引入命名空间
import { D } from "./namespaceTest";
console.log(D.d);

三斜杠语法

三斜线指令是包含单个XML标签的单行注释。注释的内容会做为编译器指令使用。

如果一个命名空间在一个单独的 TypeScript 文件中，则最应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "xxx.ts" />

typescript 复制代码

// namespaceTest2.ts
namespace  User{ 
  export interface IName { 
      uname: string;
  }
}
    
namespace User {
  export namespace UserInfo {
    export interface IName {
      uname: string;
    }
  }
}    
    
    
// index.ts
/// <reference path = "./namespaceTest2.ts" /> 


const a: User.IName = {
  uname:  "万茜"
}


const a: User.UserInfo.IName = {
  uname:  "万茜"
}

console.log(a);

声明合并

接口的合并

注意点: 1.如果名字一样会进行合并 2.如果里面出现了同名函数，则会转化为函数重载
命名空间合并

注意点: 1.与接口一样,若名称相同则会进行合并 2.同名的命名空间中不能出现同名的变量,方法等 3.命名空间还可以和同名的类/函数/枚举合并:
命名空间与类合并:

1.say会被放在 prototype上 2.类必须定义在命名空间的前面
命名空间和函数合并：函数必须定义在命名空间的前面
命名空间和枚举合并：没有先后顺序的要求

typescript 复制代码

// 1.接口

// interface ITestInterface {
//     name:string;
// }
// interface ITestInterface {
//     age:number;
// }

// class Person implements ITestInterface{
//     name:string = "文咏珊";
//     age:number = 18;

// }

interface ITestInterface {
  show(value: number): number;
}
interface ITestInterface {
  show(value: string): number;
}

const func: ITestInterface = {
  show(value: any): number {
    if (typeof value === "string") {
      return value.length;
    } else {
      return value.toFixed();
    }
  },
};
console.log(func.show("世界上最遥远的距离就是,你是if而我是else, 似乎一直相伴但又永远相离"));
console.log(func.show("世界上最痴心的等待,是我当case而你当switch,或许永远都选不上自己"));
console.log(func.show("世界上最真情的相依,是你在try我在catch。无论你发神马脾气,我都默默承受,静静处理。到那时,再来期待我们的finally"));
console.log(func.show(3.14));

// 命名空间与类合并
// 注意点: 1.say会被放在 prototype上
//        2.命名空间只能放在与之合并的类之后 
/*
class Person {
    say():void{
        console.log("say 孙怡");
    }
}
namespace Person{
    export const hi = ():void=>{
        console.log('hi 孙怡');
    }
}
console.dir(Person);
*/


// 命名空间和函数合并
// 注意点: 函数必须定义在命名空间的前面
/*
function getCounter() {
    getCounter.count++;
    console.log(getCounter.count);
}
namespace getCounter{
    export let count:number = 0;
}
getCounter()
*/

// 命名空间和枚举合并
// 注意点: 没有先后顺序的要求
enum Gender {
    Male,
    Female
}
namespace Gender{
    export const Yao:number = 666;
}
console.log(Gender);