Code delen en hergebruiken
Leer strategieën om code maximaal te hergebruiken tussen client en server, vooral voor typen en hulpprogramma's.
Code delen en hergebruiken is een gratis tRPC API's met typeveiligheid van begin tot eind-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject tRPC API's met typeveiligheid van begin tot eind. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Waarom code delen?
In een tRPC-monorepo heb je vaak meerdere applicaties (client, server, beheerpaneel) die met dezelfde gegevensstructuren moeten werken of vergelijkbare taken moeten uitvoeren.
Code delen is een krachtige techniek die dubbele code helpt verminderen, consistentie waarborgt en de onderhoudbaarheid van je project als geheel verbetert.
Types tussen client en server
Een van de grootste voordelen van tRPC is end-to-end-typesafety. Dat betekent dat je frontend automatisch weet welke types gegevens hebben die je backend verzendt en ontvangt.
Deze functionaliteit steunt sterk op het delen van TypeScript-types en interfaces tussen je client- en serverapplicaties.
Een gedeeld type definiëren
Laten we een eenvoudige User-interface maken in een speciale map packages/types. Dit pakket wordt door zowel je server als je client geïmporteerd.
/* packages/types/src/user.ts */
export interface User {
id: string;
name: string;
email: string;
}Gedeelde types aan de serverzijde
Nu kunnen we dit type User gebruiken om de verwachte uitvoer van een tRPC-query in onze backend te definiëren. Zo zorgen we ervoor dat de gegevens die de server verzendt strikt voldoen aan de structuur van User.
/* packages/server/src/router/user.ts */
import { publicProcedure, router } from '../trpc';
import { User } from '@my-monorepo/types'; // Import shared type
export const userRouter = router({
getUsers: publicProcedure
.query(async () => {
const users: User[] = [
{ id: '1', name: 'Alice', email: 'alice@example.com' },
{ id: '2', name: 'Bob', email: 'bob@example.com' },
];
return users; // tRPC infers return type as User[]
}),
});Gedeelde types aan de clientzijde
Op de client leidt tRPC automatisch de typen voor users af op basis van de definitie op de server. Hoewel een expliciete import niet altijd nodig is voor type-inferentie, maakt die de code duidelijker en kun je het type gebruiken voor lokale status of eigenschappen aan de clientzijde.
/* packages/client/src/components/UserList.tsx */
import { trpc } from '../utils/trpc';
import { User } from '@my-monorepo/types'; // Optional, but good practice
function UserList() {
const { data: users, isLoading } = trpc.user.getUsers.useQuery();
if (isLoading) return <div>Loading users...</div>;
return (
<div>
{users?.map((user: User) => ( // 'user' is typed as User
<p key={user.id}>{user.name} ({user.email})</p>
))}
</div>
);
}Utilityfuncties delen
Naast typen kun je nog veel meer code delen. Denk aan algemene utilityfuncties, constanten, validatieschema's (zoals Zod-schema's) en zelfs gedeelde UI-componenten als je een componentbibliotheek gebruikt.
Hierdoor blijft de gebruikerservaring consistent en verminder je dubbele code in je applicaties.
Een utilitypakket maken
We maken een eenvoudige utilityfunctie in een map packages/utils die een volledige naam opmaakt. We voegen ook een gedeelde constante toe.
/* packages/utils/src/format.ts */
export function formatFullName(firstName: string, lastName: string): string {
return `${firstName} ${lastName}`;
}
export const APP_NAME = 'CoddyKit Learn'; // Example constantUtilities aan de serverzijde
Je kunt deze gedeelde utilityfuncties rechtstreeks importeren en gebruiken in je tRPC-backendprocedures. Zo blijft de logica consistent, ongeacht of die wordt geactiveerd door een API-aanroep of interne serverprocessen.
/* packages/server/src/router/profile.ts */
import { publicProcedure, router } from '../trpc';
import { formatFullName } from '@my-monorepo/utils'; // Import shared utility
import { z } from 'zod'; // Assuming Zod is configured
export const profileRouter = router({
getUserProfile: publicProcedure
.input(z.object({ firstName: z.string(), lastName: z.string() }))
.query(({ input }) => {
const fullName = formatFullName(input.firstName, input.lastName);
return { greeting: `Hello, ${fullName}!` };
}),
});Utilities aan de clientzijde
Op dezelfde manier kan je clientapplicatie exact dezelfde utilityfuncties en constanten importeren en gebruiken. Zo zijn berekeningen en weergegeven tekst consistent met de logica op de server.
/* packages/client/src/components/Greeting.tsx */
import { formatFullName, APP_NAME } from '@my-monorepo/utils'; // Import shared utility
function Greeting() {
const firstName = "Jane";
const lastName = "Doe";
const formattedName = formatFullName(firstName, lastName);
return (
<div>
<h1>Welcome to {APP_NAME}!</h1>
<p>User: {formattedName}</p>
</div>
);
}Aanbevolen werkwijzen voor gedeelde code
- Granulariteit: Maak kleine, gerichte gedeelde pakketten (bijvoorbeeld
types,utils,ui). - Afhankelijkheden: Gedeelde pakketten moeten zo min mogelijk externe afhankelijkheden hebben, zodat andere apps niet onnodig groot worden.
- Vermijd circulaire afhankelijkheden: Let erop dat er geen circulaire afhankelijkheden ontstaan tussen gedeelde pakketten of tussen een app en gedeelde pakketten.
- Testen: Test gedeelde code grondig, omdat wijzigingen meerdere applicaties kunnen beïnvloeden.
Voordelen van gedeelde code
Welke van de volgende opties zijn belangrijke voordelen van het delen van typen en utilityfuncties tussen client en server in een tRPC-monorepo?
Samenvatting: delen loont
We hebben onderzocht hoe het delen van typen en utilityfuncties in een tRPC-monorepo de efficiëntie maximaliseert. Deze aanpak vermindert duplicatie, verbetert de typeveiligheid en maakt client- en serverapplicaties beter onderhoudbaar. Door je project zorgvuldig te structureren, kun je robuuste en consistente full-stackapplicaties bouwen.
Leer tRPC API's met typeveiligheid van begin tot eind met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 10
- Lessen
- 40
Veelgestelde vragen
Is de les “Code delen en hergebruiken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad tRPC API's met typeveiligheid van begin tot eind, waaronder “Code delen en hergebruiken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat leer ik in “Code delen en hergebruiken”?
Leer strategieën om code maximaal te hergebruiken tussen client en server, vooral voor typen en hulpprogramma's. Je oefent met tRPC API's met typeveiligheid van begin tot eind door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met tRPC API's met typeveiligheid van begin tot eind te beginnen?
Ervaring vooraf is niet nodig. tRPC API's met typeveiligheid van begin tot eind op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Code delen en hergebruiken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over tRPC API's met typeveiligheid van begin tot eind?
Ja. Elke les over tRPC API's met typeveiligheid van begin tot eind bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een tRPC-monorepo instellen
- Code delen en hergebruiken
- tRPC-functionaliteit uitbreiden
- Gedeelde tRPC-packages versies geven en publiceren