typescript---模块与命名空间(十四)

TS中的模块

概述

• 两个模块之间的关系是通过在文件级别上使用import和export建立的
• 模块使用模块加载器去导入其他的模块
• 在运行时，模块加载器的作用时在执行此模块代买钱去查找并执行这个模块的所有依赖，js模块加载器是服务于Node.js的CommonJS和服务于Web应用的Require.js

模块导出

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

// 文件名 SomeInterface.ts
export interface SomeInterface {
	代码部分
}
1
2
3
4

模块导入

• 另一个文件要使用该模块就需要使用import关键字来导入，语法如下:

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

JS、node和TS中模块的导入导出

JS中的模块导入导出

JS默认的导入导出

• 语法

// 注意: 导入导出的名字，可以不一致
export default XXX

import xxxx from "路径"
1
2
3
4

JS按需导入和导出

• 语法

// 注意点: 导入导出的名字必须一致
export XXX

import {XXX} from "路径"
1
2
3
4

node中的模块

• 语法
  • 第一种

  exports.xxx = xxx
  
  const xxx = require("path")
  const {XX,XX} = require("path")
  1
  2
  3
  4

  • 第二种

  module.exports.xxx = xxx
  
  const xxx = require("path")
  const {xx,xx} = require("path")
  1
  2
  3
  4

TS中的模块

• 默认情况下在JS中是不兼容上面两种导入方式混合使用，而TS中对他们做了兼容

export interface IPerson{
  name: string
  age: number
  sex: boolean
  show(): void
}

export const obj = {
  name: "富甲一方钱七"
}
1
2
3
4
5
6
7
8
9
10

import Test = require("./mpduleTest")
class UserInfo implements Test.IPerson{
  name = "法外狂徒张三"
  age = 18
  sex = true
  show() {
    console.log('法外狂徒')
  }
}

let person = new UserInfo()
console.log(person.name)

import {obj} from "./mpduleTest"
console.log(obj.name)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TS中的命名空间

TS中的命名空间概述

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

TS中的命名空间演示

// ./namespace.ts
export namespace D{
  export const d = 230;
}
1
2
3
4

namespace A {
  export const a = 10
}
console.log(A.a)

// 嵌套命名空间
namespace B{
  export const b = 200;
  export namespace C{
    export const c = 12
  }
}
console.log(B.b) // 200
console.log(B.C.c) // 12

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

import {D} from "./namespaceTest"
console.log(D.d) //230
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三斜杠语法

三斜杠语法概述

• 三斜杠指令包含单个XML标签的单行注释，注释的内用会作为编译器指令使用
• 如果在一个命名空间在一个单独的typescript文件中，则最应使用三斜杆///引用他
• 语法格式

/// 
1

// namespaceTest2.ts
namespace User{
  export interface IName {
    uname: string
  }
}



/// 
const username: User.IName = {
  uname: '法外狂徒张三'
}
1
2
3
4
5
6
7
8
9
10
11
12
13

声明合并

接口合并

• 如果名字一样会进行合并

// 接口
interface ITest {
  name: string
}

interface ITest {
  age: number
}

class Per implements ITest {
  name: string = '法外狂徒张三'
  age: number = 18
}

let per = new Per()
console.log(per.name,per.age)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 如果里面出现了同名函数，则会转化为函数重载

interface ITest {
  show(value: number): number
}
interface ITest {
  show(value: string): number
}
const func: ITest = {
  show(value: any): number {
    if(typeof value == "string"){
      return value.length
    }else{
    	// toFixed()  四舍五入
      return value.toFixed()
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

命名空间合并

• 与接口一样，若名称相同则会进行合并
• 同名的命名空间中不能出现同名的变量、方法等

// 命名空间
namespace ITest {
  export const num = 10
}
namespace ITest {
  // num   error,同名的命名空间不能有同名的变量\方法等
  // export const num = 100
}
1
2
3
4
5
6
7
8

• 命名空间还可以和同名的类/函数/枚举合并:
  • 命名空间与类的合并：1. say会被放在prototype上 2.类必须定义在命名空间的前面

  // 命名空间与类的合并
  class Perso {
    // prototypes上面
    say(): void{
      console.log("say hello")
    }
  }
  
  namespace Perso {
    export const hi = (): void =>{
      console.log("say Hi")
    }
  }
  
  console.dir(Perso)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

  • 命名空间和函数合并: 函数必须定义在命名空间的前面

  // 命名空间与函数的合并
  // 注意点: 函数里面可以使用命名空间定义的变量
  function getCounters(){
    getCounters.count++;
    console.log(getCounters.count)// 1
  }
  
  namespace getCounters {
    export let count: number = 0
  }
  getCounter()
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  • 命名空间和枚举合并：没有先后顺序的要求

  // 命名空间和枚举合并
  enum Gender{
    Male,
    Female
  }
  namespace Gender{
    export const money: number = 18
  }
  console.log(Gender) // {'0': 'Male','1': 'Female',Male:0,Female: 1,money: 18}
  1
  2
  3
  4
  5
  6
  7
  8
  9