TypeScript

ฤรฃ giแบฃi quyแบฟt: loแบกi trแบป em

Khi nรณi ฤ‘แบฟn nghแป‡ thuแบญt mแบทc quแบงn รกo cho trแบป em, cรณ vรด sแป‘ phong cรกch vร  xu hฦฐแป›ng cแบงn xem xรฉt, khiแบฟn viแป‡c nร y trแปŸ thร nh mแป™t cรดng viแป‡c thรบ vแป‹ vร  ฤ‘แบงy kรญch thรญch. Trong bร i viแบฟt nร y, chรบng ta sแบฝ khรกm phรก mแป™t sแป‘ phong cรกch phแป• biแบฟn dร nh cho trแบป em, trรฌnh bร y chi tiแบฟt vแป lแป‹ch sแปญ vร  di sแบฃn ฤ‘แบฑng sau nhแปฏng phong cรกch nร y, ฤ‘แป“ng thแปi cung cแบฅp mแป™t sแป‘ mแบนo hแปฏu รญch vแป cรกch kแบฟt hแปฃp tแป‘t nhแบฅt cรกc loแบกi quแบงn รกo khรกc nhau ฤ‘แปƒ cรณ vแบป ngoร i bรณng bแบฉy.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: sแบฏp xแบฟp mแบฃng ฤ‘แป‘i tฦฐแปฃng

Trong thแบฟ giแป›i lแบญp trรฌnh, mแป™t tรฌnh huแป‘ng thฦฐแปng gแบทp lร  cแบงn sแบฏp xแบฟp mแป™t mแบฃng ฤ‘แป‘i tฦฐแปฃng. ฤiแปu nร y ban ฤ‘แบงu cรณ vแบป khรณ khฤƒn, ฤ‘แบทc biแป‡t lร  trong ngรดn ngแปฏ ฤ‘ฦฐแปฃc gรต tฤฉnh nhฦฐ Bแบฃn ฤ‘รกnh mรกy. Tuy nhiรชn, vแป›i cรกch tiแบฟp cแบญn phรน hแปฃp, cรดng viแป‡c vแบทt nร y cรณ thแปƒ trแปŸ thร nh mแป™t nhiแป‡m vแปฅ khรก dแป… thแปฑc hiแป‡n. ฤiแปu nร y vฦฐแปฃt xa viแป‡c chแป‰ sแบฏp xแบฟp theo thแปฉ tแปฑ chแปฏ cรกi hoแบทc sแป‘; chรบng tรดi nghiรชn cแปฉu sรขu hฦกn vแป viแป‡c sแบฏp xแบฟp theo thuแป™c tรญnh cแปฅ thแปƒ hoแบทc nhiแปu thuแป™c tรญnh cแปงa mแบฃng ฤ‘แป‘i tฦฐแปฃng.

Giแบฃi phรกp cho vแบฅn ฤ‘แป nร y thฦฐแปng liรชn quan ฤ‘แบฟn viแป‡c sแปญ dแปฅng phฦฐฦกng thแปฉc Sort() cแปงa mแบฃng kแบฟt hแปฃp vแป›i hแป‡ thแป‘ng kiแปƒu cแปงa TypeScript. Dฦฐแป›i ฤ‘รขy lร  แบฃnh chแปฅp nhanh vแป cรกch bแบกn cรณ thแปƒ sแบฏp xแบฟp mแป™t mแบฃng ฤ‘แป‘i tฦฐแปฃng theo thuแป™c tรญnh 'tรชn'.

let arr = [{name: 'Joe'}, {name: 'Bob'}, {name: 'Alice'}];
arr.sort((a, b) => a.name.localeCompare(b.name));

Trong vรญ dแปฅ trรชn, chรบng tรดi sแปญ dแปฅng phฦฐฦกng thแปฉc Array.prototype.sort dแปฑng sแบตn cแปงa JavaScript kแบฟt hแปฃp vแป›i hร m so sรกnh dแปฑa trรชn ngรดn ngแปฏ.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: cรกch kiแปƒm tra xem tแบญp tin cรณ tแป“n tแบกi lua khรดng

Chแบฏc chแบฏn ฤ‘รขy lร  bแบฃn nhรกp cho bร i viแบฟt cแปงa bแบกn:

