JavaScript-työkalut Flow ja TypeScript ovat samanlaisia ​​monilta osin. Ne eroavat kuitenkin toiminnastaan ​​ja kyvyistään staattisina nappuleina.

Ota selvää, miten Flow ja TypeScript vertautuvat keskenään ja mikä on paras staattinen tarkistusohjelma seuraavaa projektia varten.

Mikä on Flow?

Flow on staattinen tyypintarkistustyökalu JavaScriptille, jonka Facebook on luonut tunnistamaan käännös- ja ajonaikaiset koodivirheet etukäteen. Se tekee tämän seuraamalla koodisi välittämiä arvoja ja sitä, kuinka niiden tietotyypit muuttuvat ajan myötä. Tämä staattinen tarkistusjärjestelmä parantaa luotettavuutta ja luettavuutta. Se auttaa myös vähentämään virheiden esiintymistä JavaScript-koodissasi.

Mikä on TypeScript?

TypeScript ei ole vain tyypintarkistus, kuten Flow, vaan vahvasti kirjoitettu ohjelmointikieli. Microsoft loi kielen ja rakensi sen JavaScriptin päälle.

Sopimuksen mukaan sinun tulee luoda TypeScript-tiedostoja, joiden tiedostotunniste on .ts. Voit kääntää TypeScript-tiedoston JavaScript-koodiksi, joten missä tahansa JavaScript toimii, myös TypeScript voi toimia.

instagram viewer

Flow'n määrittäminen JavaScript-sovelluksellesi

Voit integroida Flow'n mihin tahansa JavaScript-kehykseen, jota päätät käyttää projektissasi. Sinun on määritettävä JavaScript-kääntäjä, kuten Babel, käsittelemään kaikki koodisi virtaustyypit ja kääntämään se vanilja-JavaScriptiksi.

Asenna Flow projektiisi suorittamalla seuraava komento:

lanka lisää --dev flow-bin

Seuraavaksi sinun tulee asentaa Flow-komentorivikäyttöliittymä maailmanlaajuisesti. Tämä CLI tarjoaa useita komentoja vuosovellusten rakentamiseen.

macOS: ssä käytä Homebrew Flow CLI: n asentaminen:

hautua Asentaa flow-cli

Sinun tulee tietää kuinka käyttää Windows PowerShellia asentaaksesi Flown Windows-koneeseen.

Asenna Flow CLI Windowsiin suorittamalla tämä komentosarja PowerShell-päätteessäsi:

iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

Flow-projektit vaativat a .flowconfig tiedosto työkalun kaikista tarvittavista kokoonpanoista.

Suorita tämä komento luodaksesi Flow-määritystiedoston uuteen tai olemassa olevaan projektiin:

npm run flow init

Huomaa, että tietyt puitteet voivat toimittaa projekteja oletuksena Flow-määritystiedoston kanssa.

Viimeinen tehtävä on lisätä Flow-skripti omaan package.json tiedosto:

"käsikirjoituksia": {
"virtaus": "virtaus"
},

Olet nyt onnistuneesti määrittänyt Flow'n toimimaan JavaScript-sovelluksessasi.

TypeScriptin määrittäminen projektissasi

Asenna TypeScript projektiisi suorittamalla seuraava komento:

npm Asentaa konekirjoitus --save-dev

Sinun tulee myös asentaa kääntäjä kääntääksesi TypeScript-koodin vanilla JavaScriptiksi. Saatat myös tarvita määritä TypeScript-määritys parantaaksesi työnkulkua kokea.

Asenna TypeScript-kääntäjä maailmanlaajuisesti tällä komennolla:

npm Asentaa -g konekirjoitus

Alustus a tsconfig.json config-tiedosto, kirjoita seuraava komento terminaaliin:

tsc --sen sisällä

Yllä olevat ohjeet auttavat sinua aloittamaan TypeScriptin käytön projektissasi.

Rakentaminen virtauksella

Jos haluat kirjoittaa Flow-koodin JavaScript-tiedostoon, määritä Flow-syntaksi koodin yläosassa ennen lausekkeita tai lauseita:

// @flow

Voit määrittää muuttujien ja funktioiden tietotyyppejä merkinnän avulla. Flow aiheuttaa sitten virheilmoituksen, jos odotettu tyyppi ei täyty.

Esimerkiksi:

// @flow
anna foo: numero = "Hei";

Flow antaa tähän virheen, koska odotusarvotyyppi on foo on numero, ei merkkijono.

Juosta npm ajovirtaus nähdäksesi virheen tulosteen päätteessä:

