Kun aloin oppia TypeScriptiä, yksi usein kuulemistani ehdotuksista oli: "Muunna yksi olemassa olevista projekteistasi! Se on paras tapa oppia!” Pian sen jälkeen ystävä Twitteristä tarjoutui tekemään juuri se - näytä minulle, kuinka React-sovellus siirretään TypeScriptiin.

Tämän artikkelin tarkoituksena on olla ystäväsi ja auttaa sinua siirtämään oman projektisi TypeScriptiin. Kontekstiksi käytän kappaleita henkilökohtaisesta projektista, jonka siirsin käydessäni tätä prosessia itse.

Plan

Jotta tämä prosessi tuntuisi vähemmän pelottavalta, jaamme sen vaiheisiin, jotta voit suorittaa siirron yksittäisissä osissa. Pidän tästä aina apua, kun otan suuren tehtävän. Tässä ovat kaikki vaiheet, joita teemme projektimme siirtämiseksi:

1. Lisää TypeScript
2. Lisää tsconfig.json
3. Aloita yksinkertaisesti
4. Muunna kaikki tiedostot
5. Lisää tiukkuutta
6. Siivoa se
7. Juhlia

HUOMAA: tärkein askel tässä koko prosessissa on numero 7. Vaikka pääsemmekin sinne vain käsittelemällä ne peräkkäisessä järjestyksessä.

1. Lisää TypeScript projektiin

Ensin meidän on lisättävä TypeScript projektiimme. Olettaen, että React-projektisi käynnistyi create-react-app, Voimme seuraa asiakirjoja ja ajaa:

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

tai jos käytät yarn:

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

Huomaa, että emme ole vielä muuttaneet mitään TypeScriptiin. Jos suoritamme komennon käynnistääksesi projektin paikallisesti (yarn start minun tapauksessani), minkään ei pitäisi olla toisin. Jos näin on, niin hienoa! Olemme valmiita seuraavaan vaiheeseen.

2. Lisää tsconfig.json

Ennen kuin voimme hyödyntää TypeScriptiä, meidän on määritettävä tämä käyttämällä tsconfig.json. Yksinkertaisin tapa aloittaa on rakentaa sellainen tällä komennolla:

npx tsc --init

Tästä saamme joitain perusasioita.

Emme ole vielä olleet vuorovaikutuksessa TypeScriptin kanssa. Olemme ryhtyneet vain tarvittaviin toimiin saadaksemme asiat valmiiksi. Seuraava askel on siirtää tiedosto TypeScriptiin. Tämän avulla voimme suorittaa tämän vaiheen ja siirtyä seuraavaan.

3. Aloita yksinkertaisesta komponentista

TypeScriptin kauneus on, että voit ottaa sen käyttöön asteittain. Voimme aloittaa yksinkertaisella komponentilla tämän siirtymän ensimmäiselle osalle. Projektissani aion aloittaa SVG-komponentilla, joka näyttää tältä:

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

Muuntaaksemme tämän oikein meidän on tehtävä kaksi asiaa:

1. Muuta tiedostopääte muotoon .tsx
2. Lisää tyyppimerkintä

Koska tämä komponentti ei vaadi rekvisiitta, ainoa asia, jota meidän on muutettava, on tämä:

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

Tarkistetaan vielä, että asiat toimivat edelleen suorittamalla projekti varmistaaksemme, ettemme rikkoneet mitään. Huomaa, tässä react-scripts havaitsee automaattisesti uudet muutokset ja muokkaa meidän tsconfig.json meille! Voila! Kuinka kaunista se on?

Ja jos kaikki on hyvin, projektimme pysyy toimintakunnossa. Taputa itseäsi selkään! Olet onnistuneesti siirtänyt ensimmäisen tiedostosi TypeScriptiin. Jos haluaisimme lopettaa tähän, voisimme, mutta edetään eteenpäin.

4. Muunna kaikki tiedostot

Seuraava askel on tehdä kuten teimme vaiheessa 3, mutta kaikille projektin tiedostoille. Jos siirrettävä projekti on melko suuri, suosittelen tekemään tämän useilla iteraatioilla. Muuten saatat väsyttää itseäsi.

Tämän vaiheen aikana saatat joutua lisäämään lisäpaketteja sen mukaan, mitä kolmannen osapuolen kirjastoja käytät. Esimerkiksi minä käytän moment joten minun piti juosta yarn add -D @types/moment lisätäksesi tyypit muodossa a devDependency.

Tässä on joitain muita asioita, jotka tulee pitää mielessä tehdessäsi tätä:

• Estä TypeScript-virheet lisäämällä // @ts-ignore rivillä ennen virhettä
• Jos tiedosto käyttää jsx:ää (esim <App />), tiedostotunnisteen on oltava .tsx sijasta .ts
• Suorita projekti paikallisesti varmistaaksesi, että asiat toimivat edelleen (niiden pitäisi olla)

