《TypeScript入门与全栈式网站开发实战》 课件 ch7名称空间和模块

第7章名称空间和模块TypeScript入门与全栈式网站开发实战TypeScriptProgramming7.1名称空间目录/CONTENTS7.1.1定义名称空间和导出资源7.2模块模块化是指将程序划分到多个模块文件中，每个模块文件负责完成特定的功能。名称空间则是将相关的类、接口、函数和常量等资源分组。7.1.2名称空间嵌套7.1.3跨文件访问名称空间内资源7.2.1普通脚本资源全局可见7.2.3模块导出多个资源7.2.5导入变量的只读特征7.2.2模块导出默认资源7.2.4同时导出默认资源和普通资源7.2.6导出导入的其他语法7.2.7CommonJS规则下模块的导出导入7.3实战闯关——名称空间和模块7.1PART名称空间7.1名称空间用于解决资源（变量、常量、函数、类型别名、类、接口等）的重名冲突问题，若有重名冲突时，用完整名称“名称空间名.资源名”加以区分。7.1.1定义名称空间和导出资源用namespace定义名称空间，用export将名称空间内资源导出来，以便于在名称空间外部使用namespace名称空间名{export资源//变量、常量、函数、类型别名、类、接口

......}外部访问名称空间内导出资源：名称空间.资源名7.1.2名称空间嵌套namespaceCom.Abc{exportconstdescp='abc公司出品'exportnamespaceCommons.Tools{exportconstdescp='通用型工具'exportfunctionzipValidate(zip:string):boolean{returnzip.length==6&&parseInt(zip).toString()===zip}}}7.1名称空间7.1.3跨文件访问名称空间内资源应先使用import从ts文件中导入名称空间，然后再访问名称空间中的资源。import{名称空间}from"ts文件路径"//不带.ts后缀例：import{Tools}from"./MyTools"letisZip=Tools.zipValidate('201299')7.2PART模块7.2模块

主流使用的模块规则有2种：CommonJs模块（服务器端）和ES模块（前端，本书ES模块为主）7.2.1普通脚本资源全局可见.ts文件中若没有import或export关键字，则该文件为普通脚本，普通脚本文件中的资源在程序中全局可见。即，在同一文件中的任何位置直接访问，也可在其他文件中直接访问。7.2.2模块导出默认资源可用exportdefault命令，将模块中的单个资源设置为默认资源进行导出。一个模块文件中最多有一个默认资源。exportdefault资源import接收名(任意)

form模块名7.2.3模块导出多个资源exportletpi=3.14exportfunctionmin(a:number,b:number):{returna<b?a:b}exportclassCircle{...}import{pi,min,Circle}from'./exports'7.2模块

7.2.4同时导出默认资源和普通资源exportdefaultfunctionhello(){console.log("hello")}exportconstPI=3.14exportletradius=17.2.5导入变量的只读特征import导入的原始类型变量（如number、string、boolean等）是只读的。但导入的引用类型变量（如对象、数组等），其引用值不可变，但属性值可改。letpi:number=3.14classCircle{constructor(publicradius:number){}}letc0=newCircle(1)export{pi,c0}importmyFuncfrom'./exports'import{PI,radius}from'./exports'import{pi,c0}from'./out'//pi=3.1415//修改报错Cannotassignto'pi'becauseitisanimport.c0.radius=107.2模块

7.2.6导出导入的其他语法在导出和导入资源时，都可用as换名1.资源换名用“import*as对象名from模块名”方式，导入模块中所有资源。用“对象名.资源”方式来访问导入的资源。2.导入所有资源outA.ts，导出变量资源eexportlete=2.718outB.ts，导出变量资源piexportletpi=3.14out.ts(聚合模块)，将outA和outB中导出资源聚合起来，统一导出：

export*from'./outA'export{pi}from'./outB'//import*asoutfrom'./out'3.用聚合模块统一导出其他模块中资源module.ts，导出变量:exportletpi=3.14exportlete=2.718call.ts，动态导入模块（module.ts文件）

import('./module').then((md)=>{console.log(md.e,md.pi)})4.动态导入模块用函数Promise.all([import('./module1’),...])动态导入多个模块模块文件module1.ts:exportletpi=3.14模块文件module2.ts:exportlete=2.718call.ts，用Promise.all()同时动态导入module1和module2模块：

Promise.all([import('./module1'),import('./module2')]).then(([module1,module2])=>{console.log(module1.pi,module2.e)})5.用Promise.all()同时导入多个模块7.2模块

7.2.7CommonJS规则下模块的导出导入1.使用module.exports或exports可导出CommonJS模块资源

module.exports={//用module.exports语法

e:2.718,abs:(n:number)->{returnn<0?-n:n}}exports.pi=3.14//用exports语法2.使用require可导入CommonJS模块导出的资源

letmath=require('./math’)math.pi用module.exports或exports导出用require函