Mikä on TypeScript? Erot JavaScriptiin

01Mikä on TypeScript?

Lyhin vastaus kysymykseen mikä on TypeScript: JavaScript, johon on lisätty tyyppitieto. Teknisesti TypeScript on JavaScriptin ylijoukko; jokainen kelvollinen JavaScript-koodi on myös kelvollista TypeScript-koodia. Sen päälle lisätään vain tyyppimääritykset ja niitä tarkistava kääntäjä.

Selaimia ja Node.js:ää ei ole suunniteltu ajamaan TypeScriptiä suoraan. Siksi koodi kulkee ensin kääntäjän läpi, tyyppitiedot poistetaan ja tuloksena on tavallista JavaScriptiä. TypeScriptin hyöty on siis kehitysvaiheessa; käyttäjälle menevä koodi on yhä JavaScriptiä.

Kieli julkistettiin ensimmäisen kerran vuonna 2012, ja siitä on tullut ajan myötä yksi verkkokehityksen valtavirran työkaluista. Nykyään moni suosittu kirjasto kirjoitetaan suoraan TypeScriptillä, ja useimmat uusien projektien luontityökalut tarjoavat TypeScript-vaihtoehdon asennuksessa ensimmäisenä. Tämä yleisyys tarkoittaa, että opittu tieto siirtyy helposti eri projekteihin.

Sille, joka ei tunne kielen perusteita, TypeScriptillä aloittaminen suoraan voi olla haastavaa. Käsitteiden vakiinnuttaminen ensin artikkelissa Mikä on JavaScript helpottaa ymmärtämään, minkä ongelman tyyppijärjestelmä ratkaisee.

02Miten tyyppiturvallisuus löytää virheet?

JavaScript on dynaamisesti tyypitetty: muuttujalle voi antaa ensin luvun ja sitten tekstin, eikä kieli huomauta siitä. Pienissä skripteissä tämä joustavuus on mukavaa; mutta usean sadan tiedoston projektissa sen huomaaminen, että funktion odottama data on muuttunut, tapahtuu usein vasta, kun tuotannossa tulee virhe.

Tyyppiturvallisuus tarkoittaa, että jokaisen tiedon muoto määritellään etukäteen ja tätä määritelmää rikkova käyttö hylätään käännösvaiheessa. Alla olevassa esimerkissä väärä kentän nimi tai väärä tyyppi merkitään editorissa punaisella viivalla ennen koodin ajamista.

interface Siparis {
  id: number;
  musteri: string;
  tutar: number;
  odendi: boolean;
}

function ozetYaz(s: Siparis): string {
  return `${s.musteri} - ${s.tutar.toFixed(2)}`;
}

ozetYaz({ id: 1, musteri: "Aino", tutar: 150, odendi: true }); // kelvollinen
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Virhe: tyyppiä 'string' ei voi sijoittaa tyyppiin 'number'.

Editorituki

Tyyppitieto ei vain löydä virheitä vaan antaa editorille älyä. Olion kentät täydentyvät automaattisesti, funktion odottama näkyy kursoria viemällä, ja kun muutat kentän nimeä, kaikki käytöt päivittyvät turvallisesti. Tämä turvallinen uudelleenjärjestely (refactoring) säästää suurissa koodikannoissa merkittävästi aikaa.

03TypeScript vs JavaScript

TypeScriptin ja JavaScriptin ero ei ole suoritusaikana vaan kehitysprosessissa. Alla oleva taulukko vertaa kahta kieltä päivittäisen käytön kannalta:

04TypeScriptin edut

TypeScriptin edut tuntuvat eniten, kun projekti kasvaa ja tiimi suurenee. Yhden ihmisen kirjoittamassa lyhyessä skriptissä ero on pieni; viiden kehittäjän kaksi vuotta työstämässä järjestelmässä se on ratkaiseva.

• Virheiden varhainen havaitseminen: kirjoitusvirheet, puuttuvat kentät ja väärät tyypit näkyvät ennen koodin ajamista.
• Itseään dokumentoiva koodi: funktion syöte ja tuloste voi lukea tyypeistä; erillistä dokumentaatiota tarvitaan vähemmän.
• Turvallinen muutos: kääntäjä listaa kaikki tiedostot, joihin tietomallin muutos vaikuttaa.
• Sopimus tiimin sisällä: frontendin ja backendin yhteiset tyypit selkeyttävät, mitä API palauttaa.
• Laaja ekosysteemituki: React, Next.js, Node.js ja useimmat yleiset kirjastot tulevat tyyppimäärityksineen.

Myös haittoja on

