Aquest projecte conté exercicis pràctics per aprendre els conceptes bàsics de TypeScript i els tipus de transformació. Els exercicis estan organitzats en dos fitxers de test principals.
- Node.js (v20 o superior)
- Clona el repositori:
git clone <url-del-repositori>
cd it-sprint2-basics-ts- » Desconnecta el teu repositori del repositori de IT Academy. Utilitza la següent ordre de git:
git remote rm origin- Instal·la les dependències:
npm installPer executar tots els tests:
npm testPer executar només la validació de tipus:
npm test:typesAquest projecte utilitza Husky per automatitzar la validació del codi abans de fer commits. Això garanteix que només es pugui fer commit de codi que passi tots els tests i validacions de TypeScript.
Quan intentes fer un commit (git commit), Husky executa automàticament:
npm run test- Executa tots els tests amb Vitestnpm run test:types- Valida els tipus amb el compilador de TypeScript
Si qualsevol d'aquestes validacions falla, el commit es cancel·larà fins que resolvis els errors. Això ajuda a mantenir la qualitat del codi i evita commits amb errors.
Abans de fer commit, pots executar manualment les comandes per assegurar-te que tot està correcte:
npm test
npm run test:typesAquest fitxer conté 18 reptes que cobreixen els conceptes fonamentals de TypeScript:
Llegeix l'article "Migrating from JavaScript" a la documentació de TypeScript i troba com solucionar errors de TypeScript bàsics.
Descobreix com tipar params com un objecte amb una clau first que sigui un nombre i una clau second que també sigui un nombre.
Has d'esbrinar com tipar l'objecte perquè last sigui opcional.
Has d'esbrinar com marcar el paràmetre last com a opcional.
Consulta la documentació de TypeScript i determina com canviar defaultUser perquè el test passi.
Actualitza la interfície User per restringir la propietat role a una de les opcions establertes: 'admin', 'user' o 'super-admin'.
Has de solucionar aquest error de tipus esbrinant com representar arrays.
Anota la funció makeUser perquè sempre retorni un User.
Has d'esbrinar com actualitzar l'anotació del tipus de retorn perquè TypeScript estigui satisfet.
Actualitza guitarists perquè estigui tipat com un Set de strings.
Consulta la documentació de TypeScript i esbrina què pot estar causant aquest problema. Actualitza cache perquè estigui tipat correctament i els errors desapareguin.
Escriu la funció perquè els tests passin.
Has de convertir el tipus 'unknown' en un tipus on sàpigues què és. Hi ha diverses maneres de resoldre aquest repte!
Aquí, la propietat id es comparteix entre les tres interfícies. Pots trobar una manera de refactoritzar això per fer-ho més DRY?
Actualitza el tipus de retorn de la funció perquè sigui 'User i { posts: Post[] }'.
Com creem un nou tipus d'objecte amb NOMÉS les propietats firstName i lastName de User? Llegeix la documentació de TypeScript sobre Utility Types.
La funció 'onFocusChange' és actualment 'unknown'. Visita la documentació de TypeScript i esbrina el tipus apropiat per la funció.
Tipa les funcions perquè els errors desapareguin. Consulta la sintaxi de tipatge de funcions i Promise.
Aquest fitxer conté 13 reptes sobre tipus de transformació i conceptes avançats:
Llegeix la documentació de TypeScript sobre Utility Types i esbrina com utilitzar ReturnType per extreure el tipus de retorn de myFunc. Pista: pots utilitzar typeof per obtenir el tipus d'una variable o funció.
Utilitza Parameters per obtenir el tipus dels paràmetres de la funció makeQuery.
Utilitza ReturnType per obtenir el tipus de retorn de getUser.
Obté les claus d'un objecte com a tipus d'unió.
Utilitza indexed access types per obtenir el tipus d'una propietat concreta d'un objecte.
Utilitza indexed access types per obtenir el tipus d'una propietat concreta d'una unió d'objectes.
Utilitza indexed access types i unions per obtenir el tipus dels valors d'un array.
Utilitza indexed access types per obtenir el tipus dels valors d'un objecte amb as const.
Dona un exemple de terminologia: union, discriminated union i enum.
Extreu un tipus d'un element concret d'una discriminated union.
Exclou un tipus concret d'una discriminated union.
Extreu el tipus del discriminador d'una discriminated union.
Utilitza l'array per resoldre els dos tipus:
AppleOrBanana, que ha de ser una unió dels dos primers valors de l'array ("apple" | "banana").Fruit, que ha de ser una unió de tots els valors de l'array ("apple" | "banana" | "orange").
Llegeix la secció sobre Indexed Access Types de la documentació de TypeScript. Pista: pots utilitzar l'operador typeof per obtenir el tipus de l'array i després accedir als seus valors amb l'índex [number] o amb una tupla d'índexs específics.
Important: Descomenta els reptes d'un en un per resoldre'ls progressivament.
- Obre el fitxer de test corresponent (
basics-refactor.test.tsotransformation-types.test.ts) - Descomenta només el bloc de codi del primer repte que vols resoldre
- Resol l'exercici seguint les instruccions del comentari
- Executa
npm testper verificar que la solució és correcta - Un cop completat i verificat, torna a comentar el repte resolt i descomenta el següent
- Repeteix el procés amb cada repte
Nota: Si descomentes tots els reptes alhora, els errors es poden acumular i dificultar la identificació del problema específic de cada exercici.
GPL-3.0