現(xiàn)代TypeScript高級(jí)課程

codin卷首語(yǔ)可能是市面上比較好的Typescript高級(jí)教程，隨著TypeScript的日益普及，它已經(jīng)成為現(xiàn)代W得既可以獨(dú)立閱讀，也可以作為整個(gè)教程的一部分。我們深信，無(wú)論您是希望對(duì) 5 7 17 25 32 38 41 49 57 63 67 87 基礎(chǔ)一、概述本中引入的嚴(yán)格的空值檢查（--strictN優(yōu)勢(shì)明確定義對(duì)象和函數(shù)的結(jié)構(gòu)，這樣在大型項(xiàng)目中維護(hù)和理解代碼就更加簡(jiǎn)單。此外，二、類(lèi)型1.numberletletdecimal:number=6;//十進(jìn)制lethex:number=0xf00d;//十六進(jìn)制letbinary:number=0b1010;//二進(jìn)制letoctal:number=0o744;//八進(jìn)制2.stringletcolor:letcolor:string="blue";color='red';letfullName:string=、BobBobbington、;letage:number=37;letsentence:string=、Hello,mynameis${fullName}.I'llbe${age+1}yearsoldnextmonth.、;3.booleanletisDone:letisDone:boolean=false;4.Array5.Tuple6.Enum7.NullandUndefined默認(rèn)情況下，它們是所有類(lèi)型的子類(lèi)型。這意味著你可以把null和undefined賦值8.Any9.Unknown11.void）：12.聯(lián)合類(lèi)型（UnionTypes）們可以安全地將一個(gè)字符串或者數(shù)字賦值給varia13.交叉類(lèi)型（IntersectionTypes）b:42,};14.類(lèi)型別名（TypeAliases）15.字符串字面量類(lèi)型（StringLiteralTypes）三、函數(shù)1.函數(shù)聲明2.函數(shù)表達(dá)式3.可選參數(shù)和默認(rèn)參數(shù)returnfirstName;}4.剩余參數(shù)（RestParameters）當(dāng)你不知道要操作的函數(shù)會(huì)有多少個(gè)參數(shù)時(shí)，TypeScript提供了剩余參數(shù)的概念。與}"MacKinzie");5.this和箭頭函數(shù)13};}6.重載四、接口和類(lèi)2.類(lèi)}classAnimalclassAnimal{privatename:string;constructor(theName:string){=theName;}}classAnimalclassAnimal{name:string;constructor(theName:string){=theName;}move(distanceInMeters:number=0){console.log(、${}moved${distanceInMeters}m.、);}}classDogextendsAnimal{constructor(name:string){super(name);}bark(){console.log('Woof!Woof!');}}constdog=newDog('Tom');dog.bark();dog.move(10);dog.bark();abstractclassAnimal{abstractmakeSound():void;move():void{console.log('roamingtheearth...');}}classDogextendsAnimal{五、枚舉和泛型1.枚舉Right,}Right="RIGHT",}2.異構(gòu)枚舉enumenumBooleanLikeHetYes="YES",}3.枚舉成員的類(lèi)型Square,}4.泛型}second:U;}tprivatevalue:T;}六、命名空間和模塊1.命名空間（Namespace）2.命名空間（Namespace）使用場(chǎng)景3.模塊?作用域：命名空間是在全局作用域中定義的，而模塊則在自己的作用域中定義。這?文件組織：命名空間通常用于組織在同一文件中的代碼，而模塊則是跨文件進(jìn)行組?依賴(lài)管理：模塊關(guān)注的是如何導(dǎo)入和導(dǎo)出功能，以便管理代碼之間的依賴(lài)關(guān)系。相進(jìn)階七、類(lèi)型系統(tǒng)層級(jí)TypeScript的類(lèi)型系統(tǒng)是強(qiáng)類(lèi)型和靜態(tài)類(lèi)型的，這為開(kāi)發(fā)者提供了強(qiáng)大的1.頂層類(lèi)型（TopType）ello';1,2.底層類(lèi)型（BottomType）3.對(duì)比：頂層類(lèi)型vs底層類(lèi)型八、高級(jí)類(lèi)型1.映射類(lèi)型（MappedTypes）typeReadonlyPerson=aread-onlyproperty.typeWorkingHours=Record<Monday:"9am-6pm",Wednesday:"9am-6pm",2.條件類(lèi)型（ConditionalTypes）infer關(guān)鍵字用于聲明一個(gè)類(lèi)型變量，在條件類(lèi)型中表示待推斷的部分類(lèi)型。它通常在add函數(shù)返回一個(gè)數(shù)字。infer關(guān)鍵字的作用是告訴TypeScript編譯器在條件類(lèi)型中推斷一個(gè)待定的類(lèi)型，并需要注意的是，infer關(guān)鍵字只能在條件類(lèi)型的右側(cè)使infer關(guān)鍵字是TypeScript中用于提取并推斷待定類(lèi)型的工具。它允許我們?cè)跅l件類(lèi)3.模板字面量類(lèi)型（TemplateLiteralTypes）typeGreeting<TextendstypeGreeting<Textendsstring>=、Hello,${T}!、;typeGreetingWorld=Greeting<'World'>;//GreetingWorld的類(lèi)型為"Hello,World!"typetypePluralize<Textendsstring>=、${T}s、;typeMessage<Textendsboolean>=Textendstrue?'Enabled':'Disabled';typePlural=Pluralize<'apple'>;//Plural的類(lèi)型為"apples"typeEnabledMessage=Message<true>;//EnabledMessage的類(lèi)型為'Enabled'九、類(lèi)型推斷1.類(lèi)型推斷functiongreetfunctiongreet(person:string){console.log(、Hello,${person}!、);}greet("John");//person的類(lèi)型推斷為stringletletvalue="Hello,TypeScript!";letlength=(valueasstring).length;//類(lèi)型斷言為stringfunctionidentity<T>functionidentity<T>(value:T):T{returnvalue;}letresult=identity("Hello,TypeScript!");//result的類(lèi)型推斷為string2.總結(jié)十、類(lèi)型守衛(wèi)1.概述2.typeof類(lèi)型守衛(wèi)typeof類(lèi)型守衛(wèi)允許我們使用typeof操作符來(lái)在3.instanceof類(lèi)型守衛(wèi)instanceof類(lèi)型守衛(wèi)允許我們使用instanceof操作符來(lái)如果它是Dog類(lèi)的實(shí)例，則調(diào)用bark方法；否則調(diào)用move方法。通過(guò)使用4.使用自定義謂詞函數(shù)類(lèi)型守衛(wèi)}}}}}5.聯(lián)合類(lèi)型守衛(wèi)brand:brand:string;wheels:number;}interfaceBicycle{type:'bicycle';color:string;}interfaceMotorcycle{type:'motorcycle';engine:number;}typeVehicle=Car|Bicycle|Motorcycle;functionprintVehicleInfo(vehicle:Vehicle){switch(vehicle.type){case'car':console.log(、Brand:${vehicle.brand},Wheels:${vehicle.wheels}、);break;case'bicycle':console.log(、Color:${vehicle.color}、);break;case'motorcycle':console.log(、Engine:${vehicle.engine}、);break;default:const_exhaustiveCheck:never=vehicle;}}constcar:Car={type:'car',brand:'Toyota',wheels:4};constbicycle:Bicycle={type:'bicycle',color:'red'};constmotorcycle:Motorcycle={type:'motorcycle',engine:1000};printVehicleInfo(car);//輸出:Brand:Toyota,Wheels:4printVehicleInfo(bicycle);//輸出:Color:redprintVehicleInfo(motorcycle);//輸出:Engine:10006.使用in操作符進(jìn)行類(lèi)型守衛(wèi)}}}}7.控制流類(lèi)型守衛(wèi)}}}console.logconsole.log(、Thecolorof${fruit}is${color}、);}functionprocessValuefunctionprocessValue(value:string|null){if(value){console.log(value.toUpperCase());}else{console.log('Valueisnullorempty');}}8.自定義類(lèi)型判斷式（TypePredicates）守衛(wèi)interfaceBird{fly():void;}interfaceFish{swim():void;}functionisBird(animal:Bird|Fish):animalisBird{}}}十一、泛型和類(lèi)型體操1.泛型（Generics）value:T;}指定Container<number>，我們創(chuàng)建了一個(gè)具體的實(shí)現(xiàn)，其中的value屬性類(lèi)型}2.類(lèi)型體操（TypeGymnastics） 當(dāng)涉及到泛型時(shí)，還有一些重要的概念和內(nèi)置泛型函數(shù)可以深入分析。讓我們繼續(xù)探3.extends關(guān)鍵字和類(lèi)型約束選的typeRequiredPerson= }typeReadonlyPerson=4.總結(jié)通過(guò)結(jié)合泛型、extends關(guān)鍵字、內(nèi)置泛型函數(shù)和其他高級(jí)類(lèi)型概念，我們能夠在十二、類(lèi)型兼容：結(jié)構(gòu)化類(lèi)型2.鴨子類(lèi)型的優(yōu)點(diǎn)態(tài)類(lèi)型語(yǔ)言，我們經(jīng)常需要處理的對(duì)象可能沒(méi)有明確的類(lèi)型。鴨子類(lèi)型使我們能夠在3.鴨子類(lèi)型的局限性4.使用鴨子類(lèi)型的最佳實(shí)踐interfaceinterfacePerson{name:string;age:number;}functiongreet(person:Person){console.log(、Hello,mynameis${}andI'm${person.age}yearsold.、);}interfaceNamedinterfaceNamed{name:string;}classPerson{name:string;constructor(name:string){=name;十三、類(lèi)型兼容：協(xié)變和逆變協(xié)變和逆變還可以幫助我們創(chuàng)建更通用的代碼。例如，如果你有一個(gè)可以處理任何1.協(xié)變（Covariance）2.協(xié)變：類(lèi)型的向下兼容性3.逆變（Contravariance）B組成的某些復(fù)合類(lèi)型是由A組成的相應(yīng)復(fù)合類(lèi)型的子類(lèi)型。4.逆變：類(lèi)型的向上兼容性這看起來(lái)可能有些反直覺(jué)，但實(shí)際上是為了保證類(lèi)型安全。因?yàn)樵趫?zhí)行dogHandler5.協(xié)變與逆變的平衡十四、擴(kuò)展類(lèi)型定義1.什么是聲明文件？2.declare這個(gè)聲明告訴TypeScript編譯器，存在一個(gè)名為MyClass的全局類(lèi)，它有一個(gè)接last:T;}在上面的代碼中，我們通過(guò)聲明一個(gè)同名的Array接口來(lái)為Array類(lèi)型添加一個(gè)新的last屬性。這樣，我們?cè)赥ypeScript代碼中使用數(shù)組時(shí)，就可以訪問(wèn)這個(gè)新3.注意事項(xiàng)4.為第三方庫(kù)創(chuàng)建聲明文件exportinterfaceAxio}data:T;}AxiosRequestConfig):Promise<AxiosResponse<T十五、裝飾器與反射元數(shù)據(jù)1.介紹2.裝飾器簡(jiǎn)介3.類(lèi)裝飾器4.方法裝飾器5.訪問(wèn)器裝飾器}6.裝飾器與反射元數(shù)據(jù)importimport"reflect-metadata";項(xiàng):{{"compilerOptions":{"emitDecoratorMetadata":true,"experimentalDecorators":true,"target":"ES5","module":"commonjs"}}functionlogTypefunctionlogType(target:any,key:string){vart=Reflect.getMetadata("design:type",target,key);console.log(、${key}type:${}、);}classDemo{@logTypepublicattr1:string;}7.結(jié)論十六、解讀TSConfig1.創(chuàng)建和基本配置{{"node_modules",]}2.compilerOptions{{3.include和exclude"src/**/*.ts","test/**/*.ts"]"node_modules","dist"]4.文件引用和composite"src/main.ts","src/utils.ts"]5.declaration6.tsconfig.json繼承{{"extends":"./tsconfig.base.json",]}7.定制化tsconfig.base{{為了能夠在其他項(xiàng)目中使用我們的庫(kù)，我們需要?jiǎng)?chuàng)建一個(gè)入口文件來(lái)導(dǎo)出我們的{{{{"extends":"my-tsconfig-lib"}8.總結(jié)十七、Typ