TypeScript ei ole ilmainen. Mukaan tulee käännösvaihe ja asetukset, monimutkaiset tyyppimääritykset voivat haastaa aloittelijan, ja kiireessä kirjoitetut any-tyypit poistavat tyyppiturvallisuuden hiljaa. Pienissä ja lyhytikäisissä projekteissa tämä lisärasite voi ylittää saadun hyödyn. Lisäksi joidenkin vanhojen ja ylläpidon lopettaneiden pakettien tyyppimäärittelyt voivat puuttua; niille määritykset voi joutua kirjoittamaan käsin.

05Missä projektissa TypeScript kannattaa valita?

Päätös riippuu projektin iästä, koosta ja tiimistä. Yleissääntönä jokainen ohjelmisto, jota useampi ihminen ylläpitää pitkään, hyötyy TypeScriptistä.

Järjestelmissä, joissa useat tietomallit kytkeytyvät toisiinsa, kuten hallintapaneelit, varausmoottorit sekä varasto- ja tilausvirrat, tyyppimääritykset ovat kuin projektin kartta. Räätälöidyissä ohjelmistoratkaisuissa tämä kartta näyttää heti, rikkooko uusi ominaisuus vanhan näkymän.

Tilanne on samanlainen projekteissa, jotka keskustelevat ulkoisten järjestelmien, kuten markkinapaikkojen, kuljetusten ja kirjanpidon, kanssa. Kun kunkin palvelun palauttaman datan muoto on määritelty tyypeillä, vastapuolen muutos huomataan paljon aiemmin; tämä vähentää yllätyksiä integraatiotöissä.

Hotelliohjelmisto, jossa huone-, päivä-, hinta- ja vieraitiedot ovat käytössä samanaikaisesti monella näytöllä, tai kiinteistöilmoitusohjelmisto, jossa ilmoitukset, suodattimet ja käyttäjäroolit kietoutuvat toisiinsa, ovat hyviä esimerkkejä tällaisista projekteista. Kun kentän nimi tai tyyppi muuttuu, kääntäjä listaa kerralla kaikki kenttää käyttävät raportit, lomakkeet ja palvelut; tiimi saa muutoksen valmiiksi jättämättä yhtään nurkkaa väliin.

• TypeScript on järkevä: monen näkymän sovellukset, paneelit, pitkäikäiset tuotteet, API- ja integraatiokerrokset.
• Ei pakollinen: yhden sivun esittelysivustot, lyhyet kampanjasivut, muutaman rivin automaatioskriptit.

06TypeScriptiin siirtymisen kustannukset

Olemassa olevan JavaScript-projektin siirtäminen TypeScriptiin ei ole työ, joka tehdään kerralla. Koska kääntäjä pystyy ajamaan JavaScript- ja TypeScript-tiedostoja yhdessä, asteittainen siirtymä on mahdollista.

Kustannukseen vaikuttavat pääasiassa koodikannan koko, olemassa olevien testien määrä, käytettyjen kirjastojen tyyppituki ja tiimin kokemus. Projektissa, jossa on testejä, siirtymä etenee paljon turvallisemmin; tästä aiheesta artikkelimme Mikä on ohjelmistotestaus on hyvä täydennys.

1. Lisää projektiin kääntäjä ja asetustiedosto; aloita aluksi löysillä säännöillä.
2. Kirjoita jokainen uusi tiedosto TypeScriptillä.
3. Laadi tyyppimääritykset eniten käytetyille tietomalleille.
4. Muunna kriittiset moduulit yksi kerrallaan ja aja niiden testit.
5. Kun koodikanta on valmis, kiristä säännöt ottamalla strict-tila käyttöön.

npm install --save-dev typescript
npx tsc --init
npx tsc --noEmit

07Vinkkejä TypeScriptin oppimiseen

Niille, jotka haluavat oppia TypeScriptiä, paras tapa on lisätä tyyppejä vähitellen tuntemaasi JavaScript-projektiin. Ensin tulevat perustyypit (string, number, boolean, taulukko), sitten interface- ja type-määritykset, sen jälkeen union-tyypit ja geneeriset tyypit.

Jos kehität käyttöliittymiä, TypeScriptin käyttäminen suoraan Reactin kanssa nopeuttaa myös oppimista; komponenttien props-tietojen määrittäminen tyypeillä on hyvin konkreettinen harjoitus. Reactin osalta voit tutustua artikkeliimme Mikä on React.

Virallista käsikirjaa ja kokeiluympäristöä varten luotettavin lähde on typescriptlang.org. Selaimen kokeilualueella näet heti, mihin JavaScriptiin kirjoittamasi koodi muuntuu.