När jag först började lära mig TypeScript var ett av förslagen jag ofta hörde: ”konvertera ett av dina befintliga projekt! Det är det bästa sättet att lära sig! ” Strax efter, en vän från Twitter erbjuds att göra bara det - visa mig hur man migrerar en React-app till TypeScript.

Syftet med denna artikel är att vara den vän för dig och hjälpa dig att migrera ditt eget projekt till TypeScript. För sammanhanget kommer jag att använda delar från ett personligt projekt som jag migrerade medan jag gick igenom denna process själv.

Planen

För att få denna process att känna sig mindre skrämmande, kommer vi att dela upp detta i steg så att du kan utföra migreringen i enskilda bitar. Jag tycker att detta alltid är bra när jag tar en stor uppgift. Här är alla steg vi tar för att migrera vårt projekt:

1. Lägg till TypeScript
2. Lägg till tsconfig.json
3. Börja enkelt
4. Konvertera alla filer
5. Öka striktheten
6. Städa upp det
7. Fira

OBS: det viktigaste steget i hela processen är nummer 7. Även om vi bara kan komma dit genom att arbeta igenom dem i sekvensordning.

1. Lägg till TypeScript till projektet

Först måste vi lägga till TypeScript i vårt projekt. Förutsatt att ditt React-projekt startades med create-react-app, Kan vi följ dokumenten och springa:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

eller om du använder yarn:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Lägg märke till att vi inte har ändrat något till TypeScript än. Om vi ​​kör kommandot för att starta projektet lokalt (yarn start i mitt fall), ingenting borde vara annorlunda. Om det är så är det bra! Vi är redo för nästa steg.

2. Lägg till tsconfig.json

Innan vi kan dra nytta av TypeScript, måste vi konfigurera detta via tsconfig.json. Det enklaste sättet för oss att komma igång är att stilla en med hjälp av detta kommando:

npx tsc --init

Detta får oss några grunder.

Vi har ännu inte interagerat med TypeScript. Vi har bara vidtagit nödvändiga åtgärder för att göra saker redo. Vårt nästa steg är att migrera en fil till TypeScript. Med detta kan vi slutföra detta steg och gå vidare till nästa.

3. Börja med en enkel komponent

Det fina med TypeScript är att du kan anta det stegvis. Vi kan börja med en enkel komponent för vår första del av denna migration. För mitt projekt kommer jag att börja med en SVG-komponent som ser ut så här:

import React from 'react' const Spinner = () => ( // By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" > <defs> <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"> <stop stopColor="#00a6f3" stopOpacity="0" offset="0%" /> <stop stopColor="#00a6f3" stopOpacity=".631" offset="63.146%" /> <stop stopColor="#00a6f3" offset="100%" /> </linearGradient> </defs> <g fill="none" fillRule="evenodd"> <g transform="translate(1 1)"> <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" strokeWidth="2" > <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /> </path> <circle fill="#00a6f3" cx="36" cy="18" r="1"> <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /> </circle> </g> </g> </svg>
) export default Spinner

För att konvertera detta ordentligt måste vi göra två saker:

1. Ändra filändelsen till .tsx
2. Lägg till typanteckningen

Eftersom denna komponent inte tar några rekvisita är det enda vi behöver ändra detta:

import React from 'react' + const Spinner: React.FC = () => (
//...the rest of the code
)

Låt oss dubbelkontrollera att saker fortfarande fungerar genom att köra projektet för att säkerställa att vi inte bryter något. Lägg märke till, här react-scripts kommer automatiskt att upptäcka de nya ändringarna och ändra våra tsconfig.json för oss! Voila! Hur vacker är det?

Och om allt är bra kommer vårt projekt att förbli i funktionsdugligt skick. Ge dig själv en klapp på baksidan! Du har migrerat din första fil till TypeScript. Om vi ​​ville stoppa här kunde vi göra det, men låt oss fortsätta.

4. Konvertera alla filer

Nästa steg är att göra det vi gjorde för steg 3, men för alla filer i projektet. Om projektet du migrerar är ganska stort föreslår jag att du gör detta över flera iterationer. Annars kan du tröttna dig själv.

Under det här steget kan du behöva lägga till ytterligare paket beroende på vilka tredjepartsbibliotek du använder. Till exempel använder jag moment så jag var tvungen att springa yarn add -D @types/moment att lägga till typerna som en devDependency.

