Kodedeling og genbrug
Lær strategier til at maksimere genbrug af kode mellem klient og server, især for typer og hjælpefunktioner.
Kodedeling og genbrug er en gratis Typesikre API'er fra frontend til backend med tRPC-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Typesikre API'er fra frontend til backend med tRPC, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.
Hvorfor dele kode?
I et tRPC-monorepo har du ofte flere applikationer (klient, server, administrationspanel), der skal interagere med de samme datastrukturer eller udføre lignende opgaver.
Deling af kode er en effektiv teknik, der hjælper med at reducere gentagelser, sikre ensartethed og forbedre den overordnede vedligeholdelse af dit projekt.
Typer på tværs af klient og server
En af tRPC's største fordele er end-to-end-typesikkerhed. Det betyder, at din frontend automatisk kender typerne for de data, din backend sender og modtager.
Denne funktion afhænger i høj grad af, at TypeScript-typer og -interfaces deles mellem dine klient- og serverapplikationer.
Definition af en delt type
Lad os oprette et enkelt User-interface i en dedikeret mappe kaldet packages/types. Denne pakke importeres af både din server og klient.
/* packages/types/src/user.ts */
export interface User {
id: string;
name: string;
email: string;
}Delte typer på serversiden
Nu kan vi bruge denne User-type til at definere det forventede output fra en tRPC-forespørgsel på vores backend. Det sikrer, at de data, serveren sender, nøje følger User-strukturen.
/* 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[]
}),
});Delte typer på klientsiden
På klienten udleder tRPC automatisk typerne for users baseret på serverens definition. Selvom en eksplicit import ikke altid er nødvendig for typeudledning, gør den koden tydeligere og giver dig mulighed for at bruge typen til lokal tilstand eller props på klienten.
/* 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>
);
}Deling af hjælpefunktioner
Ud over typer kan mange andre dele af koden deles. Det omfatter almindelige hjælpefunktioner, konstanter, valideringsskemaer (for eksempel Zod-skemaer) eller endda delte UI-komponenter, hvis du bruger et komponentbibliotek.
Deling hjælper med at skabe en ensartet brugeroplevelse og reducerer overflødig kode på tværs af dine applikationer.
Oprettelse af en hjælpepakke
Lad os oprette en enkel hjælpefunktion i mappen packages/utils, som formaterer et fuldt navn. Vi inkluderer også en delt 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ælpefunktioner på serversiden
Du kan importere og bruge disse delte hjælpefunktioner direkte i dine tRPC-procedurer på backend. Det sikrer ensartet logik, uanset om den udløses af et API-kald eller af interne 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ælpefunktioner på klientsiden
På samme måde kan din applikation på klientsiden importere og bruge præcis de samme hjælpefunktioner og konstanter. Det garanterer, at beregninger og vist tekst stemmer overens med serverens 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>
);
}Bedste praksis for delt kode
- Detaljeringsgrad: Opret små, fokuserede delte pakker (for eksempel
types,utils,ui). - Afhængigheder: Delte pakker bør have så få eksterne afhængigheder som muligt for at undgå at gøre andre apps unødigt store.
- Undgå cirkulære afhængigheder: Pas på ikke at oprette cirkulære afhængigheder mellem delte pakker eller mellem en app og delte pakker.
- Test: Test delt kode grundigt, da ændringer kan påvirke flere applikationer.
Fordele ved delt kode
Hvilke af følgende er de primære fordele ved at dele typer og hjælpefunktioner mellem klient og server i et tRPC-monorepo?
Opsummering: Deling er omsorg!
Vi har undersøgt, hvordan deling af typer og hjælpefunktioner i et tRPC-monorepo er afgørende for at maksimere effektiviteten. Denne tilgang reducerer duplikering, forbedrer typesikkerheden og gør det samlet set nemmere at vedligeholde dine applikationer på klient og server. Ved at strukturere projektet omhyggeligt kan du bygge robuste og ensartede full-stack-applikationer.
Lær Typesikre API'er fra frontend til backend med tRPC med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 10
- Lektioner
- 40
Ofte stillede spørgsmål
Er lektionen “Kodedeling og genbrug” gratis?
Ja — alle 3 lektioner i læringssporet Typesikre API'er fra frontend til backend med tRPC, inklusive “Kodedeling og genbrug”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Kodedeling og genbrug”?
Lær strategier til at maksimere genbrug af kode mellem klient og server, især for typer og hjælpefunktioner. Du øver dig i Typesikre API'er fra frontend til backend med tRPC med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Typesikre API'er fra frontend til backend med tRPC?
Der kræves ingen tidligere erfaring. Typesikre API'er fra frontend til backend med tRPC på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Kodedeling og genbrug”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Typesikre API'er fra frontend til backend med tRPC-lektion?
Ja. Alle Typesikre API'er fra frontend til backend med tRPC-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Opsætning af et tRPC-monorepo
- Kodedeling og genbrug
- Udvidelse af tRPC-funktionalitet
- Versionsstyring og publicering af delte tRPC-pakker