缂栧啓澶氬勾鐨刯s銆傚垰寮€濮嬪啓ts鐨勬椂鍊欙紝鐪熺殑寰堜笉涔犳儻銆傛暣浣撴劅瑙夊氨鍍忎竴涓鍥板湪灏侀棴瀛︽牎閲岀殑鏀捐崱涓嶇緛鐨勫皯骞淬€傚悗鏉ョ敤浜嗕竴娈垫椂闂存墠鐭ラ亾銆俆S纭疄鏄鏍￠噷涓ヤ弗瀹炲疄鐨勯櫌闀裤€備竴鏃︿綘涓嶉伒瀹堟牎瑙勶紝灏变細瑕佹眰浣犵粰鐖舵瘝鎵撶數璇濓紙鎶ラ敊锛夈€傛參鎱㈢殑浣犲氨浼氭垚涓轰竴涓箹宸ф噦浜嬬殑瀛︾敓銆傝鎴戜滑鐪嬬湅濡備綍涓€姝ユ瀛︿範銆?銆佸吇鎴愨€滃厛鎯冲悗鍋氣€濈殑濂戒範鎯€傚湪浠ュ線鐨勫紑鍙戣繃绋嬩腑锛屼範鎯€绘槸鈥滃厛鎯虫兂锛岃竟鎯宠竟鏀光€濄€傝繖鏍峰仛鐨勫ソ澶勬槸鎵ц閫熷害蹇紝椤虹殑鏃跺€欐晥鐜囦細楂橈紝浣嗘槸鏇村鐨勬椂鍊欎細涓嶆柇鐨勬帹缈昏嚜宸变箣鍓嶇殑鎯虫硶锛岀浉淇″緢澶氫汉鍜屾垜鏈夌被浼肩殑缁忓巻銆倀s鏄竴涓秴闆唈s锛屾剰鎬濇槸js鍙互鐩存帴鐢╰s鍐欙紝鍦ㄦ垜鐨勭涓€鍗拌薄涓紝js灏卞儚涓€涓紪璇戝ソ鐨勫彲鎵ц鏂囦欢锛屼紬鎵€鍛ㄧ煡锛宼s鏄竴绉嶅己绫诲瀷璇█锛屽氨鍍廕ava璇█涓€鏍凤紝杩欎篃鎰忓懗鐫€瀹冨彲浠ユ湁鏁堝湴闄愬埗浜嗗紑鍙戣€呭湪寮€鍙戣繃绋嬩腑鈥滀负鎵€娆蹭负鈥濈殑绋嬪害锛屼互涓嬫槸璇︾粏浠嬬粛馃憞1.瀹氫箟绫诲瀷鍜屾墿灞昑ypeScript鐨勬柟寮忓畾涔夌被鍨嬫湁涓ょ鏂瑰紡锛氭帴鍙ｅ拰绫诲瀷鍒悕銆備笅闈㈢殑渚嬪瓙涓紝闄や簡璇硶涓嶅悓澶栵紝瀹氫箟鐨勭被鍨嬫槸涓€鏍风殑锛?/interfaceinterfacePointI{x:number;y:number;}interfaceSetPointI{(x:number,y:number):void;}//鎴?/绫诲瀷鍒悕PointT={x:number;y:number;}typeSetPointT=(x:number,y:number)=>void;鎺ュ彛鍜岀被鍨嬪埆鍚嶄笉浠呭彲浠ユ墿灞曪紝鑰屼笖鎺ュ彛鍜岀被鍨嬪埆鍚嶅苟涓嶄簰鏂ワ紝涔熷氨鏄锛屾帴鍙ｅ彲浠ユ墿灞曠被鍨嬪埆鍚嶏紝绫诲瀷鍒悕涔熷彲浠ユ墿灞曟帴鍙?/interfaceextendstypealiastypePointX={x:number;}interfacePointYextendsPointX{y:number;}//typealiasextendsinterfaceinterfacePoint2X{x:number;}typePoint2Y=Point2X&{y:number;}鎺ュ彛鍜岀被鍨嬪埆鍚嶄篃鏈夊尯鍒€備緥濡傦紝涓€涓帴鍙ｅ彲浠ュ畾涔夊娆★紝閮戒細琚涓轰竴涓帴鍙ｏ紝浣嗘槸绫诲瀷鍒悕涓嶈兘閲嶅鎺ュ彛鍜岀被鍨嬩粈涔堟椂鍊欓€夋嫨鍒悕锛氬湪瀹氫箟涓€涓叕鍏盇PI锛堟瘮濡傜紪杈戜竴涓簱锛夋椂浣跨敤interface锛屼互渚夸簬鐢ㄦ埛鍙互杞绘澗缁ф壙鎺ュ彛锛涘湪瀹氫箟缁勪欢灞炴€э紙Props锛夊拰鐘舵€侊紙State锛夋椂锛屾帹鑽愪娇鐢╰ype锛屽洜涓簍ype鐨勯檺鍒舵€ф洿寮猴紱type绫诲瀷涓嶅彲浜屾缂栬緫锛屾帴鍙ｅ彲闅忔椂鎵╁睍銆?.TS鏀寔鐨凧S鏂扮壒鎬?.1鍙€夐摼锛圤ptionalChaining锛塗ypeScript3.7瀹炵幇浜嗗懠澹版渶楂樼殑ECMAScript鐗规€т箣涓€锛氬彲閫夐摼锛圤ptionalChaining锛夈€傞€氳繃鍙€夐摼锛屾垜浠彲浠ュ湪缂栧啓浠ｇ爜鏃堕亣鍒皀ull鎴杣ndefined鏃剁珛鍗冲仠姝㈡煇浜涜〃杈惧紡鐨勮繍琛屻€傚彲閫夐摼鐨勬牳蹇冩槸鏂扮殑?銆俹perator.obj?.propobj?.[expr]arr?.[index]func?.(args)鍙€夐摼锛圤ptionalChaining锛?銆侲S11锛圗S2020锛変腑鏂板鐨勫彲閫夐摼璁╂垜浠湪鏌ヨ澶氱骇瀵硅薄鏃朵笉鍐嶉渶瑕佽繘琛屽啑浣欑殑鍚勭棰勬鏌ワ細letage=user&&user.info&&user.info.getAge()letage=user?.info?.getAge?.()浣嗛渶瑕佹敞鎰忕殑鏄?.涓?&杩愮畻绗︾殑琛屼负鐣ユ湁涓嶅悓锛?&涓撻棬鐢ㄤ簬妫€娴嬮敊璇€硷紝渚嬪绌哄瓧绗︿覆銆?銆丯aN銆乶ull鍜宖alse绛夈€傚拰锛熴€傚彧浼氶獙璇佸璞℃槸鍚︿负null鎴杣ndefined锛屼笉浼氬0鎴栫┖瀛楃涓茶繘琛屸€滅煭璺€濄€?.2鍙€夊睘鎬у湪闈㈠悜瀵硅薄璇█涓紝鎺ュ彛鏄竴涓潪甯搁噸瑕佺殑姒傚康锛屽畠鏄琛屼负鐨勬娊璞★紝鍏蜂綋鐨勮涓洪渶瑕佺被鏉ュ疄鐜般€俆ypeScript涓殑鎺ュ彛鏄竴涓潪甯哥伒娲荤殑姒傚康銆傞櫎浜嗘娊璞＄被鐨勯儴鍒嗚涓哄锛屽畠杩樺父琚敤鏉ユ弿杩扳€滃璞＄殑褰㈢姸锛圫hape锛夆€濄€傚湪TypeScript涓娇鐢╥nterface鍏抽敭瀛楁潵澹版槑涓€涓帴鍙ｏ細interfacePerson{name:string;骞撮緞锛氭暟瀛楋紱}letzhangsan:Person={name:"zhangsan",age:33,};鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑澹版槑浜哖erson鎺ュ彛锛屽叾涓寘鍚袱涓繀闇€鐨勫睘鎬ame鍜宎ge銆傚湪鍒濆鍖朠erson绫诲瀷鍙橀噺鏃讹紝濡傛灉缂哄皯鏌愪釜灞炴€э紝TypeScript缂栬瘧鍣ㄤ細鎻愮ず鐩稿簲鐨勯敊璇俊鎭紝渚嬪锛氫负浜嗚В鍐充笂杩伴棶棰橈紝鎴戜滑鍙互灏嗘煇涓睘鎬у０鏄庝负鍙€夛細interfacePerson{name:string;骞撮緞锛燂細鏁板瓧锛泒letlisi:Person={name:"lisi"}2.3NullishcoalescingOperator褰搉ullcoalescingoperator鐨勫乏杈硅〃杈惧紡涓嶄负null鎴杣ndefined鏃讹紝鍙宠竟鐨勮〃杈惧紡琚眰鍊笺€俢onstgoods={price:0,}letgoods1=goods.price??'娌℃湁鎶ヤ环'璁ゞoods2=goods.jdPrice??'Nooffer'console.log(goods1)//0console.log(goods2)//Noquotesyet涓嶅悓浜庨€昏緫鎴栬繍绠楃锛坾|锛夛紝||濡傛灉宸︽搷浣滄暟鍏锋湁鍋囧€硷紙渚嬪锛?'鎴?锛夛紝鍒欒繑鍥炲彸鎿嶄綔鏁般€備篃灏辨槸璇达紝濡傛灉浣犱娇鐢▅|涓烘煇浜涘彉閲忚缃粯璁ゅ€硷紝浣犲彲鑳戒細閬囧埌鎰忔兂涓嶅埌鐨勮涓猴細constgoods={price:0,}letgoods1=goods.price||'Noofferyet'璁ゞoods2=goods.price??'Noquoteyet'console.log(goods1)//Noquoteyetconsole.log(goods2)//03.TypeNarrowingTypeScriptTypeNarrowing鏄粠瀹界被鍨嬭浆鎹负绐勭被鍨嬬殑杩囩▼锛屽父鐢ㄤ簬澶勭悊鑱斿悎绫诲瀷鍙橀噺鐨勫満鏅€傚湪TypeScript涓紝鏈夊绉嶆柟娉曞彲浠ョ缉灏忓彉閲忕殑绫诲瀷锛歍ypeassertionTypeguardDoubleassertion3.1绫诲瀷鏂█绫诲瀷鏂█鏈変袱绉嶇被鍨嬶細valueastype鎴?type>value涓€鑸垜浠娇鐢╲alueastype鐨勮娉曠粺涓€锛屽洜涓?>寰堝鏄撳拰娉涘瀷璇硶鍐茬獊銆傚綋TypeScript涓嶇‘瀹氫竴涓仈鍚堢被鍨嬬殑鍙橀噺鏄摢绉嶇被鍨嬫椂锛屾垜浠彧鑳借闂繖涓仈鍚堢被鍨嬬殑鎵€鏈夌被鍨嬪叡鏈夌殑灞炴€ф垨鏂规硶interfacerabbit{name:string;jump():void;}interfacedog{鍚嶇О锛氬瓧绗︿覆锛況un():void;}functionisRabbit1(animal:rabbit|dog){returnanimal.name}鏈夋椂锛屽綋鎴戜滑涓嶇‘瀹氱被鍨嬫椂锛屾垜浠‘瀹為渶瑕佽闂壒瀹氫簬绫诲瀷鐨勫睘鎬ф垨鏂规硶涔嬩竴銆備緥濡傦細鍦ㄤ笂闈㈢殑渚嬪瓙涓紝鑾峰彇animal.jump鏃朵細鎶ラ敊銆傝繖鏃跺€欏彲浠ヤ娇鐢ㄧ被鍨嬫柇瑷€锛屽皢animal鏂█涓簉abbit绫诲瀷锛屽彲浠ヨВ鍐宠闂產nimal.jump鎶ラ敊鐨勯棶棰橈細interfacerabbit{name:string;jump():void;}interfacedog{鍚嶇О锛氬瓧绗︿覆锛況un():void;}functionisRabbit(animal:rabbit|dog){if(typeof(animalasrabbit).jump==='function'){returntrue}returnfalse}铏界劧绫诲瀷鏂█寰堝ソ锛屼絾涓嶈兘琚檺寰呫€備細缁曡繃缂栬瘧鍣紝浣嗘棤娉曢伩鍏嶈繍琛屾椂閿欒銆傜晫闈㈠厰瀛恵鍚嶇О锛氬瓧绗︿覆锛沯ump():void;}interfacedog{鍚嶇О锛氬瓧绗︿覆锛況un():void;}functionrabbitJump(animal:rabbit|dog){(animalasrabbit).jump()}constjack:dog={name:'Jack',run(){console.log("杩愯")}}rabbitJump(jack)//杩愯浼氭姤閿橳ypeScript缂栬瘧鍣ㄤ俊浠绘垜浠殑鏂█锛屾墍浠ュ湪璋冪敤rabbitJump()鏃朵笉浼氬嚭鐜扮紪璇戦敊璇紝浣嗘槸鍥犱负jack涓婃病鏈塲ump鏂规硶锛屾墍浠ヤ細鎶ラ敊鍦ㄨ繍琛屻€備娇鐢ㄧ被鍨嬫柇瑷€鏃惰鏍煎灏忓績锛屽敖閲忛伩鍏嶅湪鏂█鍚庤皟鐢ㄦ柟娉曟垨寮曠敤娣卞眰灞炴€э紝浠ュ噺灏戜笉蹇呰鐨勮繍琛屾椂閿欒銆?.2TypeguardTypeguard涓昏鏈変互涓嬫柟娉曪細typeof锛氱敤浜庡垽鏂璶umber銆乻tring銆乥oolean鎴杝ymbol鍥涚绫诲瀷锛沬nstanceof锛氱敤浜庡垽鏂竴涓疄渚嬫槸鍚﹀睘浜庢煇涓被in锛氱敤浜庡垽鏂竴涓睘鎬?鏂规硶鏄惁灞炰簬鏌愪釜瀵硅薄鍙互浣跨敤typeof鏉ュ疄鐜扮被鍨嬬缉灏忓拰姘镐笉绫诲瀷鐗瑰緛鍋氬叏闈㈢殑妫€鏌ワ紝濡傚浘浠ヤ笅浠ｇ爜锛氱被鍨婩oo=string|numberfunctiontest(input:Foo){if(typeofinput=='string'){//杩欓噷杈撳叆鈥渢ightened鈥濈殑绫诲瀷鏄瓧绗︿覆}elseif(typeofinput=='number'){//杩欓噷鏄被鍨媜finput"tightened"isnumber}else{//杩欓噷input"Tighten"鐨勭被鍨媙everconstisShow:never=input}}濡備綘鎵€瑙侊紝鍦ㄦ渶鍚庝竴涓猠lse鍒嗘敮涓紝鎴戜滑灏唅nputnarrowedtonever鍒嗛厤缁欎竴涓粠涓嶆樉绀哄拰澹版槑鐨勫彉閲忋€傚鏋滄墍鏈夌殑閫昏緫閮芥槸姝ｇ‘鐨勶紝閭ｄ箞杩欓噷搴旇鍙互Compilationpassed銆備絾鏄鏋滄湁涓€澶╀綘鐨勫悓浜嬩慨鏀逛簡Foo鐨勭被鍨嬶紝蹇樿淇敼娴嬭瘯鏂规硶涓殑鎺у埗娴侊細杩欐椂鍊檈lse鍒嗘敮鐨勮緭鍏ョ被鍨嬪氨浼氱缉灏忎负boolean绫诲瀷锛屽鑷存棤娉曡祴鍊肩粰never绫诲瀷銆傚皢浜х敓缂栬瘧閿欒銆備娇鐢╥nstanceof杩愮畻绗︽潵缂╁皬鍙橀噺鐨勭被鍨嬩娇鐢╥n杩涜灞炴€ф鏌?{//杩欓噷杈撳叆鈥渢ighten鈥濈殑绫诲瀷鏄疐oo}else{//杩欓噷杈撳叆鈥渢ighten鈥濈殑绫诲瀷鏄疊ar}}3.3鍙岄噸鏂█绫诲瀷鏂█骞朵笉鎬绘槸鎴愬姛锛屼緥濡傦細涓婇潰鐨勪唬鐮乪xample灏嗘姤鍛婇敊璇紙绫诲瀷鈥淓vent鈥濆埌绫诲瀷鈥淗TMLElement鈥濈殑杞崲鍙兘鏄敊璇殑锛屽洜涓鸿繖涓ょ绫诲瀷娌℃湁鍏呭垎閲嶅彔銆傚鏋滆繖鏄湁鎰忕殑......锛夛紝灏界宸茬粡浣跨敤浜嗙被鍨嬫柇瑷€銆傚鏋滄偍浠嶆兂浣跨敤璇ョ被鍨嬶紝鍒欏彲浠ヤ娇鐢ㄥ弻閲嶆柇瑷€銆傞鍏堟柇瑷€鍏煎any鐨勬墍鏈夌被鍨嬶紝缂栬瘧鍣ㄤ笉浼氭姤閿欙細functionhandler(event:Event){constelement=(eventasany)asHTMLElement;//OK}TypeScript濡備綍纭畾鍗曚釜鏂█鏄惁瓒冲锛熷鏋滅被鍨嬫槸绫诲瀷T鐨勫瓙闆嗭紝鎴栬€呯被鍨婽鏄被鍨婼鐨勫瓙闆嗭紝鍒橲鍙互鎴愬姛鏂█涓篢銆傝繖鏄负浜嗗湪杩涜绫诲瀷鏂█鏃舵彁渚涢澶栫殑瀹夊叏鎬э紝瀹屽叏娌℃湁鏍规嵁鐨勬柇瑷€鏄嵄闄╃殑锛屽鏋滀綘鎯宠繖鏍峰仛閭ｏ紝浣犲彲浠ヤ娇鐢ㄤ换浣?4.鏋氫妇鏋氫妇鏄竴绉嶇粍缁囧拰鏀堕泦鍏宠仈鍙橀噺鐨勬柟娉曘€傞鍏堬紝璁╂垜浠湅涓€涓嬫櫘閫氱殑鏋氫妇銆傚鏋滄偍浣跨敤杩囧叾浠栫紪绋嬭瑷€锛屾偍搴旇鐔熸倝瀹冧滑銆俥numColor{Red=1,//1Green,//2Blue,//3}濡備笂锛屾垜浠畾涔変簡涓€涓暟瀛楁灇涓撅紝Red鍒濆鍖栦负1锛屽叾浣欐垚鍛樺皢浠?寮€濮嬭嚜鍔ㄥ闀裤€備篃灏辨槸璇达紝Color.Red鐨勫€间负1锛孏reen涓?锛孊lue涓?锛屽鏋淩ed娌℃湁鍒濆鍖栵紝鍒欎粠0寮€濮嬨€備絾鏄繖鏍峰啓鏈変釜闂锛氬綋鏋氫妇鐨勬煇涓垚鍛樹笉鏄暟瀛楁椂锛屽悗闈㈢殑鏋氫妇鎴愬憳闇€瑕佸拰瀹冧繚鎸佷竴鑷达紝浠ュ厤鎶ラ敊enumColor{Red,//0Green="Green",//GreenBlue="Blue",//Blue}鏅€氭灇涓剧殑鍊煎湪缂栬瘧闃舵涓嶄細璁＄畻锛岃€屾槸鍦ㄧ▼搴忔墽琛岄樁娈典繚鐣欍€傛垜浠湅涓嬮潰鐨勪緥瀛愶細enumColor{//甯搁噺鏋氫妇Red,purple,Green=Color.Red,Blue=1+1,//闈炲父閲忔灇涓緔ellow=Math.random(),black='hello'銆俵ength,}涓婇潰渚嬪瓙鐨勭紪璇戠粨鏋滄槸锛歷arColor;(function(Color){Color[(Color['Red']=0)]='Red';Color[(Color['purple']=0)]='绱壊';棰滆壊[(棰滆壊['缁胯壊']=0)]='缁胯壊';棰滆壊[(棰滆壊['钃濊壊']=2)]='钃濊壊';棰滆壊[(棰滆壊['榛勮壊']=Math.random())]='榛勮壊';Color[(Color['black']='hello'.length)]='black';})(Color||(Color={}));棣栧厛鎴戜滑鍏虫敞Color[(Color['Red']=0)]='Red''杩欒浠ｇ爜锛屽叾涓瑿olor['Red']=0琛ㄧず灏咰olor瀵硅薄涓璕ed鎴愬憳鐨勫€艰缃负0.娉ㄦ剰锛孞avaScript璧嬪€艰繍绠楃杩斿洖鐨勫€兼槸琚祴鍊肩殑鍊硷紙鏈緥涓负0锛夛紝鍥犳涓嬫JavaScript杩愯鏃舵墽琛岀殑浠ｇ爜鏄疌olor[0]='Red'銆傝〃绀哄彲浠ヤ娇鐢–olor鍙橀噺灏嗗瓧绗︿覆鏋氫妇绫诲瀷杞寲涓烘暟瀛楁垨鏁板€兼灇涓剧被鍨嬶紝濡備笅锛歟numColor{Red,Blue=1+1,yellow=Math.random(),black='hello'.length,}console.log(棰滆壊[0]);//'绾㈣壊'console.log(Color['绾㈣壊']);//0console.log(Color[Color.Red]);//'Red'5.楂樼骇绫诲瀷闄や簡string銆乶umber銆乥oolean绛夊熀鏈被鍨嬪锛屾垜浠繕搴旇浜嗚В涓€浜涚被鍨嬪０鏄庝腑鐨勪竴浜涢珮绾х敤娉曘€?.1extends鍏抽敭瀛楃殑鍩烘湰鐢ㄦ硶锛歍extendsU?X:Y琛ㄧず濡傛灉T鍙互璧嬪€肩粰U锛堢被鍨嬪吋瀹癸級锛屽垯杩斿洖X锛屽惁鍒欒繑鍥瀁锛涗互鍐呯疆娉涘瀷鎺ュ彛Extract涓轰緥锛屽叾瀹炵幇濡備笅锛歵ypeExtract
