Hogyan építettem az időjárás-alkalmazást a freeCodeCamp-ban a React és a Typescript segítségével

Végül úgy döntöttem, hogy visszatérek az freeCodeCamp oldalra, és megpróbálom befejezni a kezelőfelület fejlesztői tanúsítványomat. Tavaly korábban már befejeztem az összes algoritmust és oktatóanyagot, és csak a projektek hiányoztak.

De most, hogy több tapasztalatom van Full Stack fejlesztőként, a legtöbb projekt kissé könnyű az én jelenlegi szintem számára. Tehát két választásom volt. Vagy visszatérhetek az alapokhoz, és mindet egy nap alatt befejezhetem, vagy két madarat megölhetek egy csapásra: szórakozhatunk és kísérletezhetem a technológiával, miközben ezen projekteken dolgozom. Az utóbbi mellett döntöttem.

De készítsük el azt a három madarat - mert egy ideje szeretnék bemutatót / útmutatót írni. Ma a Show The Local Weather projektet fogjuk megoldani. De ezúttal a React és a Typcript ötvözi! A kész kódot megnézheti ebben a GitHub repóban, valamint egy élő bemutatót itt.

Háttér

Tehát az első dolog az első: miért akarom ezt megtenni? Nos, itt a helyzet: egy ideje ugrálok előre-hátra az Angular 5-szel és a React-vel. És jobban szeretem a React mint keretet. Kicsi és tömör, de rendelkezik minden funkcióval, amelyre szükség van egy teljesen működőképes Egyoldalas alkalmazás létrehozásához. Ami az Angulart illeti, túl nagy ahhoz, hogy élvezhessem egy ilyen kicsi alkalmazást, mint ez ... de a gépírást használja!

A TypeScript egy olyan szuper JavaScript készlet, amely sok olyan funkciót ad hozzá, amelyek éppen hiányoznak a JavaScript-ből, még az ES6 / 7 fejlesztéseivel is. Leginkább statikus gépelésről ismert. Szóval azon gondolkodtam, vajon a lehető legjobbat hozhatom-e mindkét világból. A válasz egyértelmű IGEN volt!… Redux nincs benne. (Úgy értem, hogy felveheti a Redux-ot, de eddig fájdalom volt beállítani, ezért nem ezt az útmutatót fogom megtenni.)

Ennél a projektnél a felhasználói történetek minimális szintjére fogunk összpontosítani, mert a hangsúlyom inkább a technológia, semmilyen extra szolgáltatás. Mint ilyen, az API, amelyet ehhez az alkalmazáshoz fogunk használni, Wunderround lesz. Tökéletes ahhoz, amit építünk, mert Fahrenheitben és Celsiusban egyaránt hőmérsékletet kínálnak, és ikonokat is adnak a különböző időjárási körülményekhez. Ez kevésbé programozott munkát jelent a végünkön.

0. lépés: Beállítás

create-react-appEhhez a projekthez fogom használni a Typescript egyedi React szkriptjét, hogy meg tudjuk tartani a nulla konfigurációt és az egyszerű kezelhetőséget. Jó cikket írt a React alkalmazás TypeScript használatával Trey Huffine, és itt található.

Határozottan javaslom, hogy nézze meg ezt a bejegyzést, hogy részletesebben fel lehessen állítani. De minden további nélkül a következő sort fogjuk futtatni a terminálban.

create-react-app weather --scripts-version=react-scripts-tsnpm install --save core-decorators

Kicsit később eljutok a lakberendezőkhöz. Csak tudd, hogy ez egy szép kis funkció, amelyet nagyon izgatottan próbáltam ki. De ahhoz, hogy használni tudjuk, szerkesztenünk kell a tsconfig.jsonfájlunkat, hogy tartalmazzon kísérleti dekoratőröket. Ehhez elég hozzáadni a félkövér kódsort.

