Bästa metoder i TypeScript-programmering

Den här artikeln förklarar bästa metoder inom TypeScript-programmering.

Den här guiden förklarar praktiska bästa metoder för att använda TypeScripts typer för att minska buggar och skriva mer läsbar kod.

YouTube Video

Bästa metoder i TypeScript-programmering

Den största fördelen med TypeScript är 'att förebygga buggar med typer och göra kodens syfte tydligt'.

Bästa metoder är inte bara regler utan en uppsättning principer för att skriva säker, läsbar och underhållbar kod. Nedan presenterar vi vanliga bästa metoder för TypeScript med praktiska exempel.

Undvik any och ge alltid typer meningsfulla definitioner

Först, låt oss titta på punkten att undvika any och ge meningsfulla typer.

any inaktiverar typkontroll helt, vilket motverkar syftet med att använda TypeScript. Istället för att använda any bara för att få saker att fungera, är det viktigt att ange så beskrivande typer som möjligt.

1// Bad
2function parse(data: any) {
3  return data.value;
4}

Den här koden kan ta emot vilket värde som helst, så körfel kan inte förhindras.

1// Good
2type ParsedData = {
3  value: string;
4};
5
6function parse(data: ParsedData): string {
7  return data.value;
8}

Genom att definiera typer klargör du syftet med in- och utdata samt förbättrar säkerheten.

Definiera alltid objektstrukturer uttryckligen med hjälp av type eller interface.

Nästa, låt oss titta på vikten av att alltid explicit definiera objektstrukturer med type eller interface.

Om du använder objekt ad hoc kan deras struktur bli tvetydig. Extrahera alltid typer för återanvändbarhet och underhållbarhet.

1// Bad
2function createUser(user: { name: string; age: number }) {
3  console.log(user.name);
4}

Även i små kodstycken är det viktigt att utveckla vanan att separera typer.

1// Good
2type User = {
3  name: string;
4  age: number;
5};
6
7function createUser(user: User): void {
8  console.log(user.name);
9}

Genom att namnge typer blir det mycket lättare att förstå hela kodbasen.

Använd unionstyper för att exakt representera alla möjliga tillstånd.

Om du använder råa string- eller number-typer för villkor kan oväntade värden slinka igenom. Genom att använda unionstyper kan du representera endast de tillåtna tillstånden på typnivå.

1// Bad
2function setStatus(status: string) {
3  console.log(status);
4}

I denna kod kan meningslösa strängar eller felaktiga värden inte upptäckas vid kompilering.

1// Good
2type Status = "idle" | "loading" | "success" | "error";
3
4function setStatus(status: Status): void {
5  console.log(status);
6}

Genom att använda unionstyper kan du på ett tillförlitligt sätt eliminera 'omöjliga tillstånd' vid kompilering. Som ett resultat kommer säkerheten i villkorssatser och kodens tillförlitlighet att förbättras.

Hantera null och undefined uttryckligen.

Nästa, låt oss titta på vikten av att explicit hantera null och undefined.

I TypeScript är det viktigt att uttrycka möjlig frånvaro av ett värde i typen. Om du låter saker vara tvetydiga kan de leda till körfel.

1type User = {
2  name: string;
3  email?: string;
4};

email kanske inte finns, så du bör hantera det utefter den förutsättningen.

1function printEmail(user: User): void {
2  if (user.email) {
3    console.log(user.email);
4  }
5}

Kontrollera alltid valfria värden innan du använder dem.

Använd typbestämningar (as) endast som sista utväg.

Nästa, låt oss titta på vikten av att inte överanvända typintyganden.

Typkontroller kringgår tillfälligt TypeScripts typkontroller för att deklarera: 'Jag vet att detta värde har denna typ.'. Överanvändning av dem undergräver typsäkerheten.

1// Bad
2const value = input as string;

I denna kod uppstår inget fel även om det faktiska värdet inte är en sträng, vilket kan orsaka fel under körning. Som visas i följande kod, välj att först kontrollera säkert med hjälp av typguards.

1// Good
2function isString(value: unknown): value is string {
3  return typeof value === "string";
4}
5
6if (isString(input)) {
7  console.log(input.toUpperCase());
8}

Typguards är en mekanism för att säkert fastställa en typ samtidigt som det faktiska värdet kontrolleras. Genom att prioritera typguards över typkontroller kan du lättare förhindra fel vid körning.

Förlita dig inte för mycket på typinferens för returtyper.

