《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》 課件 ch7名稱空間和模塊

第7章名稱空間和模塊TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)TypeScriptProgramming7.1名稱空間目錄/CONTENTS7.1.1定義名稱空間和導(dǎo)出資源7.2模塊模塊化是指將程序劃分到多個模塊文件中，每個模塊文件負(fù)責(zé)完成特定的功能。名稱空間則是將相關(guān)的類、接口、函數(shù)和常量等資源分組。7.1.2名稱空間嵌套7.1.3跨文件訪問名稱空間內(nèi)資源7.2.1普通腳本資源全局可見7.2.3模塊導(dǎo)出多個資源7.2.5導(dǎo)入變量的只讀特征7.2.2模塊導(dǎo)出默認(rèn)資源7.2.4同時導(dǎo)出默認(rèn)資源和普通資源7.2.6導(dǎo)出導(dǎo)入的其他語法7.2.7CommonJS規(guī)則下模塊的導(dǎo)出導(dǎo)入7.3實(shí)戰(zhàn)闖關(guān)——名稱空間和模塊7.1PART名稱空間7.1名稱空間用于解決資源（變量、常量、函數(shù)、類型別名、類、接口等）的重名沖突問題，若有重名沖突時，用完整名稱“名稱空間名.資源名”加以區(qū)分。7.1.1定義名稱空間和導(dǎo)出資源用namespace定義名稱空間，用export將名稱空間內(nèi)資源導(dǎo)出來，以便于在名稱空間外部使用namespace名稱空間名{export資源//變量、常量、函數(shù)、類型別名、類、接口

......}外部訪問名稱空間內(nèi)導(dǎo)出資源：名稱空間.資源名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跨文件訪問名稱空間內(nèi)資源應(yīng)先使用import從ts文件中導(dǎo)入名稱空間，然后再訪問名稱空間中的資源。import{名稱空間}from"ts文件路徑"http://不帶.ts后綴例：import{Tools}from"./MyTools"letisZip=Tools.zipValidate('201299')7.2PART模塊7.2模塊

主流使用的模塊規(guī)則有2種：CommonJs模塊（服務(wù)器端）和ES模塊（前端，本書ES模塊為主）7.2.1普通腳本資源全局可見.ts文件中若沒有import或export關(guān)鍵字，則該文件為普通腳本，普通腳本文件中的資源在程序中全局可見。即，在同一文件中的任何位置直接訪問，也可在其他文件中直接訪問。7.2.2模塊導(dǎo)出默認(rèn)資源可用exportdefault命令，將模塊中的單個資源設(shè)置為默認(rèn)資源進(jìn)行導(dǎo)出。一個模塊文件中最多有一個默認(rèn)資源。exportdefault資源import接收名(任意)

form模塊名7.2.3模塊導(dǎo)出多個資源exportletpi=3.14exportfunctionmin(a:number,b:number):{returna<b?a:b}exportclassCircle{...}import{pi,min,Circle}from'./exports'7.2模塊

7.2.4同時導(dǎo)出默認(rèn)資源和普通資源exportdefaultfunctionhello(){console.log("hello")}exportconstPI=3.14exportletradius=17.2.5導(dǎo)入變量的只讀特征import導(dǎo)入的原始類型變量（如number、string、boolean等）是只讀的。但導(dǎo)入的引用類型變量（如對象、數(shù)組等），其引用值不可變，但屬性值可改。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導(dǎo)出導(dǎo)入的其他語法在導(dǎo)出和導(dǎo)入資源時，都可用as換名1.資源換名用“import*as對象名from模塊名”方式，導(dǎo)入模塊中所有資源。用“對象名.資源”方式來訪問導(dǎo)入的資源。2.導(dǎo)入所有資源outA.ts，導(dǎo)出變量資源eexportlete=2.718outB.ts，導(dǎo)出變量資源piexportletpi=3.14out.ts(聚合模塊)，將outA和outB中導(dǎo)出資源聚合起來，統(tǒng)一導(dǎo)出：

export*from'./outA'export{pi}from'./outB'//import*asoutfrom'./out'3.用聚合模塊統(tǒng)一導(dǎo)出其他模塊中資源module.ts，導(dǎo)出變量:exportletpi=3.14exportlete=2.718call.ts，動態(tài)導(dǎo)入模塊（module.ts文件）

import('./module').then((md)=>{console.log(md.e,md.pi)})4.動態(tài)導(dǎo)入模塊用函數(shù)Promise.all([import('./module1’),...])動態(tài)導(dǎo)入多個模塊模塊文件module1.ts:exportletpi=3.14模塊文件module2.ts:exportlete=2.718call.ts，用Promise.all()同時動態(tài)導(dǎo)入module1和module2模塊：

Promise.all([import('./module1'),import('./module2')]).then(([module1,module2])=>{console.log(module1.pi,module2.e)})5.用Promise.all()同時導(dǎo)入多個模塊7.2模塊

7.2.7CommonJS規(guī)則下模塊的導(dǎo)出導(dǎo)入1.使用module.exports或exports可導(dǎo)出CommonJS模塊資源

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

e:2.718,abs:(n:number)->{returnn<0?-n:n}}exports.pi=3.14//用exports語法2.使用require可導(dǎo)入CommonJS模塊導(dǎo)出的資源

letmath=require('./math’)math.pi用module.exports或exports導(dǎo)出用require函