JavaScript är en utvecklares favorit, som vi alla vet. Men den är väl inte fri från fel? När projekt blir längre och mer komplexa kan sannolikheten för typfel från utvecklare stiga.
De bästa mjukvaruutvecklingsföretagen kommer att försöka rulla ut felfria koder så mycket som möjligt. Det är här TypeScript spelar sin roll och hjälper kodare att undvika dessa troliga fallgropar.
Låt oss nu se hur TypeScript hjälper utvecklare att driva projekt smidigt på ett felfritt sätt med dess funktioner.
Vad är TypeScript?
När koderna körs lägger TypeScript till statisk skrivning i JavaScript för att identifiera fel innan koden körs. Statisk typning innebär deklaration av typen av värde, funktion etc. Således kan mjukvaruutvecklare avgöra om värdet vi skickar till en funktion är giltigt eller inte.
TypeScript är en maskinskriven superset av JavaScript som kompileras till vanlig JavaScript. TypeScript kan köras i vilken webbläsare som helst eller vilken motor som helst, oavsett om det är Node JS eller vilken JS-motor som helst. Med vägledning av TypeScript kan utvecklare hitta fel under kompilering och inte när programmet körs.
TypeScript har två delar:
- En syntax
- En transpiler
Typkontroll i React /React Native
React och React Native har i allmänhet 3 typer av statisk typkontroll, nämligen PropTypes, Flow och TypeScript.
PropTypes är en inbyggd typkontroll som låter dig kontrollera rekvisita på en komponent, och Flow är en statisk typkontroll som utvecklats av Facebook. Men TypeScript är överlägset Flow, och här är anledningen:
- Importera automatiskt med VS-kod
- Bästa autofixande linter
- Felmeddelanden meddelas bättre
- Flödet kräver filkommentarer med //@flow.
- Fel kan glömmas bort, och TypeScript kan vara till hjälp för att kontrollera typernas högra fält i början.
Hur lägger man till TypeScript i ditt React Native-projekt?
- Kör ‘npm install –save-dev typescript react-native-typescript-transformer @types/react @types/react-native för att installera nödvändiga beroenden.
- Detta kommer att lägga till TypeScript, React Native TypeScript Transformer och TypeScript-skrivning till projektet.
- Lägg till ett TypeScript-konfigurationsfilnamn med namnet tsconfig.json med det nödvändiga innehållet.
- Lägg nu till en konfigurationsfil med namnet rn-cli.config.jds för React Native TypeScript Transformer med det nödvändiga innehållet.
- Efter detta bör paketet förvänta sig .ts- och .tsx-filer och bör använda react-native-typescript-transformer för att kompilera källkod.
Hur migrerar man till TypeScript?
Du kan migrera ditt React Native-projekt till TypeScript genom att ändra filerna i rotmappen och nodmodulerna .js förutom att index.js ska ändras till .ts eller .tsx, om filerna innehåller JSX. Se till att dina skriptfiler har dessa tidigare nämnda filändelser. Detta kan göras progressivt genom att konvertera den befintliga kodbasen. Du behöver bara skapa nya filer i TypeScript, medan äldre koder i JavaScript.
Hur skapar man ett React-projekt med TypeScript?
Att skapa ett React Native-projekt med TypeScript kan göras antingen manuellt eller automatiskt. Här är stegen för att skapa ett React-projekt med TypeScript: Steg 1:
Insamling av tekniska krav
Se till att du är redo med följande verktyg:
- Senaste versionen Node.JS och npmkodredigerare
- Ensom Visual Studio Code
- Create React App (CRA)
Steg 2 : Konfigurera React med TypeScript
- Ladda ner CRA som ett nnpm-paket med npx-kommandot
- Antingen kan du använda React-appversioner med inbyggt TypeScript eller genom att använda –typescript som parameter
- Ett projekt skapas vars namn kan ändras av dig. Se till att filer som innehåller JSX ska vara en .tsx-fil och att filer som innehåller det enda TypeScript ska vara .ts-filer.
- Appens root-HTML-fil som finns i den offentliga mappen som kallas index.html injiceras med React-appen med hjälp av standardkoden.
- Byt namn på dina filer till .tsx eller .ts innan du startar servern, vilket kommer att generera filen tsconfig.json.
Steg 3: Köra appen
- Kör din app i utvecklingsläget. Identifiera rotmappen för ditt projekt och kör start npm-skriptet i terminalen
- Se till att din rotmapp har samma namn som din app och har filen package.json.
Du har nu en TypeScript-aktiverad React-app.
Vilka är fördelarna med TypeScript i React Native?
Självdokumentation:
Du kan skriva och underhålla typer du dokumenterar med värden du förväntar dig i en funktion eller komponent.
Enklare felsökning:
TypeScript kan berätta vad du gjorde fel och möjliggör enklare felsökning. Det kommer inte att finnas något pass av en sann sträng när du förväntade dig en boolean med TypeScript på plats.
Enkel omfaktorering:
TypeScript hjälper dig att byta namn på en funktion eller uppdatera ett argument, ifall du har glömt det.
En textredigerare eller IDE-integrerad:
TypeScript är integrerad med flera redigerare som låter utvecklare definiera, autokomplettera och tala om för dig vad som ska skickas till en funktion eller en komponent.
Större appar kan struktureras:
TypeScript kan hjälpa dig att definiera och strukturera hur din app fungerar och hjälper till att undvika eventuella låsningar som din app kan hamna i.
Mer garanti för JavaScript:
Med TypeScript får du ännu mer garanterad och giltig JavaScript som körs på vilken målnivå du anger. Straight JavaScript är dock inte lika giltigt eller garanterat som det TypeScript-drivna JavaScriptet.
Enkel användning:
När du skriver koder behöver du inte skriva 100 % TypeScript. Adoption av TypeScript kan göras även efter testvatten, eftersom giltig JavaScript fortfarande är giltig TypeScript.
Slutnot:
TypeScript har vunnit enorm popularitet bland utvecklare under de senaste åren. Här är fler skäl för dig att hålla dig till TypeScript:
- Komponenter är lätta att läsa och förstå
- JSX stöds bättre
- Vanliga bibliotek stöds som standard TypeScript
- Befintliga projekt kan gradvis anta det
- Statisk typkontroll och förbättrad IntelliSense
Så, vad är dina tankar? Ska du lägga till TypeScript för ditt nästa React-projekt, eller vill du migrera ditt befintliga React-projekt till TypeScript? För problemfri kodning kan du alltid kontakta React Native-apputvecklarna på Webdura. Låt oss njuta av en trevlig kodningstid tillsammans för att göra våra React-appar felfria!