React鏄竴涓狫avaScript搴擄紝鏄綋浠婃渶娴佽鍜岃涓氶鍏堢殑鍓嶇寮€鍙戝簱銆侸avaScript鏄竴绉嶆澗鏁ｇ被鍨嬬殑璇█锛屽洜姝ゅ畠鎹曡幏杩愯鏃躲€傝繖鏍峰仛鐨勭粨鏋滄槸JavaScript閿欒寰堟櫄鎵嶈鍙戠幇锛岃繖鍙兘瀵艰嚧涓ラ噸鐨勯敊璇€傚綋鐒禦eact浣滀负涓€涓狫avaScript搴撲篃缁ф壙浜嗚繖涓棶棰樸€傛暣娲佷唬鐮侊紙Cleancode锛夆€濓級鏄竴绉嶄竴鑷寸殑缂栫▼椋庢牸锛屽畠浣夸唬鐮佹洿鏄撲簬缂栧啓銆侀槄璇诲拰缁存姢銆備换浣曚汉閮藉彲浠ョ紪鍐欒绠楁満鍙互鐞嗚В鐨勪唬鐮侊紝浣嗕紭绉€鐨勫紑鍙戜汉鍛樺彲浠ョ紪鍐欏嚭浜虹被鍙互鐞嗚В鐨勪唬鐮丆leancode銆傚共鍑€鐨勪唬鐮佹槸涓€绉嶄互璇昏€呬负涓績鐨勫紑鍙戦鏍硷紝瀹冩彁楂樹簡鎴戜滑杞欢鐨勮川閲忓拰鍙淮鎶ゆ€с€傜紪鍐欏共鍑€鐨勪唬鐮侀渶瑕佺紪鍐欏叿鏈夋竻鏅板拰绠€鍗曠殑璁捐妯″紡鐨勪唬鐮侊紝浣夸汉浠彲浠ヨ交鏉惧湴闃呰銆佹祴璇曞拰缁存姢浠ｇ爜銆傚洜姝わ紝骞插噣鐨勪唬鐮佸彲浠ラ檷浣庤蒋浠跺紑鍙戞垚鏈€傝繖鏄洜涓虹紪鍐欏共鍑€浠ｇ爜鎵€娑夊強鐨勫師鍒欐秷闄や簡鎶€鏈€哄姟銆傚湪鏈枃涓紝鎴戜滑灏嗕粙缁嶄竴浜涘湪宸ヤ綔鏃朵娇鐢ㄧ殑鏈夌敤妯″紡銆傪煉¤鎮ㄧ殑鍥㈤槦鏇磋交鏉惧湴淇濇寔浠ｇ爜鍋ュ悍鍜屼紭鍏堣€冭檻鎶€鏈€哄姟宸ヤ綔锛屽皾璇昐tepsize鐨刅SCode鍜孞etBrains鎵╁睍銆傚畠浠府鍔╁伐绋嬪笀鍒涘缓鎶€鏈棶棰橈紝灏嗗畠浠坊鍔犲埌杩唬涓紝骞剁户缁В鍐虫妧鏈€哄姟-鏃犻渶绂诲紑缂栬緫銆傜幇鍦ㄨ鎴戜滑鏉ョ湅鐪嬪湪浣跨敤React鍜孴ypescript鏃跺簲鐢ㄧ殑10涓湁鐢ㄦā寮忥細1.浣跨敤榛樿瀵煎叆鏉ュ鍏eact鑰冭檻浠ヤ笅浠ｇ爜锛歩mport*asReactfrom"react";铏界劧涓婇潰鐨勪唬鐮佹湁鏁堬紝浣嗗鏋滄垜浠笉浣跨敤React涓殑鎵€鏈夊唴瀹癸紝閭ｄ箞浠嶳eact涓鍏ユ墍鏈夊唴瀹逛細浠や汉鍥版儜骞朵笖涓嶆槸涓€涓ソ鐨勫仛娉曘€傛洿濂界殑妯″紡鏄娇鐢ㄩ粯璁ゅ鍑猴紝濡備笅鎵€绀猴細importReact,{useContext,useState}from"react";浣跨敤杩欑鏂规硶锛屾垜浠彲浠ヤ粠React妯″潡涓В鏋勬垜浠渶瑕佺殑涓滆タ锛岃€屼笉鏄鍏ユ墍鏈変笢瑗裤€傛敞鎰忥細瑕佷娇鐢ㄨ繖涓€夐」锛屾垜浠渶瑕侀厤缃畉sconfig.json鏂囦欢濡備笅锛歿"compilerOptions":{"esModuleInterop":true"}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑閫氳繃灏唀sModuleInterop璁剧疆涓簍rue鏉ュ惎鐢╝llowSyntheticDefaultImports锛岃繖鏄潪甯窽ypeScript鏀寔鎴戜滑鐨勮娉曞緢閲嶈銆?.鍦ㄨ繍琛屾椂瀹炵幇涔嬪墠搴旇鑰冭檻绫诲瀷澹版槑鑰冭檻浠ヤ笅浠ｇ爜锛歩mportReact,{Component}from"react";constinitialState={count:1}constdefaultProps={name:"JohnDoe"}typeState=typeofinitialState;typeProps={count?:number}&typeofdefaultPropsclassCounterextendsComponent{staticdefaultProps=defaultProps;state=initialState;//...}濡傛灉鎴戜滑缁撳悎杩愯鏃跺０鏄庡拰濡傛灉缂栬瘧鏃跺０鏄庢槸鍒嗗紑鐨勶紝缂栬瘧鏃跺０鏄庡湪杩愯鏃跺０鏄庝箣鍓嶏紝閭ｄ箞涓婇潰鐨勪唬鐮佸彲浠ユ洿娓呮櫚锛屾洿鏄撹銆傝€冭檻浠ヤ笅浠ｇ爜锛歩mportReact,{Component}from"react";绫诲瀷鐘舵€?typeof鍒濆鐘舵€侊紱typeProps={count?:number}&typeofdefaultPropsconstinitialState={count:1}constdefaultProps={name:"JohnDoe"}classCounterextendsComponent{staticdefaultProps=defaultProps;鐘舵€?鍒濆鐘舵€侊紱//...}鐜板湪锛屼箥涓€鐪嬶紝寮€鍙戜汉鍛樼煡閬撶粍浠禔PI鏄粈涔堟牱瀛愶紝鍥犱负绗竴琛屼唬鐮佹竻妤氬湴琛ㄦ槑浜嗚繖涓€鐐广€傛澶栵紝鎴戜滑灏嗙紪璇戞椂澹版槑涓庤繍琛屾椂澹版槑鍒嗗紑銆?.涓哄瀛愭彁渚涙槑纭殑propsTypescript鍙嶆槧浜哛eact濡備綍閫氳繃鍦ㄥ嚱鏁扮粍浠跺拰绫荤粍浠剁殑react.d.ts涓皢瀹冧滑娉ㄩ噴涓哄彲閫夋潵澶勭悊瀛恜rops銆傚洜姝わ紝鎴戜滑闇€瑕佹樉寮忓湴涓篶hildren鎻愪緵涓€涓猵rops绫诲瀷銆備絾鏄紝鏈€濂界敤绫诲瀷鏄惧紡娉ㄩ噴瀛愬睘鎬с€傝繖鍦ㄦ垜浠兂瑕佷娇鐢╟hildren杩涜鍐呭鎶曞奖鐨勬儏鍐典笅寰堟湁鐢紝濡傛灉鎴戜滑鐨勭粍浠朵笉浣跨敤瀹冿紝鎴戜滑鍙互绠€鍗曞湴鐢╪ever绫诲瀷瀵瑰叾杩涜娉ㄩ噴銆傝€冭檻浠ヤ笅浠ｇ爜锛歩mportReact,{Component}from"react";//Card.tsxtypeProps={children:React.ReactNode}classCardextendsComponent{render(){const{children}=this.props;杩斿洖{children}
;杩欓噷鏈変竴浜涘甫娉ㄩ噴鐨勫効绔ラ亾鍏风被鍨嬶細鍙嶅簲鍎跨|ReactElement瀵逛簬鍘熷绫诲瀷锛歴tring|缂栧彿|boolean瀵硅薄鍜屾暟缁勪篃鏄湁鏁堢被鍨嬬┖|undefined鈥撴敞鎰忥細涓嶅缓璁娇鐢╪ull鍜寀ndefined4銆備娇鐢ㄧ被鍨嬫帹鏂潵瀹氫箟缁勪欢鐘舵€佹垨DefaultProps鍙傝浠ヤ笅浠ｇ爜锛?string}classCounterextendsComponent{staticdefaultProps:DefaultProps={name:"JohnDoe"}state={count:0}//...}铏界劧涓婇潰鐨勪唬鐮佹湁鏁堬紝浣嗘垜浠彲浠ユ敼杩涘畠锛氫娇TypeScript鐨勭被鍨嬬郴缁熻兘澶熸纭帹鏂彧璇荤被鍨嬶紝渚嬪DefaultProps鍜宨nitialState銆備负浜嗛槻姝㈢敱浜庢剰澶栬缃姸鎬佽€屽鑷寸殑寮€鍙戦敊璇細this.state={}鑰冭檻浠ヤ笅浠ｇ爜锛歩mportReact,{Component}from"react";constinitialState=Object.freeze({count:0})constdefaultProps=Object.freeze({name:"JohnDoe"})typeState=typeofinitialState;typeProps={someProps:string}&typeofdefaultProps;classCounterextendsComponent{staticreadonlydefaultProps=defaultProps;readonlystate={count:0}//...}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝閫氳繃鍐荤粨DefaultProps鍜宨nitialState锛孴ypeScript绫诲瀷绯荤粺鐜板湪鍙互灏嗗畠浠帹鏂负鍙绫诲瀷銆傛澶栵紝閫氳繃鍦ㄧ被涓皢闈欐€乨efaultProps鍜宻tate鏍囪涓哄彧璇伙紝鎴戜滑娑堥櫎浜嗚缃姸鎬佸鑷翠笂杩拌繍琛屾椂閿欒鐨勫彲鑳芥€с€?.澹版槑Props/State鏃朵娇鐢ㄧ被鍨嬪埆鍚嶏紙type锛夎€屼笉鏄帴鍙ｏ紙interface锛夎櫧鐒跺彲浠ヤ娇鐢╥nterface锛屼絾鏄负浜嗕竴鑷存€у拰娓呮櫚搴︼紝鏈€濂借繕鏄娇鐢╰ype锛屽洜涓烘湁浜涙儏鍐典笅interface鏄涓嶉€氱殑銆備緥濡傦紝鍦ㄥ墠闈㈢殑绀轰緥涓紝鎴戜滑閲嶆瀯浜嗕唬鐮侊紝浠ヤ究TypeScript鐨勭被鍨嬬郴缁熼€氳繃浠庡疄鐜颁腑瀹氫箟鐘舵€佺被鍨嬫潵姝ｇ‘鎺ㄦ柇鍙绫诲瀷銆傛垜浠笉鑳藉儚涓嬮潰鐨勪唬鐮侀偅鏍蜂娇鐢ㄨ繖涓ā寮忕殑鎺ュ彛锛?/workstypeState=typeofinitialState;typeProps={someProps:string}&typeofdefaultProps;//throwserrorinterfaceState=typeofinitialState;interfaceProps={someProps:瀛楃涓瞹&typeofdefaultProps;姝ゅ锛屾垜浠笉鑳戒娇鐢ㄨ仈鍚堝拰浜ら泦鍒涘缓鐨勭被鍨嬫潵鎵╁睍鎺ュ彛锛屽洜姝ゅ湪杩欎簺鎯呭喌涓嬫垜浠繀椤讳娇鐢ㄧ被鍨嬨€?.涓嶈鍦ㄦ帴鍙?绫诲瀷涓娇鐢ㄦ柟娉曞０鏄庤繖纭繚浜嗘垜浠唬鐮佷腑妯″紡鐨勪竴鑷存€э紝鍥犱负閫氳繃绫诲瀷/鎺ュ彛鎺ㄦ柇鐨勬墍鏈夋垚鍛橀兘浠ョ浉鍚岀殑鏂瑰紡澹版槑銆傛澶栵紝--strictFunctionTypes浠呭湪姣旇緝鍑芥暟鑰屼笉鏄柟娉曟椂鏈夋晥銆傛偍鍙互浠庤繖涓猅S闂涓緱鍒拌繘涓€姝ョ殑瑙ｉ噴銆?/Don'tdointerfaceCounter{start(count:number):stringreset():void}//DointerfaceCounter{start:(count:number)=>stringreset:()=>string}7.涓嶈浣跨敤FunctionComponent鎴栫畝绉癋C锛屽畾涔変竴涓姛鑳界粍浠躲€傚湪浣跨敤Typescript鍜孯eact鏃讹紝鍑芥暟缁勪欢鍙互鏈変袱绉嶅啓娉曪細浣滀负鏅€氬嚱鏁帮紝濡備笅浠ｇ爜锛歵ypeProps={message:string};constGreeting=({message}:Props)=>{message}
;浣跨敤React.FC鎴朢eact.FunctionComponent锛屽儚杩欐牱锛歩mportReact,{FC}from"react";typeProps={message:string};constGreeting:FC=(props)=>{props
;浣跨敤FC鎻愪緵浜嗕竴浜涗紭鍔匡紝渚嬪displayName銆乸ropTypes鍜宒efaultProps绛夐潤鎬佸睘鎬х殑绫诲瀷妫€鏌ュ拰鑷姩瀹屾垚銆備絾瀹冩湁涓€涓牬鍧廳efaultProps鍜屽叾浠栧睘鎬х殑宸茬煡闂锛歱ropTypes銆乧ontextTypes銆乨isplayName銆侳C杩樻彁渚涗簡涓€涓殣寮忕被鍨嬬殑瀛愬睘鎬э紝瀹冧篃鏈夊凡鐭ラ棶棰樸€傛澶栵紝濡傚墠鎵€杩帮紝缁勪欢API搴旇鏄樉寮忕殑锛屽洜姝ら殣寮忕被鍨嬬殑瀛愬睘鎬т笉鏄渶浣抽€夋嫨銆?.涓嶈瀵圭被缁勪欢浣跨敤鏋勯€犲嚱鏁版湁浜嗘柊鐨勭被灞炴€ф彁妗堬紝涓嶅啀闇€瑕佸湪JavaScript绫讳腑浣跨敤鏋勯€犲嚱鏁般€備娇鐢ㄦ瀯閫犲嚱鏁版秹鍙婅皟鐢╯uper()鍜屼紶閫抪rops锛岃繖寮曞叆浜嗕笉蹇呰鐨勬牱鏉垮拰澶嶆潅鎬с€傛垜浠彲浠ヤ娇鐢ㄨ繖鏍风殑绫诲瓧娈垫潵缂栧啓鏇寸畝娲併€佹洿鏄撲簬缁存姢鐨凴eact绫荤粍浠讹細//Don'tdotypeState={count:number}typeProps={}classCounterextendsComponent{constructor(props:Props){瓒呯骇(閬撳叿);this.state={count:0}}}//DotypeState={count:number}typeProps={}classCounterextendsComponent{state={count:0}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑鐪嬪埌浣跨敤绫诲睘鎬ф秹鍙婅緝灏戠殑鏍锋澘鏂囦欢锛屽洜姝ゆ垜浠笉蹇呭鐞唗his鍙橀噺銆?.涓嶈鍦ㄧ被涓娇鐢╬ublic鍏抽敭瀛楄€冭檻浠ヤ笅浠ｇ爜锛氶粯璁ゆ儏鍐典笅锛屾墍鏈夋垚鍛樺湪杩愯鏃堕兘鏄叕寮€鐨勶紝鍥犳鏃犻渶閫氳繃鏄惧紡浣跨敤public鍏抽敭瀛楁潵娣诲姞棰濆鐨勬牱鏉挎枃浠躲€傜浉鍙嶏紝浣跨敤浠ヤ笅妯″紡锛歩mport{Component}from"react"classFriendsextendsComponent{fetchFriends(){}render(){return//jsxblob}}10.涓嶈鍦ㄧ粍浠剁被涓娇鐢╬rivate鑰冭檻浠ヤ笅浠ｇ爜锛歩mport{Component}from"react"classFriendsextendsComponent{privatefetchProfileByID(){}render(){return//jsxblob}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝private鍙湪缂栬瘧鏃朵娇fetchProfileByID鏂规硶绉佹湁锛屽洜涓哄畠鍙槸A鎵撳瓧绋挎ā鎷熴€備絾鏄紝鍦ㄨ繍琛屾椂锛宖etchProfileByID鏂规硶浠嶇劧鏄叕鍏辩殑銆傛湁涓嶅悓鐨勬柟娉曞彲浠ヤ娇JavaScript绫荤殑灞炴€?鏂规硶绉佹湁鍖栵紝浣跨敤涓嬪垝绾?\_)鍙橀噺鍛藉悕鍘熷垯濡備笅锛?jsxblob}}铏界劧杩欏苟娌℃湁鐪熸浣縡etchProfileByID鏂规硶鎴愪负绉佹湁鏂规硶锛屼絾瀹冨緢濂藉湴鍚戝叾浠栧紑鍙戜汉鍛樹紶杈句簡鎴戜滑鐨勬剰鍥撅紝鍗虫寚瀹氭柟娉曞簲琚涓虹鏈夋柟娉曘€傚叾浠栨妧鏈寘鎷娇鐢╓ea鈥嬧€媖Maps銆丼ymbols鍜屼綔鐢ㄥ煙鍙橀噺銆備絾鏄湁浜嗘柊鐨凟CMAScript绫诲瓧娈垫彁妗堬紝鎴戜滑鍙互閫氳繃浣跨敤绉佹湁瀛楁杞绘澗鑰屼紭闆呭湴瀹炵幇杩欎竴鐐癸紝濡備笅鎵€绀猴細blob}}骞朵笖TypeScript鍦?.8鍙婃洿楂樼増鏈腑鏀寔绉佹湁瀛楁鐨勬柊JavaScript璇硶銆傚鍔憋細涓嶈浣跨敤鏋氫妇灏界鏋氫妇鏄疛avaScript涓殑淇濈暀瀛楋紝浣嗕娇鐢ㄦ灇涓惧苟涓嶆槸鏍囧噯鐨勬儻鐢↗avaScript妯″紡銆備絾鏄紝濡傛灉鎮ㄤ娇鐢ㄧ殑鏄疌#鎴朖AVA涔嬬被鐨勮瑷€锛岄偅涔堜娇鐢ㄦ灇涓惧彲鑳戒細寰堣浜恒€傜劧鑰岋紝鏈夋洿濂界殑妯″紡锛屾瘮濡傚儚杩欐牱浣跨敤缂栬瘧绫诲瀷瀛楅潰閲忥細//涓嶈杩欐牱鍋歵histype鍝嶅簲=鎴愬姛|澶辫触|PendingfunctionfetchData(status:Response):void=>{//somecode.}鎬荤粨姣棤鐤戦棶锛屼娇鐢═ypescript浼氱粰浣犵殑浠ｇ爜澧炲姞寰堝棰濆鐨勬牱鏉夸唬鐮侊紝浣嗚繖鏍峰仛鐨勫ソ澶勬槸闈炲父鍊煎緱鐨勩€備负浜嗚浣犵殑浠ｇ爜鏇村共鍑€銆佹洿濂斤紝涓嶈蹇樿瀹炴柦涓€涓仴澹殑TODO/issue娴佺▼銆傚畠灏嗗府鍔╂偍鐨勫伐绋嬪洟闃熶簡瑙ｆ妧鏈€哄姟銆佸湪浠ｇ爜搴撻棶棰樹笂杩涜鍗忎綔浠ュ強鏇村ソ鍦拌鍒掑啿鍒恒€傛湰鏂囩炕璇戣嚜锛歨ttps://dev.to/alexomeyer/10-...
