Koddelning och återanvändning
Lär er strategier för att maximera kodåteranvändningen mellan klient och server, särskilt för typer och verktyg.
Koddelning och återanvändning är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.
Varför dela kod?
I ett tRPC-monorepo har ni ofta flera applikationer (klient, server, administrationspanel) som behöver arbeta med samma datastrukturer eller utföra liknande uppgifter.
Koddelning är en kraftfull teknik som minskar duplicering, säkerställer enhetlighet och förbättrar projektets övergripande underhållbarhet.
Typer mellan klient och server
En av tRPC:s största fördelar är typsäkerhet från frontend till backend. Det innebär att frontend automatiskt känner till typerna för de data som backend skickar och tar emot.
Den här funktionaliteten bygger i hög grad på att TypeScript-typer och gränssnitt delas mellan klient- och serverapplikationerna.
Definiera en delad typ
Vi skapar ett enkelt User-gränssnitt i den dedikerade katalogen packages/types. Det här paketet importeras av både servern och klienten.
/* packages/types/src/user.ts */
export interface User {
id: string;
name: string;
email: string;
}Delade typer på serversidan
Nu kan vi använda den här User-typen för att definiera den förväntade utdata som en tRPC-query på backend ska returnera. Det säkerställer att data som skickas från servern strikt följer strukturen 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[]
}),
});Delade typer på klientsidan
På klienten härleder tRPC automatiskt typerna för users utifrån serverns definition. Även om en explicit import inte alltid behövs för typinferens förbättrar den tydligheten och gör att du kan använda typen för lokalt klienttillstånd eller props.
/* 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>
);
}Dela hjälpfunktioner
Förutom typer kan många andra delar av koden delas. Det omfattar gemensamma hjälpfunktioner, konstanter, valideringsscheman (till exempel Zod-scheman) och även delade UI-komponenter om du använder ett komponentbibliotek.
Genom att dela dessa delar blir användarupplevelsen konsekvent och mängden duplicerad kod i dina applikationer minskar.
Skapa ett hjälppaket
Vi skapar en enkel hjälpfunktion i katalogen packages/utils som formaterar ett fullständigt namn. Vi inkluderar också en gemensam konstant.
/* packages/utils/src/format.ts */
export function formatFullName(firstName: string, lastName: string): string {
return `${firstName} ${lastName}`;
}
export const APP_NAME = 'CoddyKit Learn'; // Example constantHjälpfunktioner på serversidan
Du kan importera och använda dessa gemensamma hjälpfunktioner direkt i dina tRPC-procedurer i backend. Det säkerställer en konsekvent logik, oavsett om den utlöses av ett API-anrop eller av interna serverprocesser.
/* 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}!` };
}),
});Hjälpfunktioner på klientsidan
På motsvarande sätt kan din klientapplikation importera och använda exakt samma hjälpfunktioner och konstanter. Det garanterar att beräkningar och text som visas överensstämmer med serverns logik.
/* 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>
);
}Bästa praxis för delad kod
- Detaljnivå: Skapa små, fokuserade delade paket (till exempel
types,utils,ui). - Beroenden: Delade paket bör ha så få externa beroenden som möjligt för att undvika att andra appar blir onödigt stora.
- Undvik cirkulära beroenden: Var noga med att inte skapa cirkulära beroenden mellan delade paket eller mellan appar och delade paket.
- Testning: Testa delad kod noggrant, eftersom ändringar kan påverka flera applikationer.
Fördelar med delad kod
Vilka av följande är de viktigaste fördelarna med att dela typer och hjälpfunktioner mellan klient och server i en tRPC-monorepo?
Sammanfattning: Att dela är att bry sig!
Vi har gått igenom hur delning av typer och hjälpfunktioner i en tRPC-monorepo är avgörande för att maximera effektiviteten. Detta arbetssätt minskar duplicering, förbättrar typsäkerheten och gör klient- och serverapplikationerna enklare att underhålla. Genom att strukturera projektet noggrant kan du bygga robusta och konsekventa fullstackapplikationer.
Lär dig Typsäkra API:er från frontend till backend med tRPC med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 10
- Lektioner
- 40
Vanliga frågor
Är lektionen ”Koddelning och återanvändning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Koddelning och återanvändning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.
Vad lär jag mig i ”Koddelning och återanvändning”?
Lär er strategier för att maximera kodåteranvändningen mellan klient och server, särskilt för typer och verktyg. Ni övar på Typsäkra API:er från frontend till backend med tRPC med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Typsäkra API:er från frontend till backend med tRPC?
Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Koddelning och återanvändning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Typsäkra API:er från frontend till backend med tRPC-lektionen?
Ja. Varje Typsäkra API:er från frontend till backend med tRPC-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera ett tRPC-monorepo
- Koddelning och återanvändning
- Utöka tRPC:s funktionalitet
- Versionshantera och publicera delade tRPC-paket