TypeScript 中的模块、命名空间(基于node.js,与es6中模块化写法无异)

模块的概念

  • 官方理解:
    关于术语的一点说明:请务必注意一点,typescript 1.5里术语名已经发生了变化。“内部模块”现在称作“命名空间”。“外部模块”现在则称为“模块”模块在其自身的作用域里执行,而不是在全局作用域里;
    这意味着定义在一个模块里的变量、函数、类等等在模块外部是不可见的,除非你明确的使用export形式之一导出它们。相反,如果相使用其他模块导出的变量、函数、类、接口等的时候,你必须要导入他们,可以使用import形式之一。
  • 自己理解:
    我们可以把一些公共的功能单独抽离成一个文件作为一个模块。
    模块里面的变量、函数、类等默认是私有的,如果我们在外部访问模块里面的数据(变量、函数、类)
    我们需要通过export暴露模块里面的数据(变量、函数、类…)
    暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数。类…)。
  1. 在demo.ts中写入以下代码:

    	//暴露变量
    	export var dbUrl = "xxxxxxx";// 数据库连接地址
    
    	//暴露函数
    	export function getData():any[]{ 
    		console.log("获取数据库数据");
    		return [{ title:"xx"},{ title:"xx"}];
    	}
    	export function save(){ 
    		console.log("保存数据成功");
    	}
    
    	// 也可以这样暴露出去
    	// export {dbUrl,getData,save} 
    

    在index.ts文件中引入demo.ts模块:
    在浏览器里报错,请在终端运行node index.js(就可以打印出来)

    	// 用哪个就引入哪个(as相当于重命名)
    	import { dbUrl,getData as get,save} from "./modules/db";
    	console.log(dbUrl); //xxxxxxx
    	get(); //获取数据库数据
    	save(); //保存数据成功
    
  2. export default 默认导出
    每个模块都可以有一个default导出,默认导出使用default关键词标记;并且一个模块只能有一个default导出(否则报错)。需要使用一种特殊的形式来引入;

    在demo.ts文件中写入以下代码:

    	function getData():any[]{ 
    	 	console.log("获取数据库数据");
    		return [{ title:"xx"},{ title:"xx"}];
    	}
    	export default getData;  
    

    在index.ts文件中引入demo.ts模块:

    	import getData from "/demo";
    	getData();//获取数据库数据
    

命名空间:

  • 在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内

  • 命名空间和模块的区别:
    命名空间:内部模块,主要用于组织代码,避免冲突。
    模块:ts的外部模块的简称,侧重于代码的复用,一个模块里可能会有很多个命名空间
    在浏览器里报错,请在终端运行node index.js(就可以打印出来)

    	namespace A{ 
    		interface Animal{ 
    			name:string;
    			eat():void;
    		}
    		export class Dog implements Animal{ 
    			name:string,
    			constructor(theName:string){ 
    				this.name = theName
    			}
    			eat(){ 
    				console.log(`${ this.name} 吃狗粮。`);
    			}
    		}
    		export class Cat implements Animal{ 
    			name:string,
    			constructor(theName:string){ 
    				this.name = theName
    			}
    			eat(){ 
    				console.log(`${ this.name} 吃猫粮。`);
    			}
    		}
    	}
    	namespace B{ 
    		interface Animal{ 
    			name:string;
    			eat():void;
    		}
    		export class Dog implements Animal{ 
    			name:string,
    			constructor(theName:string){ 
    				this.name = theName
    			}
    			eat(){ 
    				console.log(`${ this.name} 吃狗粮。`);
    			}
    		}
    		export class Cat implements Animal{ 
    			name:string,
    			constructor(theName:string){ 
    				this.name = theName
    			}
    			eat(){ 
    				console.log(`${ this.name} 吃猫粮。`);
    			}
    		}
    	}
    	let d = new A.DOg("狗狗");
    	d.eat();//狗狗吃狗粮
    	let d = new B.DOg("狼狗");
    	d.eat();//狼狗吃狗粮
    
    原文作者:苟圣啊
    原文地址: https://blog.csdn.net/beLaity/article/details/108416365
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