{ "compilerOptions": {// ...code hidden... "noUnusedLocals": true, "experimentalDecorators": true } // ...more code hidden...}

És mivel a Prettier-t telepítettem a fejlesztői környezetembe, meg kellett változtatnom a fájlomat, tslint.jsonmert a szösz ütközött a formázóval. Ha hasonló fejlesztés van beállítva, javasoljuk, hogy törölje az összes tslint szabályt, hogy ne kelljen elakadnia a konfigurációban. A fájlnak így kell kinéznie, miután végzett.

A mappaszerkezet, amelyet használni fogok, a következőképpen fog kinézni. Ennek megfelelően létrehozhat, törölhet és áthelyezhet fájlokat.

weather-app/├─ .gitignore├─ node_modules/├─ public/├─ src/ └─ assets/ | - - loader.svg | - - logo.svg └─ components/ | - - Weather.tsx | - - WeatherDisplay.tsx └─ styles/ | - - App.css | - - WeatherDisplay.css | — — index.tsx | — — registerServiceWorker.ts | — — App.tsx | — — index.css | - - config.ts | - - types.ts├─ package.json├─ tsconfig.json├─ tsconfig.test.json└─ tslint.json

Oké, a legrosszabbnak vége! Végre beállítottuk az alkalmazást. Merüljünk bele a kódba.

1. lépés: Stílus

Először el akarom kerülni a stílust. Nem vagyok sok dizájner, így csak annyit tettem create-react-app, hogy újravagytam az alapértelmezett stílusokat, hogy a freeCodeCamp zöld téma legyen. Ezenkívül a gombot gombszerűbbé és természetesen zöldebbé tettem. Ezzel szabadon megvadulhatsz, ha véletlenül CSS mester vagy. Itt letölthet képfájlokat, és elhelyezheti őket a assets/mappában.

2. lépés: Oké, hazudtam ... További beállítások

De ne aggódj, ez a tényleges kód ezúttal. Először kezdjük a könnyebbel: az API és az API kulcsok hozzáadásával. Semmi új itt - pontosan úgy néz ki, mint egyelőre a normál JavaScript.

A TypeScript-specifikus dologhoz meg kell adnunk a típusokat. Nos, nem kell, de mindenképpen meg kell. A statikus gépelés oka az, hogy biztonságot nyújt számunkra. A normál JavaScript-től eltérően a kódunk nem fog futni, ha a dolgok rossz típusúak. Lényegében ez azt jelenti, hogy a fordító egyszerűen nem engedi, hogy rossz kódot írjunk.

Mint látható, nem túl ijesztő. Csak írja be a típust kettőspont után. A primitív típusokat (karakterlánc, szám, logikai érték) a kapun kívül támogatják. Tárgyakkal célszerű egy új, az adott objektumra jellemző típust létrehozni, amellyel WeatherDataegyütt látható DisplayLocation.

Most kissé lusta voltam, mert az API-ból érkező adatok alakja sokkal nagyobb, és létrehozhattam volna az egész objektumot. De úgy döntöttem, hogy csak azt veszem el, amire szükségem van, és a többit elvetem, ezért van ez a types.tsfájl olyan kicsi, mint amennyi.

3. lépés: Reagálj - a szórakoztató rész

Át fogom ugrani a index.tsxés App.tsxfájlokat, mert valójában nincs ott semmi igazán új. Csak tudd, hogy az importálás eltér attól, hogy a TypeScript mennyire szigorú a modulokkal kapcsolatban. Ehelyett először a bemutató komponenst fogjuk áttekinteni.

A hívás helyett továbbra is szívesebben rombolok Componentés Fragmentreagálok React.Component, mivel ez csökkenti a redundanciát. A Fragments esetében pedig, ha még soha nem játszott velük, akkor ez alapvetően egy div, amely nem jelenik meg a HTML jelölésben.

Azt is észreveszi, hogy felülettel illesztettem interfészeket. Egy felület meghatározza, hogy kell hogy nézzen ki a kellékeink és az állapotunk. És ha még nem vetted észre, a TypeScript trükkje mindenhez típusokat ad, tehát ez történik fent a szögletes zárójelbente>. If you are familiar with prop types, it does the same thing, but I feel like this is much cleaner.

The next thing is the weird @ symbol. Well, that’s a decorator! I originally wanted to hook up Redux and connect so that I can show a much more complicated version, but the autobind will do for now.

A decorator is basically a function that wraps around the class and applies necessary attributes. It also allows us to use export default at the top, which is just a personal preference of mine.

@decorateexport default Class {}
// is the same as
export default decorate(Class)

In this case autobind will, as the name entails, automatically bind this to everything so we don’t have to worry about binding issues. And coming from a more Object Oriented language, these class methods will look a lot cleaner than the JavaScript work-around with the arrow functions.

classMethod = () => { console.log('when you use arrows, you don't have to worry about the keyword "this"');}
classMethod () { console.log('because of javascript, you have to worry about the keyword "this" here');}

And now finally we move to the bulk of our logic, which is going to be living in the Weather.tsx component.

The first thing you’ll notice is the ? in the interface. I mentioned that we definitely should define types for our props, but what happens when you know for certain it won’t be defined until after the API call? Well we can define optional types with a question mark.

What is happening in the background is that the variable weatherData is only allowed to be a WeatherData type or undefined. Also, remember that our WeatherData type is only a subsection of what wunderground offers. Earlier I mentioned that we are only going to take the data that we needed from the API — well, that’s what that huge destructuring on line 55 is doing.

Did I mention you can specify expected return types of functions? That’s what is happening here with getCurrentPosition , because I wanted to make sure that it returns a promise.

The reasoning here is that I didn’t want to call getCurrentWeather until after we had the correct geolocation, which means we’re dealing with asynchronous events. Async always means Promises, so that’s what’s going to happen.

A word of warning: the native geolocation API does take a long time to get a result without passing in any options. I opted to not add options to it as it was giving me errors at the time.

And I believe that is all the new things happening in this app because of TypeScript. Everything else should be familiar if you know React. But hopefully you can see the benefits of this superset, as it adds both security to our code as well as some nice super powers.

Step 4: Complete!

Original text


You did it! You finished an app that shows the weather at your current position. And in doing so, you’ve covered a good chunk of TypeScript as well as incorporating it into React.

Of course, there can definitely be improvements on this, like an option to search and show other locations. And the UI can definitely be worked on. But if you haven’t already finished the weather app on freeCodeCamp, you have already gone above and beyond on this assignment.