Hiแปƒu ฤ‘ฦฐแปฃc sแปฉc mแบกnh vร  tรญnh linh hoแบกt cแปงa lแบญp trรฌnh Lua mang lแบกi giรก trแป‹ ฤ‘รกng kแปƒ trong viแป‡c quแบฃn lรฝ tแป‡p mแป™t cรกch hiแป‡u quแบฃ. Mแป™t khรญa cแบกnh quan trแปng ฤ‘รกng chรบ รฝ lร  khแบฃ nฤƒng kiแปƒm tra xem tแป‡p cรณ tแป“n tแบกi hay khรดng. Chแปฉc nฤƒng nร y ฤ‘รณng vai trรฒ then chแป‘t trong viแป‡c trรกnh cรกc lแป—i hoแบทc kแบฟt quแบฃ ngoร i รฝ muแป‘n trong quรก trรฌnh thao tรกc vแป›i tแป‡p. Hรดm nay, chรบng tรดi mong muแป‘n mแป• xแบป quรก trรฌnh xรกc minh sแปฑ tแป“n tแบกi cแปงa tแป‡p bแบฑng Lua.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: userref phแบฃn แปฉng

ฤรขy lร  cรกch bแบกn cรณ thแปƒ cแบฅu trรบc bร i viแบฟt ฤ‘ฦฐแปฃc yรชu cแบงu cแปงa mรฌnh vแป phแบฃn แปฉng โ€œuserefโ€:

React lร  mแป™t thฦฐ viแป‡n ฤ‘ฦฐแปฃc cรดng nhแบญn rแป™ng rรฃi ฤ‘แปƒ tแบกo giao diแป‡n ngฦฐแปi dรนng, ฤ‘แบทc biแป‡t lร  cรกc แปฉng dแปฅng mแป™t trang. ฤรขy lร  mแป™t thฦฐ viแป‡n nhแบน vร  linh hoแบกt ฤ‘ฦฐแปฃc thiแบฟt kแบฟ ฤ‘แปƒ nรขng cao trแบฃi nghiแป‡m ngฦฐแปi dรนng. Phรกt triแปƒn web ฤ‘รฃ ฤ‘แบกt ฤ‘แบฟn nhแปฏng chรขn trแปi mแป›i vแป›i cรกc tรญnh nฤƒng nhฦฐ Hook do React mang lแบกi. Mแป™t tรญnh nฤƒng thiแบฟt yแบฟu nhฦฐ vแบญy, hoแบทc bแบกn cรณ thแปƒ xem xรฉt nรณ, mแป™t hook do React cung cแบฅp lร  useRef. useRef thฦฐแปng ฤ‘ฦฐแปฃc sแปญ dแปฅng ฤ‘แปƒ truy cแบญp cรกc nรบt DOM hoแบทc cรกc phแบงn tแปญ React.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: phรดng chแปฏ gรณc cแบกnh tuyแป‡t vแปi

Chแบฏc chแบฏn rแป“i, ฤ‘รขy lร  bร i viแบฟt dร i vแป Font Awesome Angular:

Font Awesome lร  mแป™t thฦฐ viแป‡n biแปƒu tฦฐแปฃng tuyแป‡t vแปi cรณ thแปƒ ฤ‘ฦฐแปฃc sแปญ dแปฅng trong cรกc แปฉng dแปฅng Angular cแปงa chรบng tรดi. Viแป‡c kแบฟt hแปฃp Font Awesome cho phรฉp cรกc nhร  phรกt triแปƒn truy cแบญp vร o hร ng trฤƒm biแปƒu tฦฐแปฃng vectฦก linh hoแบกt vร  cรณ thแปƒ mแปŸ rแป™ng cรณ thแปƒ ฤ‘ฦฐแปฃc cรก nhรขn hรณa bแบฑng CSS. ฤiแปu nร y ฤ‘แบทc biแป‡t hแปฏu รญch vรฌ nรณ cho phรฉp chรบng ta sแปญ dแปฅng cรกc biแปƒu tฦฐแปฃng ฤ‘แบนp mร  khรดng cแบงn phแปฅ thuแป™c nhiแปu vร o cรกc tแป‡p ฤ‘แป“ hแปa hoแบทc hรฌnh แบฃnh. ฤiแปu nร y thแปฑc sแปฑ cรณ thแปƒ ฤ‘ฦกn giแบฃn hรณa viแป‡c bแบฃo trรฌ vร  tแป• chแปฉc cรกc dแปฑ รกn Angular cแปงa bแบกn. Trong hฦฐแป›ng dแบซn nร y, chรบng ta sแบฝ tรฌm hiแปƒu cรกch kแบฟt hแปฃp Font Awesome vร o แปฉng dแปฅng Angular cแปงa bแบกn theo tแปซng bฦฐแป›c.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: thay ฤ‘แป•i kรญch thฦฐแป›c cแปญa sแป•

