Mikä on TypeScript-ajoympäristö?

TypeScript on JavaScript-kieli, jossa on tyypit. Kuvaat tietojesi rakenteen rajapinnoilla ja tyyppimerkinnöillä, ja TypeScript-kääntäjä muuntaa koodin tavalliseksi JavaScriptiksi ennen sen suorittamista. Muutaman rivin kokeileminen tarkoittaa yleensä projektin, kääntäjän ja asetustiedoston määrittämistä. TypeScript-ajoympäristö ohittaa kaiken tämän. Kirjoitat koodin, suoritat sen ja luet, mitä se tulostaa komennolla console.log.

Työkalun kuvaus

Tämä työkalu suorittaa TypeScript-koodisi selaimessa ja näyttää kaiken, minkä koodi kirjoittaa konsoliin. Kirjoita tai liitä koodi vasemmalle ja paina Suorita-painiketta tai paina Ctrl+Enter (Macissa Cmd+Enter). Tuloste näkyy oikealla, yksi rivi kutakin console-kutsua kohden, ja varoitukset ja virheet merkitään väreillä. Mitään ei suoriteta ennen kuin pyydät sitä, joten voit muokata koodia vapaasti.

Koodi käännetään virallisella TypeScript-kääntäjällä ja suoritetaan Web Workerissa, joka on selaimesi taustasäie. Siksi päättymätön komentosarja ei jumita sivua: paina Pysäytä-painiketta, niin se lopetetaan. Koodiasi ei lähetetä palvelimelle.

Esimerkit

Kuvaa tietoja rajapinnan avulla ja käsittele niitä:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Kirja", price: 12 },
  { name: "Kynä", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Yhteensä: ${total}`);
TypeScript

Tuloste:

Yhteensä: 13.5

Käytä enumeraatiota ja luokkaa, jossa on parametriominaisuuksia:

enum Level {
  Low = "matala",
  High = "korkea",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Kirjoita testit", Level.High).describe());
TypeScript

Tuloste:

Kirjoita testit (korkea)

Ominaisuudet

  • Suorittaa TypeScript-koodia virallisella kääntäjällä, joten kaikki TypeScript-syntaksi on tuettu
  • Tukee enumeraatioita, nimiavaruuksia, dekoratoreita, geneerisiä tyyppejä ja parametriominaisuuksia
  • Näyttää syntaksivirheet rivin ja sarakkeen kanssa samassa muodossa kuin tsc
  • Näyttää console.log-, info-, debug-, warn- ja error-kutsujen tulosteet sekä käyttää varoituksille ja virheille värejä
  • Muotoilee objektit, taulukot, mapit, setit, luokat, päivämäärät ja virheet sekä käsittelee kehäviittauksia
  • Tukee komentoja console.group, count, time, assert, dir ja clear
  • Suorittaa asynkronista koodia, mukaan lukien ylimmän tason await-kutsut, ajastimet ja promiset
  • Ilmoittaa käsittelemättömät virheet ja käsittelemättömät promise-hylkäykset tulosteessa
  • Pysäytä-painike lopettaa komentosarjan heti, myös päättymättömään silmukkaan juuttuneen komentosarjan
  • Lokien säilytys -asetus on oletusarvoisesti käytössä ja säilyttää aiempien suorituskertojen tulosteet, jotta voit verrata tuloksia
  • Näet rivin lokiin kirjaamisen päivämäärän ja kellonajan viemällä hiiren osoittimen tulosteen rivin päälle
  • Kopioi koko tuloste, tyhjennä se Tyhjennä-painikkeella tai lataa koodisi tiedostona

Miten se toimii

Kun painat Suorita-painiketta, TypeScript-kääntäjä poistaa koodistasi tyypit ja muuntaa sen JavaScriptiksi. Kääntäjä ladataan kerran sivun avautuessa, joten ensimmäisellä suorituskerralla voi kestää hetki hitaalla yhteydellä. Jos koodissa on syntaksivirhe, virhe näytetään eikä koodia suoriteta.

JavaScript lähetetään sitten uuteen Web Workeriin. Workerissa console-metodit korvataan, joten jokainen kutsu muunnetaan tekstiksi ja lähetetään takaisin sivulle. Koodisi kääritään async-funktioon, mikä mahdollistaa await-kutsun ylimmällä tasolla.

Tulosteen alla oleva tilapalkki näyttää Suoritetaan-tilan, kun koodiasi käännetään tai suoritetaan tai kun odotetaan sen käynnistämää ajastinta. setInterval pitää suorituksen käynnissä, kunnes tyhjennät sen tai painat Pysäytä-painiketta. Jokainen suoritus alkaa uudella workerilla, joten aiemman suorituksen muuttujia ei koskaan jää jäljelle.

Vinkkejä

  • Tyyppejä ei tarkisteta. Kuten tsx ja esbuild, tämä työkalu poistaa tyypit ja suorittaa koodin, joten const count: number = "three" suoritetaan ilman virhettä
  • Käytä console.log-komentoa viimeisen lausekkeen sijaan: viimeisen rivin arvoa ei tulosteta, joten pelkkä 1 + 2 ei näytä mitään
  • Voit säilyttää koodissasi export-lauseet ja vain tyyppejä sisältävät import-lauseet. Paketin tuominen ei toimi, vaan epäonnistuu virheeseen "Moduulia ei löydy"
  • Workerilla ei ole sivua, joten document-, window- ja muut DOM-objektit eivät ole käytettävissä. Käytä yleiseen nimiavaruuteen viittaamiseen self-objektia
  • Tuloste säilyttää uusimmat 1000 riviä, ja yksittäinen rivi katkaistaan 10000 merkin jälkeen
  • Suorita vain koodia, johon luotat, aivan kuten selaimen konsolissa