Mikä on TypeScript? Selkokielinen opas ei-kehittäjille

TypeScript on JavaScriptiä tyypeillä. Lisäät nimiöt, jotka kertovat, minkälaista dataa kukin arvo on – luku, teksti, tilausluettelo – ja TypeScript tarkistaa koodisi ristiriidat ennen kuin se ajetaan. TypeScriptin sivusto kuvaa sitä ”JavaScriptinä, jossa on tyyppien syntaksi”. Tyypit poistetaan, kun koodi muunnetaan tavalliseksi JavaScriptiksi, joka toimii kaikkialla missä JavaScriptiä ajetaan.

Miksi tämä on tärkeää, kun rakennat tekoälyllä

Tekoälymallit kirjoittavat koodia nopeasti, ja nopea koodi sisältää virheitä: kenttä nimeltä customerName yhdessä tiedostossa ja customer_name toisessa, hinta annettuna tekstinä lukun sijaan, funktio kutsutaan ilman arvoa. Tavallisessa JavaScriptissä monet näistä virheistä näkyvät vasta, kun joku painaa väärää nappia.

TypeScript havaitsee monet niistä aiemmin, jo koodia kirjoitettaessa:

• Tekoäly saa välittömän palautteen. Tyyppivirheet osoittavat tarkan rivin, joka on väärin, joten agentti voi korjata sen ennen kuin näet sen.
• Muutokset ovat turvallisempia. Kun nimeät kentän uudelleen, TypeScript merkitsee jokaisen paikan, joka käyttää vanhaa nimeä.
• Koodi selittää itsensä. Tyypit dokumentoivat, mitä funktio odottaa ja palauttaa, mikä auttaa sinua, tekoälyä ja jokaista kehittäjää, joka työstää sitä myöhemmin.
• Editorit ovat älykkäämpiä. Automaattinen täydennys ja ”siirry määritelmään” toimivat paremmin, kun editori tietää, mikä kukin arvo on.

Tämä on yksi suurimmista syistä, miksi monet tekoälysovellusten rakentajat käyttävät TypeScriptiä oletuksena.

Arkinen vertaus

Ajattele varastoa, jossa on nimetyt lokerot. Jokaisessa lokerossa on kyltti: ”Vain lavat”, ”Jäähdytetty”, ”Enintään 500 kg”. Kun toimitus saapuu, ovella oleva tarkastaja vertaa tavaroita kylttiin. Pakastekala, joka on menossa kuivatavaralokeroon, pysäytetään ovella, eikä sitä huomata viikon päästä, kun se haisee.

TypeScript on ovella oleva tarkastaja. Tyypit ovat kylttejä. Tarkistus tapahtuu ennen kuin tavarat – koodisi – otetaan käyttöön. Ja kun kaikki on paikallaan, kyltit poistetaan: käynnissä oleva JavaScript ei sisällä enää tyyppejä.

Miten TypeScript toimii

1. Sinä (tai tekoäly) kirjoitat .ts- tai .tsx-tiedostoja – TypeScriptiä, jossa on tyyppinimiöt.
2. Tyyppitarkistin lukee koodin ja raportoi ristiriidat virheinä editorissa tai rakennuksessa.
3. Rakennusvaihe poistaa tyypit ja tuottaa tavallista JavaScriptiä.
4. JavaScript ajetaan selaimessa tai palvelimella (Node.js, Deno, Bun).

Tärkeä seuraus: TypeScript tarkistaa kirjoittamasi koodin, ei dataa, joka saapuu sovelluksen ollessa käynnissä. Jos ulkoinen rajapinta palauttaa jotain odottamatonta, TypeScript ei näe sitä, ellet lisää ajonaikaista validointia.

Esimerkki: varauslomake

Oletetaan, että rakennat varaussovellusta kampaamolle. Tässä on tyyppi, joka kuvaa varauksen:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? tarkoittaa, että kenttä on valinnainen
};

Ja funktio, joka laskee ennakkomaksun:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Katso nyt, mitä TypeScript havaitsee.

Kirjoitusvirhe kentässä.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript ilmoittaa, ettei prise ole tunnettu ominaisuus ja että price puuttuu. Tavallisessa JavaScriptissä tämä laskisi hiljaa ennakkomaksun NaN (ei luku).