Kun olet suorittanut tämän vaiheen, vaikeat asiat on tehty! Projektimme on TypeScriptissä, mutta meidän on lisättävä tiukkuutta hyötyäksemme eduista.

5. Lisääntyä tsconfig.json tiukkuus

Nyt olemme valmiita lisäämään tiukkuutta mahdollistamalla tiukemmat säännöt tsconfig.json. Onneksi, react-scripts ilmoittaa meille kaikista tyyppivirheistä suoritettaessa projektiamme paikallisesti. Seuraamme prosessia seuraavasti:

1. ota sääntö käyttöön
2. aloita projekti paikallisesti
3. Korjaa virheet

Ja toistamme tämän prosessin seuraaville säännöille:

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

Haluan jakaa vinkin. Jos huomaat, että jollakin on implisiittisesti tyyppi any etkä ole varma, kuinka korjata se sillä hetkellä, älä. Luo tämä ja käytä sitä hiljentämään virhe:

export type FixMeLater = any

Tavoitteenamme on edetä nopeasti ja palata myöhemmin korjaamaan nämä.

Tämä tuo enemmän tyyppiturvallisuutta projektiimme. Jos haluat lukea lisää kääntäjävaihtoehdoista, voit lukea siitä kohdasta TypeScript-käsikirja.

Kun olemme tehneet tämän, voimme korvata nämä:

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

tämän kanssa:

• "strict": true

joka mahdollistaa myös nämä tiukat vaihtoehdot:

• strictBindCallApply
• strictNullChecks
• strictFunctionTypes
• strictPropertyInitialization

Tässä vaiheessa olemme saavuttaneet projektissamme standardin tiukuuden. Jos haluamme lisätä lisätarkistuksia, voimme lisätä seuraavat säännöt:

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

Kun olemme saavuttaneet tiukuuden tason, johon olemme tyytyväisiä, voimme siirtyä seuraavaan vaiheeseen.

6. Puhdista pikakuvakkeet

Jos lisäsit @ts-ignore tai käytti hyväkseen a FixMeLater kirjoita, nyt on aika palata ja korjata ne. Meidän ei tarvitse tehdä näitä kaikkia kerralla tai koskaan, mutta tämä olisi viimeinen askel varmistaaksemme maksimaalisen tyyppiturvallisuuden koko projektissasi.

Joskus näiden korjaaminen ei ole ajan arvoista, ja toisinaan se on. Sinun on keskusteltava tiimisi kanssa ja päätettävä, mikä on järkevää.

7. Juhli

Me teimme sen! Siirtimme projektimme virallisesti TypeScriptiin. Käytä hetki juhlimaan työtäsi. Se ei todellakaan ollut vähäpätöinen tehtävä. Varsinkin jos työskentelet suuressa koodikannassa.

Muistettavaa

Kun pohdimme ponnistelujamme, tässä on joitain asioita, jotka tulee muistaa siirrettäessä projektia Reactista TypeScriptiin.

Start Pieni

Hyödynnä TypeScriptin kykyä ottaa se käyttöön vähitellen. Siirry tiedosto kerrallaan omaan tahtiisi. Tee sitä, mikä on sinun ja tiimisi kannalta järkevää. Älä yritä käsitellä sitä kaikkea kerralla.

Lisää tiukkuutta ajan myötä

Ei tarvitse aloittaa mahdollisimman tarkasti alusta. Se on matka. Nosta tasoa, kun sinulla on aikaa. Lopulta saavutat tason, joka tuntuu mukavalta. Älä tunne pahaa, jos sinulla ei ole 100-prosenttista tiukkuutta. Joidenkin tyyppien turvallisuus on parempi kuin ei-tyyppinen turvallisuus.

Nojaa pikanäppäimiin

- @ts-ignore ja tippiä varten FixMeLater ovat olemassa auttamaan keventämään muuttoliikkeen taakkaa. Kaikkea ei tarvitse muuttaa kerralla. Käytä pikanäppäimiä tarpeen mukaan, mutta älä tunne pahaa niiden käyttämisestä. Taas on tarkoitus muuttaa, mutta sen ei pitäisi olla tuskallista. Ajan myötä voit priorisoida näiden asioiden korvaamisen oikeanlaisella turvallisuudella. Muista kuitenkin, että nämä työkalut ovat käytettävissäsi, joten käytä niitä.

Tämä ei ole ainoa tapa siirtää React-projekteja TypeScriptiin. Se kuitenkin toimii minulle. Toivon, että se auttaa sinua yhtä paljon kuin se auttoi minua.

Kirjallisuutta

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