Thay ฤ‘แป•i kรญch thฦฐแป›c cแปญa sแป• cรณ vแบป nhฦฐ lร  mแป™t nhiแป‡m vแปฅ khรดng ฤ‘รกng kแปƒ trong quรก trรฌnh phรกt triแปƒn web, nhฦฐng nรณ thแปฑc sแปฑ liรชn quan ฤ‘แบฟn khรก nhiแปu khรกi niแป‡m tแปซ JavaScript vร  Typescript, ฤ‘แป“ng thแปi ฤ‘รณng mแป™t vai trรฒ quan trแปng trong viแป‡c ฤ‘แบฃm bแบฃo thiแบฟt kแบฟ ฤ‘รกp แปฉng vร  thรขn thiแป‡n vแป›i ngฦฐแปi dรนng. Trong bแป‘i cแบฃnh UI/UX ฤ‘แป™ng, chแปฉc nฤƒng 'thay ฤ‘แป•i kรญch thฦฐแป›c cแปญa sแป•' lร  tแป‘i quan trแปng. Cรกc vรญ dแปฅ hร ng ngร y cรณ thแปƒ bao gแป“m mแป™t thanh bรชn co lแบกi khi thay ฤ‘แป•i kรญch thฦฐแป›c cแปญa sแป• ฤ‘แปƒ mang lแบกi khรดng gian ฤ‘แปc liแปn mแบกch hoแบทc hรฌnh แบฃnh thฦฐ viแป‡n tแปฑ ฤ‘iแปu chแป‰nh ฤ‘แปƒ trรกnh biแบฟn dแบกng. Viแป‡c sแปญa ฤ‘แป•i ฤ‘ฦฐแปฃc thแปฑc hiแป‡n mแป™t cรกch phแบฃn แปฉng bแบฑng cรกch lแบฏng nghe sแปฑ kiแป‡n thay ฤ‘แป•i kรญch thฦฐแป›c cแปญa sแป•.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: bแป qua node_modules

Lร  mแป™t nhร  phรกt triแปƒn, chแบฏc hแบณn bแบกn ฤ‘รฃ tแปซng sแปญ dแปฅng thฦฐ mแปฅc `node_modules` trong cรกc dแปฑ รกn cแปงa mรฌnh. ฤรขy lร  mแป™t phแบงn quan trแปng trong thแบฟ giแป›i JavaScript vร  TypeScript, ฤ‘แบทc biแป‡t lร  trong cรกc dแปฑ รกn sแปญ dแปฅng Node.js. Nhแปฏng `node_modules` nร y giแป‘ng nhฦฐ DNA cho dแปฑ รกn cแปงa bแบกn, bao gแป“m tแบฅt cแบฃ cรกc thฦฐ viแป‡n hoแบทc phแบงn phแปฅ thuแป™c mร  mรฃ cแปงa bแบกn cแบงn ฤ‘แปƒ thแปฑc thi chรญnh xรกc. Vแบฅn ฤ‘แป lร  thฦฐ mแปฅc nร y cรณ thแปƒ tฤƒng kรญch thฦฐแป›c nhanh chรณng, khiแบฟn dแปฑ รกn cแปงa bแบกn trแปŸ nรชn nแบทng nแป, ฤ‘แบทc biแป‡t lร  vแป hแป‡ thแป‘ng kiแปƒm soรกt phiรชn bแบฃn. Ngoร i ra, cรณ thแปƒ cรณ vรด sแป‘ xung ฤ‘แป™t vแป phiรชn bแบฃn nแบฟu khรดng ฤ‘ฦฐแปฃc xแปญ lรฝ ฤ‘รบng cรกch.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: ts queryselectorall dฦฐแป›i dแบกng htmlelement

