鎴戜娇鐢═ypeScript宸茬粡涓€骞翠簡锛岄」鐩腑浣跨敤鐨勬妧鏈槸Vue+TypeScript銆傛繁鎰烼ypeScript鍦ㄤ腑澶у瀷椤圭洰涓殑蹇呰鎬э紝灏ゅ叾鏄敓鍛藉懆鏈熸瘮杈冿紝鍦ㄩ暱澶у瀷椤圭洰涓洿搴旇浣跨敤TypeScript銆備互涓嬫槸鎴戝湪宸ヤ綔涓粡甯镐娇鐢ㄧ殑TypeScript鎶€宸с€?.璇勮鍙互鐢?***/褰㈠紡鐨勮瘎璁烘潵鏍囩ずTS绫诲瀷锛岀紪杈戝櫒浼氭湁鏇村ソ鐨勬彁绀猴細/**Thisisacoolguy銆?/interfacePerson{/**杩欐槸鍚嶅瓧銆?/name:string,}constp:Person={name:'cool'}濡傛灉浣犳兂缁欎竴涓睘鎬ф坊鍔犺瘎璁烘垨鑰呭弸鎯呮彁閱掞紝杩欐槸涓ソ鍔炴硶銆?.鎺ュ彛缁ф壙鍜岀被涓€鏍凤紝鎺ュ彛涔熷彲浠ョ浉浜掔户鎵裤€傝繖鍏佽鎴戜滑灏嗘垚鍛樹粠涓€涓帴鍙ｅ鍒跺埌鍙︿竴涓帴鍙ｏ紝浠庤€屾洿鐏垫椿鍦板皢鎺ュ彛鎷嗗垎涓哄彲閲嶇敤鐨勬ā鍧椼€俰nterfaceShape{color:string;}interfaceSquareextendsShape{sideLength:number;}letsquare={};square.color="blue";square.sideLength=10;涓€涓帴鍙ｅ彲浠ョ户鎵垮涓帴鍙ｏ紝鍒涘缓杈撳嚭澶氫釜鎺ュ彛鐨勫悎鎴愭帴鍙ｃ€俰nterfaceShape{color:string;}interfacePenStroke{penWidth:number;}interfaceSquareextendsShape,PenStroke{sideLength:number;}letsquare={};square.color="blue";square.sideLength=10澶嶅埗浠ｇ爜;square.penWidth=5.0;3.interface&type鍦═ypeScript涓畾涔夌被鍨嬫湁涓ょ鏂瑰紡锛氭帴鍙ｅ拰绫诲瀷鍒悕銆備緥濡備笅闈㈢殑Interface鍜孴ype鍒悕鐨勪緥瀛愶紝闄や簡璇硶涓嶅悓锛屽惈涔夋槸涓€鏍风殑锛欼nterfaceinterfacePoint{x:number;y:number;}interfaceSetPoint{(x:number,y:number):void;}TypealiastypePoint={x:number;y:number;};typeSetPoint=(x:number,y:number)=>void;涓よ€呴兘鍙互鎵╁睍锛屼絾璇硶涓嶅悓銆傚彟澶栵紝璇锋敞鎰忔帴鍙ｅ拰绫诲瀷鍒悕骞朵笉鐩镐簰鎺掓枼銆傛帴鍙ｅ彲浠ユ墿灞曠被鍨嬪埆鍚嶏紝鍙嶄箣浜︾劧銆傛帴鍙ｆ墿灞曟帴鍙ｆ帴鍙artialPointX{x:number;}interfacePointextendsPartialPointX{y:number;}绫诲瀷鍒悕鎵╁睍绫诲瀷鍒悕PartialPointX={x:number;};typePoint=PartialPointX&{y:number;};鎺ュ彛鎵╁睍绫诲瀷鍒悕PartialPointX={x:number;};interfacePointextendsPartialPointX{y:number;}绫诲瀷鍒悕鎵╁睍鎺ュ彛鎺ュ彛PartialPointX{x:number;}typePoint=PartialPointX&{y:number;瀹冧滑涔嬮棿鐨勫尯鍒彲浠ョ湅涓嬪浘鎴栬€呯湅TypeScript:InterfacesvsTypes銆傛墍浠ュ阀濡欏湴浣跨敤鐣岄潰鍜岀被鍨嬪苟涓嶅鏄撱€傚鏋滀綘涓嶇煡閬撹鐢ㄤ粈涔堬紝璁颁綇锛氬鏋滀綘鍙互浣跨敤鎺ュ彛锛屽氨浣跨敤鎺ュ彛锛屽鏋滀笉鑳斤紝灏变娇鐢ㄧ被鍨嬨€?.typeoftypeof杩愮畻绗﹀彲鐢ㄤ簬鑾峰彇鍙橀噺鎴栧璞＄殑绫诲瀷銆傛垜浠竴鑸厛瀹氫箟绫诲瀷锛岀劧鍚庝娇鐢細interfaceOpt{timeout:number}constdefaultOption:Opt={timeout:500}鏈夋椂鍙互鍙嶈繃鏉ワ細constdefaultOption={timeout:500}typeOpt=typeofdefaultOption褰撲竴涓帴鍙lwayshas瀵逛簬瀛楅潰閲忓垵濮嬪€硷紝鍙互鑰冭檻杩欑鍐欐硶锛屽噺灏戦噸澶嶄唬鐮侊紝鑷冲皯鍑忓皯浜嗕袱琛屼唬鐮侊紝鍝堝搱~5.keyofTypeScript鍙互璁╂垜浠亶鍘嗘煇绫诲睘鎬э紝鎻愬彇鍚嶇О瀹冪殑灞炴€ч€氳繃keyof杩愮畻绗︺€俴eyof杩愮畻绗︽槸鍦═ypeScript2.1涓紩鍏ョ殑銆傝杩愮畻绗﹀彲鐢ㄤ簬鑾峰彇鏌愪竴绫诲瀷鐨勬墍鏈夐敭锛屽叾杩斿洖绫诲瀷涓鸿仈鍚堢被鍨嬨€俴eyof涓嶰bject.keys鐣ユ湁鐩镐技锛屽彧鏄痥eyof鎺ュ彈鐣岄潰鐨勯敭銆俢onstpersion={age:3,text:'helloworld'}//杈撳叆閿?"age"|鈥滄枃鏈€濈被鍨媖eys=keyofPoint;鍦ㄥ啓鑾峰彇瀵硅薄涓睘鎬у€肩殑鏂规硶鏃讹紝澶ч儴鍒嗕汉鍙兘浼氳繖鏍峰啓鍑芥暟get1(o:object,name:string){returno[name];}constage1=get1(persion,'age');consttext1=get1(persion,'text');浣嗘槸浼氭彁绀洪敊璇紝鍥犱负娌℃湁瀵硅薄涔嬪墠澹版槑鐨刱ey銆傚綋鐒跺鏋滄妸o:object鏀规垚o:any涔熶笉浼氭姤閿欙紝浣嗘槸寰楀埌鐨勫€间細娌℃湁绫诲瀷锛屽彉鎴恆ny銆傝繖鏃跺€欏彲浠ヤ娇鐢╧eyof鏉ュ姞寮篻et鍑芥暟鐨勭被鍨嬪姛鑳姐€傛湁鍏磋叮鐨勫悓瀛﹀彲浠ョ湅鐪媉.get鐨勭被鍨嬫爣绛撅紝瀹炵幇functionget(o:T,name:K):T[K]{returno[name]}6.鏌ユ壘typeinterfacePerson{addr:{city:string,street:string,num:number,}}褰撻渶瑕佷娇鐢╝ddr鐨勭被鍨嬫椂锛岄櫎浜嗘妸type甯﹀嚭interfaceAddress{city:string,street:string,num:number,}interfacePerson{addr:Address,}涔熷彲浠erson["addr"]//ThisisAddress.渚嬪锛歝onstaddr:Person["addr"]={city:'string',street:'string',num:2}鍦ㄦ煇浜涙儏鍐典笅锛屽悗鑰呬細浣夸唬鐮佹洿娓呮櫚鏄撹銆?.Findtype+generics+keyof娉涘瀷锛圙enerics锛夋槸鎸囧湪瀹氫箟鍑芥暟銆佹帴鍙ｆ垨绫绘椂锛屼笉浜嬪厛鎸囧畾鍏蜂綋绫诲瀷锛岃€屾槸鍦ㄤ娇鐢ㄦ椂鎸囧畾绫诲瀷鐨勭壒鎬с€俰nterfaceAPI{'/user':{name:string},'/menu':{foods:string[]}}constget=(url:URL):Promise=>{returnfetch(url).then(res=>res.json());}get('');get('/menu').then(user=>user.foods);8.绫诲瀷鏂█Vueref甯哥敤浜庣粍浠朵腑鑾峰彇瀛愮粍浠剁殑灞炴€ф垨鏂规硶锛屼絾寰€寰€鏃犳硶鎺ㄦ柇鍑哄瓨鍦ㄥ摢浜涘睘鎬у拰鏂规硶锛屼細鎶ラ敊銆傚瓙缁勪欢锛?scriptlang="ts">import{Options,Vue}from"vue-class-component";@Options({props:{msg:String,},})exportdefaultclassHelloWorldextendsVue{msg!:string;}鐖剁粍浠讹細
鍥犱负this.$refs.helloRef鏄湭鐭ョ被鍨嬶紝浼氭姤閿欙細justmakeatypeassertion:print(){//consthelloRef=this.$refs.helloRef;consthelloRef=this.$refs.helloRefasany;console.log("helloRef.msg:",helloRef.msg);//helloRef.msg:WelcometoYourVue.js+TypeScriptApp}浣嗘槸褰撶被鍨嬫柇瑷€鏄痑ny鏃讹紝灏变笉濂戒簡銆傜煡閬撳叿浣撶殑绫诲瀷灏卞啓鍏蜂綋鐨勭被鍨嬶紝鍚﹀垯寮曞叆TypeScript9浼间箮娌℃湁鎰忎箟銆傛樉寮忔硾鍨?('button')鏄竴涓狣OM鍏冪礌閫夋嫨鍣紝浣嗘槸杩斿洖鍊肩殑绫诲瀷鍙兘鍦ㄨ繍琛屾椂纭畾銆傞櫎浜嗚繑鍥瀉ny锛岃繕鍙互function$
