WordPress, Gutenberg ja Typescript

Viimeksi kirjoitin miten WordPressiä voi hyödyntää sovellusalustana ja tästä inspiroituneena ajattelin viedä konseptia vielä hieman pidemmälle eli tuoda kehittäjien suosima Typescript tuki WordPress ympäristöön. Aiemman kirjoituksen pääset lukemaan täältä.

Typescript on ohjelmointikieli, joka lisää staattisen tyypityksen JavaScriptiin. Tällä taklataan laajasti ongelmia, jotka aiheutuvat JavaScriptin ennalta-arvaamattomuudesta ja samalla vähennetään bugien määrää tarkistamalla koodia jo sitä kirjoittaessa. TypesScript laajentaa kehitysympäristöä antamalla virheilmoituksia yleisistä virheistä kuten undefined is not a function tai Type 'number' is not assignable to type 'string'. Tämä parantaa koodin rakennetta, estää virheiden syntymistä sekä tarjoaa automaattista dokumentaatiota kirjoitetusta koodista. Mitä isompi applikaatio tai kehitysporukka siinä ympärillä, sitä enemmän painoarvoa tämän kaltaisilla työkaluilla on. Netistä löytyy paljon artikkeleita TypeScriptista ja myös syitä miksi tätä tulisi käyttää. En takerru sen suuremmin näihin ja yksinkertaisella typescript -haulla löytyy paljon videoita ja tuloksia.

Gutenbergin ja WordPressin kontekstissa TypeScriptin käytölle pätee täysin samat syyt mitä muussakin sovelluskehityksessä; mitä kompleksisempi sovellus, sen arvokkaampi on olla olemassa tuki mainitulle työkalulle.

TypeScriptin käyttöönotto Gutenbergissa

Koska lohkokehityksessä käytetty wp-scripts tukee myös .ts ja .tsx päätteisiä tiedostoja, käyttöönotto itsessään on hyvinkin yksinkertaista. Riippuen muusta ympäristöstä, saattaa kevyimmillään riittää pelkkä TypeScriptin riippuvuuksien asentaminen (yarn add typescript) ja tsconfig.json tiedoston määritys.

Koska oma ympäristö on hieman monimutkaisempi, jouduin tekemään pari muuta lisäystä kuten lisäämään webpack tuen. Viimeisin package.json tiedosto löytyy täältä. TypeScriptin konffi-tiedoston löydät myös täältä.

Kun TypeScript on toiminnassa, tämä toimii täysin normaalisti kuten mikä tahansa muukin TypeScript pohjainen koodi.

Melko suoraviivaista ja helppoa eikö? Tähän kuitenkin liittyy pari jekkua.

TypeScript WordPressin kontekstissa

TypeScript tukea on tuotu WordPressiin jo hetken aikaa ja tämä on käytännössä yhteensopiva(ish). Se toimii ja on käyttökelpoinen, mutta kaikki palaset kuten @wordpress/data tai @wordpress/server-side-render eivät ole täysin tyypitettynä ja näiden suhteen pitää tehdä pieniä temppuja, että nämä toimivat. Käytännössä ainakin oma ratkaisu oli niin sanotusti disabloida TypeScript kyseisten moduulien kohdalla ja katsoa asiaa uudestaan myöhemmin. Samaa on sovellettu myös lohkojen index -tiedostojen kanssa, sillä tuo antoi vähän jopa turhia virhe-ilmoituksia.

Näistä päästäänkin siihen, että mielestäni kaikkea ei välttämättä tarvitse edes tyypittää ja ok olla käyttämättä Typescriptin tarjoamia toimintoja vain siellä missä näistä on hyötyä. Jos tyypityksiä aletaan miettimään liiakseen koen, että se saattaa jopa yltyä rasitteeksi ja hyötysuhde kääntyy negatiivisen puolelle. Esimerkiksi, jokin yksinkertainen pieni lohko ei välttämättä hyödy tarkoista tyypityksistä yhtään, mutta jokin monimutkainen kokonaisuus voi hyötyä hyvinkin paljon. Toinen hyötypaikka TypeScriptin käytölle on komponentit. Esimerkkinä vaikka Kotisivu Block Theme media-komponentti, jolla saa lisättyä lohkoon kuvan tai videon lataukseen käytettäviä toiminnallisuuksia. Se, että tekstieditori herjaa puuttuvista tai virheellisistä attributteista on äärimmäisen hyvä juttu. Samanaikaisesti koska kyseessä on hieman laajempi yleiskäyttöinen komponentti, komponentin rakenne ja sisäiset riippuvuudet pysyvät selkeämpänä Aika jota olen joskus käyttänyt bugien metsästämiseen, joka on johtunut väärin nimetystä muuttujasta, muusta virheellisestä viittauksesta tai arvaamattomasta toiminnasta on järkyttävä. TypeScript kertoo hyvin monet tämän kaltaiset virheet välittömästi ja automaattinen täyttö toimii paremmin. Komponenttiin pääset täältä.

Oman teeman kanssa TypeScript tukea on tuotu osissa ja paloja on käännetty TypeScriptille lohko kerrallaan. Teemassa on myös paljon any -tyypityksiä, jotka vaativat läpikäyntiä tarvitseeko ja pystyykö näitä tarkentamaan. Ensimmäinen mutu on, että monessa kohtaa ei ja tärkeintä on olla mahdollisuus hyödyntää TypeScriptia siellä missä siitä on hyötyä.

Lopuksi

TypeScript WP:n kanssa on itsellä hieman vielä kokeiluasteella, mutta tähän mennessä koen, että tämä on hyvä lisä lohkopohjaisessa kehityksessä. Etenkin kun päästään monimutkaisiin vahvasti Reactiin nojaaviin lohkoihin, mahdollisuus tyypittää komponentteja ja funktioita helpottaa sekä selkeyttää devauskokemusta. Yhdistettynä vielä lintterin käyttöön editori sekä CI/CD -putkien automaatiot pakottavat tekemään yhdenmukaista koodia ja täten parantaa yleistä koodin laatua. Tästä lisää myöhemmissä kirjoituksissa. Mutta ennen sitä! Heihei ja moikka.