Här är några andra saker att tänka på när du gör detta:

• Undertryck TypeScript-fel genom att lägga till // @ts-ignore på raden före felet
• Om en fil använder jsx (dvs. <App />) måste filändelsen vara .tsx istället för .ts
• Kör projektet lokalt för att se till att saker fortfarande fungerar (de borde vara)

När du har slutfört detta steg är de hårda grejerna gjort! Vårt projekt kommer att finnas i TypeScript, men vi måste öka striktheten för att dra fördel av fördelarna.

5. Öka tsconfig.json stränghet

Nu är vi redo att öka striktheten genom att möjliggöra strängare regler i våra tsconfig.json. Tack och lov, react-scripts kommer att informera oss om alla typfel när vi kör vårt projekt lokalt. Vi kommer att följa processen så:

1. aktivera regel
2. starta projekt lokalt
3. åtgärda fel

Och vi kommer att upprepa denna process för följande regler:

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

Jag vill dela ett tips. Om du upptäcker att något implicit har typen any och du är inte säker på hur du fixar det i det ögonblicket, inte. Skapa det här och använd det för att hysa felet:

export type FixMeLater = any

Vårt mål är att gå snabbt framåt och gå tillbaka senare för att fixa dessa.

Detta kommer att ge en större mängd typsäkerhet till vårt projekt. Om du vill läsa mer om kompilatoralternativ kan du läsa om det i TypeScript-handbok.

När vi har gjort detta kan vi sedan ersätta dessa:

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

med detta:

• "strict": true

vilket också möjliggör dessa strikta alternativ:

• strictBindCallApply
• strictNullChecks
• strictFunctionTypes
• strictProperty Initialization

Vid denna tidpunkt har vi nått en standardnivå av strikthet i vårt projekt. Om vi ​​vill lägga till ytterligare kontroller kan vi lägga till dessa regler:

• "noUnusedLocals": true
• "noUnusedParameters": true
• "noImplicitReturns": true
• "noFallthroughCasesInSwitch": true

När vi har nått en stränghet som vi är nöjda med kan vi gå vidare till nästa steg.

6. Rensa genvägar

Om du har lagt till @ts-ignore eller utnyttjade en FixMeLater typ, nu är det dags att gå tillbaka och fixa dem. Vi behöver inte göra allt på en gång eller någonsin, men detta skulle vara det sista steget för att säkerställa maximal typsäkerhet i hela ditt projekt.

Ibland är ansträngningarna att fixa dessa inte värda tiden, och andra gånger är det. Du måste diskutera med ditt team och bestämma vad som är vettigt.

7. Fira

Vi gjorde det! Vi migrerade officiellt vårt projekt till TypeScript. Ta dig en stund för att fira ditt arbete. Det var verkligen inte en triviell uppgift. Särskilt om du arbetade i en stor codebase.

Saker att komma ihåg

När vi reflekterar över våra ansträngningar är här några saker att komma ihåg när du migrerar ett projekt från React till TypeScript.

Börja i liten skala

Utnyttja TypeScript: s förmåga att gradvis använda den. Gå en fil åt gången i din egen takt. Gör vad som är vettigt för dig och ditt team. Försök inte ta itu med allt på en gång.

Öka striktheten över tid

Det finns inget behov av att börja med maximal strikthet från början. Det är en resa. Öka nivån när du har tid. Så småningom når du en nivå som känns bekväm. Känn dig inte dålig om du inte har 100% strikthet. Viss typsäkerhet är bättre än ingen typsäkerhet.

Luta dig på genvägar

Smakämnen @ts-ignore och tipset för FixMeLater finns där för att hjälpa till att minska migrationen. Allt behöver inte ändras på en gång. Använd genvägarna som du behöver men känn dig inte dålig för att använda dem. Återigen är poängen att migrera, men det borde inte vara smärtsamt. Med tiden kan du prioritera att byta ut dessa saker med rätt typsäkerhet. Men kom ihåg att dessa verktyg står till ditt förfogande så använd dem.

Detta är inte det enda tillvägagångssättet för att migrera React-projekt till TypeScript. Men det är det som fungerar för mig. Jag hoppas att det hjälper dig så mycket som det hjälpte mig.

Ytterligare läsning

Källa: https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/?utm_source=rss