Flow-laajennuksen käyttöönotto missä tahansa tekstieditorissa näyttää editorin virheet koodattaessa.

Flow käyttää myös tyyppipäätelmää määrittääkseen, mikä lausekkeen odotusarvo tulee olla.

Esimerkiksi:

// @flow
toimintotee jotain(arvo) {
 palautusarvo * "Hei";
};
antaa tulos = doSomething(6);

Et voi suorittaa aritmeettisia operaatioita luvun kuuden ja merkkijonon välillä Hei.

Tuotos npm ajovirtaus tulee virhe:

Kehitetään TypeScriptillä

TypeScriptin tyyppisyntaksi on hyvin samanlainen kuin Flow'n. Voit määrittää muuttuja- ja funktiotyyppejä tyyppimerkinnällä aivan kuten Flowissa.

TypeScriptillä on useita muita Flow'n kaltaisia ​​ominaisuuksia, kuten tyyppipäätelmä.

Otetaan esimerkki TypeScript-koodista:

// Typescript.ts
kirjoita Tulos = "kulkea" | "epäonnistua"
toimintovahvistaa(tulos: Tulos) {
 jos (tulos "kulkea") {
 console.log("Läpäisty")
 } muu {
 console.log("Epäonnistui")
 }
}

Voit juosta tsc Typescript.ts kääntääksesi tämän koodin tavalliseksi vanilja-JavaScriptiksi.

Tämä olisi sama TypeScript-koodi, joka on käännetty vanilla JavaScriptiin:

toimintovahvistaa(tulos) {
 jos (tulos "kulkea") {
 console.log("Läpäisty")
 } muu {
 console.log("Epäonnistui")
 }
}

TypeScriptin ja Flow'n hyvät ja huonot puolet

Nyt tiedät kuinka aloittaa molempien työkalujen käyttö JavaScript-projektissasi. Sinun pitäisi tietää kunkin käytön edut ja haitat.

Liittäminen

Flow'n käyttöönottoprosessi on hieman monimutkaisempi verrattuna TypeScriptiin. Sinun on määritettävä JavaScript-kääntäjä, kuten Babel, tai flow-remove-types, jotta voit poistaa virtatyypit koodistasi. TypeScript sisältää kääntäjän, joka muuntaa TypeScript-koodin JavaScriptiksi, mikä helpottaa integrointia.

TypeScriptillä on paljon paremmat työkalut ja useimmat JavaScript-kehykset tukevat sitä oletuksena. Suosituimmat IDE: t tarjoavat ensiluokkaista tukea TypeScriptille. Flow on myös tuettu, mutta vaatii erityisen laajennuksen.

Yhteisö

Toisin kuin Flow, JavaScript-kehykset, kuten React, React Native, Vue ja Angular, tukevat TypeScriptiä heti valmiina.

Tämä laaja käyttöönotto ja laaja yhteisö johtavat parempiin oppimisresursseihin, päivityksiin ja työkalujen tukeen.

Joustavuus

Flow toimii tyypintarkistajana, joka varoittaa sinua mahdollisesti huonosta koodista. TypeScript estää sinua kirjoittamasta huonoa koodia ja sillä on tiukka tyyppijärjestelmä. TypeScript tukee myös objektien kapselointi, joka auttaa pitämään monimutkaisen koodin hallittavana. Flowilla ei ole tätä ominaisuutta.

Palvelut

TypeScript tarjoaa kaikki JavaScript-kielipalvelut, kuten koodin uudelleenmuodostuksen ja automaattisen täydennyksen. Flow on staattinen tyyppitarkistus, joka tarjoaa syvän ymmärryksen ja analyysin kirjoitetusta koodistasi.

Flow voi ulottua projektiisi tuotuihin moduuleihin ja kirjastoihin ja havaita, kuinka ne vaikuttavat koodiisi. Se voi esimerkiksi havaita ja antaa varoituksen, kun projektistasi puuttuu vaadittu kirjasto tai kun yrität käyttää määritelmää, jota ei ole olemassa.

Mitä staattista tarkistusta kannattaa käyttää?

Jokaisen työkalun käytölle on monia päteviä perusteita, koska jokaisella on erilaiset ominaisuudet. Jotkut voivat olla ensisijaisia ​​yhdelle kehittäjälle ja alhaiset toiselle. Molemmat työkalut toimivat omalta osaltaan hyvin ja tarjoavat etuja niiden käyttöön.

Sinun tulee tutkia hankkeesi vaatimuksia ja tehdä niiden perusteella valistunut päätös.