TypeScript front-end kehityksessä

“Cannot read property 'x' of undefined” tai “undefined is not a function”. Kuulostaako tutulta?

Front-end-kehityksen ainainen ongelma on ollut selkeän ja ylläpidettävän koodin kirjoittaminen. Monet front-end-projektit saavat alkunsa pienistä skripteistä, joita upotetaan html:n sekaan. Aikaa kuluu ja muutospyyntöjen myötä skriptit paisuvat isommiksi kokonaisuuksiksi, jotka alkavat pikkuhiljaa olla niin syvällä naimisissa keskenään, että jo pienikin muutos on työlästä toteuttaa. Koodeihin perehtyminen kestää viikkoja ja osa siitä on kuitenkin todennäköisesti lukukelvotonta. Testit, jos niitä on jaksettu tehdä, menevät läpi, mutta tuotannosta löytyy selittämättömiä bugeja ja uudelleenkäyttöongelmia. Debugaus on käytännössä console.log:in rääkkäämistä ja rukoilua. Spagetti on valmista tarjoiltavaksi.

TypeScript

Apuun rientää TypeScript, joka nimensä mukaan tuo vahvat tyypit koodiin. Enää ei tarvitse pelätä, että kutsut oliolta olemattomia funktioita tai attribuutteja. Vahvan tyypityksen implementointi jo itsessään tekee koodista paljon luettavampaa, sillä luokan kaikki ominaisuudet on määritelty selkeästi. Back-end-koodaajalle TypeScript muistuttaakin hyvin paljon C#-koodia.

TypeScript on JavaScriptin osajoukko, eli käytännössä kaikki JavaScript on toimivaa TypeScriptiä. Voit vaikka kokeilla vaihtaa *.js-tiedostosi nimen *.ts-tiedostoksi ja kääntää sen. Selaimet eivät kuitenkaan pysty ajamaan TypeScriptiä, joten koodi tulee kääntää JavaScriptiksi ennen varsinaista julkaisua. TypeScriptin ainoa heikkous onkin alkuvaiheen kustannukset; Siinä ajassa, missä kehitysympäristön pystyttäminen olisi valmistunut, olisi se pieni skripti jo versiohallinnassa. Tämä ajattelumalli tietysti johtaa alussa kuvailtuun tilanteeseen.

TypeScriptin hyötyjä

Kehittäjiä hemmotellaan robustilla IDE-tuella (VS Code). Kehittäjä saa reaaliaikaisesti tietoa käyttämistään tyypeistä (IntelliSense), kääntämiseen liittyviä virheilmoituksia, ja jämptin null-checkauksen. Koodin refaktorointi, kuten muuttujien uudelleennimeäminen, heijastuu automaattisesti koko projektin laajuudella. Enemmän aikaa koodaamiseen ja vähemmän huolimattomuusvirheiden setvimiseen.

Jos koodia kuitenkin olisi tarve debugata, sekin onnistuu näppärästi. Projektin voi myös konfiguroida debugaamaan suoraan *.ts-tiedostoista. (https://medium.com/@PhilippKief/how-to-debug-typescript-with-vs-code-9cec93b4ae56)

TypeScript tukee myös kaikkia JavaScript-kirjastoja, joista suureen osaan suosituimmista on myös tyyppimääritelmät. Säästyy arvokasta aikaa, kun ei tarvitse vähän väliä kaluta dokumentaatiota läpi tarkistelemassa attribuutteja ja metodeja. Vahva tyypitys mahdollistaa monimutkaistenkin olioiden käsittelyn ilman harmaita hiuksia ja periyttäminen tekee koodista paljon helpommin luettavaa.

TypeScript kannustaa luonteeltaan modulaarisen koodin kirjoittamiseen. Toiminnallisuudet on helppo jäsennellä pieniin osiin. Tästä hyvä esimerkki on Angular-framework, joka on komponenttipohjainen ja rakennettu tukemaan uudelleenkäytettävyyttä. (https://angular.io/)

Meillä Riihisoftilla on TypeScript käytössä sekä sisäisissä, että asiakasprojekteissa. Sisäisessä käytössä se on osoittautunut oivalliseksi ajaessa harjoittelijoita sisään. Koodi on jäsennetty niin, että projektista on helppo jakaa pienempiä toimeksiantoja ja IntelliSense auttaa uutta koodaajaa pääsemään nopeasti kärryille valmiin koodin ominaisuuksista.

Teknologiat

• Ympäristö: Node.js
• Kielet: TypeScript, JavaScript
• Kehitin: Visual Studio Code

Kiinnostuitko? Ota haltuun!

https://www.typescriptlang.org/docs/home.html