Trong xรฃ hแป™i ngร y nay, tรฌnh trแบกng quรก tแบฃi thรดng tin lร  ฤ‘iแปu phแป• biแบฟn, viแป‡c xแปญ lรฝ cรกc tร i liแป‡u HTML cลฉng khรดng phแบฃi lร  ngoแบกi lแป‡. Mแปi trang web trรชn thแบฟ giแป›i internet ฤ‘แปu ฤ‘ฦฐแปฃc xรขy dแปฑng trรชn HTML, tแบกo ra mแป™t mแบกng lฦฐแป›i mรช cung cรกc phแบงn tแปญ vร  thแบป. Chรฌa khรณa ฤ‘แปƒ ฤ‘iแปu hฦฐแป›ng qua mแบกng lฦฐแป›i nร y mแป™t cรกch cรณ cแบฅu trรบc vร  cรณ hแป‡ thแป‘ng lร  thรดng qua viแป‡c sแปญ dแปฅng truy vแบฅnSelectorAll phฦฐฦกng thแปฉc trong JavaScript hoแบทc, trong trฦฐแปng hแปฃp cแปงa chรบng tรดi แปŸ ฤ‘รขy, TypeScript. Hรดm nay, chรบng ta sแบฝ ฤ‘i sรขu vร o viแป‡c tแบญn dแปฅng cรกc khแบฃ nฤƒng cแปงa querySelectorAll dฦฐแป›i dแบกng HTMLElement trong TypeScript.

Tรฌm hiแปƒu thรชm vแป PNV

ฤรฃ giแบฃi quyแบฟt: mแบฃng ฤ‘แบฃo ngฦฐแปฃc ts

ฤแบฃo ngฦฐแปฃc mแป™t mแบฃng trong Typescript vแป cฦก bแบฃn liรชn quan ฤ‘แบฟn viแป‡c thay ฤ‘แป•i thแปฉ tแปฑ cแปงa cรกc phแบงn tแปญ bรชn trong mแป™t mแบฃng tแปซ chuแป—i cรฒn lแบกi sang chuแป—i ngฦฐแปฃc lแบกi. Quรก trรฌnh nร y lร  mแป™t khรญa cแบกnh quan trแปng trong viแป‡c thao tรกc vแป›i mแบฃng vร  do ฤ‘รณ, cรณ thแปƒ cแปฑc kแปณ hแปฏu รญch trong viแป‡c giแบฃi quyแบฟt nhiแปu vแบฅn ฤ‘แป phแปฉc tแบกp.

Sแบฃn phแบฉm Bแบฃn ฤ‘รกnh mรกy ngรดn ngแปฏ bao gแป“m mแป™t phฦฐฦกng thแปฉc tรญch hแปฃp ฤ‘แปƒ ฤ‘แบฃo ngฦฐแปฃc mแบฃng, ฤ‘ฦฐแปฃc gแปi lร  hร m array.reverse(). Thแบญt vแบญy, bแบฑng cรกch sแปญ dแปฅng hร m nร y, chรบng ta cรณ thแปƒ dแป… dร ng ฤ‘แบฃo ngฦฐแปฃc bแบฅt kแปณ mแบฃng nร o trong Typescript.

ฤแปƒ minh hแปa cรกch sแปญ dแปฅng cแปงa nรณ, hรฃy xem xรฉt mแบฃng mแบซu sau: 

let array = [1, 2, 3, 4, 5];

Sau ฤ‘รณ chรบng ta cรณ thแปƒ ฤ‘แบฃo ngฦฐแปฃc mแบฃng nร y bแบฑng cรกch sแปญ dแปฅng hร m array.reverse() nhฦฐ sau: 

array = array.reverse();

Thao tรกc nร y sแบฝ ฤ‘แบฃo ngฦฐแปฃc thแปฉ tแปฑ cแปงa cรกc phแบงn tแปญ trong mแบฃng ban ฤ‘แบงu sao cho trรฌnh tแปฑ cแปงa nรณ trแปŸ nรชn ngฦฐแปฃc lแบกi vแป›i trฦฐแป›c khi รกp dแปฅng hร m.

Tรฌm hiแปƒu thรชm vแป PNV