Väärän tyyppinen arvo.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript ilmoittaa, ettei merkkijonoa voi käyttää paikassa, jossa odotetaan lukua. Ilman sitä "40" * 0.2 toimii sattumalta, mutta "40" + 5 antaa "405" – sellainen virhe, joka näkyy laskussa.

Palvelua, jota ei ole olemassa.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript ilmoittaa, ettei "perm" ole sallittu palvelu. Kun kampaamo lisää myöhemmin permanentin, lisäät sen tyyppiin, ja TypeScript näyttää jokaisen paikan, joka täytyy päivittää – hinnaston, lomakkeen, kalenterin värit.

Mitä se ei voi havaita. Jos varauslomake lähettää price: "40" selaimesta palvelimelle, palvelimen TypeScript ei näe sitä ajon aikana. Siksi hyvin tehdyt sovellukset validoivat myös saapuvan datan, usein validointikirjastolla, joka tarkistaa muodon ja muuttaa sen kunnolliseksi Booking-arvoksi.

TypeScript vs. JavaScript

Yleiset termit selitettynä

Yleiset virheet ja väärinkäsitykset

• ”TypeScript tekee koodista virheettömän.” Se havaitsee datan muodon ristiriidat, ei väärää logiikkaa. 2 %:n ennakkomaksu 20 %:n sijaan menee tyyppitarkistuksesta läpi.
• ”Tyypit suojaavat minua huonolta syötteeltä.” Tyypit katoavat ajon aikana. Validoi käyttäjien, lomakkeiden ja rajapintojen data.
• any kaikkialla. Kun tekoäly jumittuu, se saattaa turvautua any-tyyppiin tai // @ts-ignore-kommenttiin virheiden hiljentämiseksi. Se piilottaa ongelmat sen sijaan, että korjaisi ne.
• Tyyppivirheiden sivuuttaminen, koska esikatselu toimii. Jotkin työkalut ajavat koodia tyyppivirheistä huolimatta. Virheet ovat silti bugeja, jotka odottavat laukeamistaan.
• ”TypeScript on hitaampi.” Tyypit poistetaan ennen ajoa; ajettava JavaScript on olennaisesti sama.
• ”Se on vain suurille tiimeille.” Yksinrakentajatkin hyötyvät, erityisesti kun tekoäly tekee suurimman osan muokkauksista.

Mitä pyytää tekoälyrakentajaltasi

• ”Käytä TypeScriptiä tiukalla tilalla.”
• ”Määrittele yhteiset tyypit tärkeimmille tietueillemme – Customer, Booking, Invoice – ja käytä niitä sekä etu- että taustapuolella.”
• ”Älä käytä any-tyyppiä tai @ts-ignore-kommenttia virheiden ohittamiseen; korjaa taustalla oleva ongelma ja kerro, mikä se oli.”
• ”Validoi kaikki saapuva data palvelimella, ei pelkästään tyyppien avulla.”
• ”Aja tyyppitarkistin ja korjaa kaikki virheet ennen kuin kerrot valmiista.”
• ”Kun nimeät kentän uudelleen, päivitä jokainen paikka, jonka TypeScript merkitsee.”
• ”Selitä tämä tyyppivirhe selkokielellä.”

Lisää tekoälyn tuottaman koodin tarkistamisesta lue miten tarkistat tekoälyn tuottaman koodin ja miten korjaat tekoälyllä rakennetun sovelluksen virheet.

TypeScript Mythexissä

Jos et pyydä mitään erityistä, Mythex aloittaa uudet projektit Vite + React + TypeScript + Tailwind -pinolla. Koodieditori sisältää kielitietoisuuden – täydennykset, diagnostiikan ja siirtymisen määritelmään TypeScriptille ja JavaScriptille sekä muille kielille – joten tyyppivirheet näkyvät koodissa, eikä vain esikatselussa. Editori on vain luku -tilassa Free-paketissa ja täysin muokattavissa Pro-paketissa. Voit yhä pyytää eri pinoa ensimmäisessä kehotteessa; dokumentaation sivu tekniikan valinnasta selittää, miten, ja koodieditorin dokumentaatio kertoo, mitä editori näyttää.

Kysymykset