Nästa, låt oss titta på vikten av att inte lita för mycket på inferens för returtyper.

TypeScripts typinferens är kraftfull, men det är säkrare att uttryckligen ange returtyper för publika funktioner. Detta minimerar de potentiella konsekvenserna av framtida ändringar.

1// Bad
2function sum(a: number, b: number) {
3  return a + b;
4}

Tydliggör alltid din avsikt även i små funktioner.

1// Good
2function sum(a: number, b: number): number {
3  return a + b;
4}

Att skriva ut returtyper ökar ditt APIs stabilitet.

Hantera indata säkert genom att använda unknown.

Nästa, låt oss titta på vikten av att säkert ta emot extern input med unknown.

För extern indata såsom API:er, JSON eller användarinmatning, använd unknown istället för any. Genom att göra detta ser du till att alla värden valideras och upprätthåller typsäkerhet.

1// Bad
2function handleResponse(data: any) {
3  console.log(data.id);
4}

Så här validerar du typer med unknown.

 1// Good
 2function handleResponse(data: unknown): void {
 3  if (
 4    typeof data === "object" &&
 5    data !== null &&
 6    "id" in data
 7  ) {
 8    console.log((data as { id: number }).id);
 9  }
10}

unknown kan inte användas som det är; det är en typ som kräver validering. Det är särskilt effektivt vid hantering av extern indata.

Öka uttrycksfullheten genom att kombinera små typer.

Nästa, låt oss titta på vikten av att öka uttrycksfullheten genom att kombinera små typer.

Att definiera stora typer på en gång minskar läsbarheten och underhållbarheten. Dela upp dina typer i meningsfulla enheter och kombinera dem efter behov.

 1type Id = number;
 2
 3type UserProfile = {
 4  id: Id;
 5  name: string;
 6};
 7
 8type UserWithStatus = UserProfile & {
 9  status: "active" | "inactive";
10};

Att behandla typer som komponenter hjälper till att organisera din design.

type och interface

Fördelar med interface

type och interface kan båda definiera typer, men deras avsedda användning och egenskaper skiljer sig åt. Genom att använda dem för sina lämpliga roller blir syftet med dina typdefinitioner tydligare.

 1// Bad
 2type User = {
 3  id: number;
 4  name: string;
 5};
 6
 7type AdminUser = {
 8  id: number;
 9  name: string;
10  role: "admin";
11};

Om du duplicerar gemensamma delar på detta sätt blir din kod känslig för förändringar.

1// Good
2interface User {
3  id: number;
4  name: string;
5}
6
7interface AdminUser extends User {
8  role: "admin";
9}

interface är idealiskt för designer som innefattar utökning (extends) och lämpar sig bäst för att uttrycka objektens 'form'.

Fördelar med type

Å andra sidan är type mer uttrycksfull och passar för hantering av union- och snitt-typer.

1// Good
2type Status = "idle" | "loading" | "success" | "error";
3
4type ApiResponse<T> =
5  | { status: "success"; data: T }
6  | { status: "error"; message: string };

type passar bra för att uttrycka tillstånd, alternativ och kombinationer.

Riktlinjer för att välja mellan type och interface

Som tumregel, använd interface för objektstrukturer och kontrakt, och type när du behöver uttrycksfullheten hos union-, snitt- eller typoperationer.

Båda fungerar liknande, men det är viktigt att välja utifrån vad som bäst kommunicerar anledningen till typens existens.

Behandla dina typer som dokumentation.

Slutligen, låt oss titta på vikten av att skriva typer som dokumentation.

Bra typdefinitioner förmedlar mer information än kommentarer någonsin kan. Det är viktigt att eftersträva ett tillstånd där specifikationen kan förstås enbart genom att titta på typerna.

1type ApiError = {
2  code: number;
3  message: string;
4  retryable: boolean;
5};

På detta sätt är en av TypeScripts stora styrkor att typdefinitioner kan fungera som en sorts specifikationsdokument.

Sammanfattning

Bästa metoder i TypeScript handlar inte om att vara överdrivet strikt. Kärnan är att tydliggöra syftet med hjälp av typer och skriva kod som är robust mot förändringar.

Genom att samla på dig små regler i det dagliga utvecklingsarbetet kan du uppnå långsiktiga effekter som 'lättare kodgranskning', 'färre buggar' och 'bättre förståelse för ditt framtida jag och andra.'.

Om du först tänker 'hur kan jag uttrycka detta med typer?' kommer du att skriva högkvalitativ kod i TypeScript-stil.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video