TypeScript Academy · Oppitunti

TypeScriptin kääntäminen JavaScriptiksi

Ymmärtäkää TypeScript-kääntäjää ja sen tuottamaa koodia.

Oppitunti 3/413 vaihetta

TypeScriptin kääntäminen JavaScriptiksi on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

TypeScriptiä ei voi suorittaa suoraan Node.js:ssä tai selaimessa. Se on ensin käännettävä JavaScriptiksi. Tässä oppitunnissa opit, miten TypeScript-kääntäjä toimii.

TypeScript-kääntäjän asentaminen

Asenna TypeScript projektin kehitysriippuvuudeksi. `tsc`-komento on asennuksen jälkeen käytettävissä projektin paikallisissa skripteissä.
npm install --save-dev typescript
npx tsc --version

Ensimmäinen tsc-käännös

Suorita `tsc hello.ts` kääntääksesi yksittäisen tiedoston. Se tuottaa samaan hakemistoon tiedoston `hello.js`, josta kaikki tyypit on poistettu.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: projektin määritys

Todellisessa projektissa tarvitset tiedoston `tsconfig.json`. Luo se suorittamalla `tsc --init`. Tiedosto määrittää kohdealustan, moduulimuodon, tarkistusten tiukkuuden, tulostehakemiston ja paljon muuta.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Tärkeimmät tsconfig-asetukset

Tärkeimmät tsconfig-kentät ovat target (tulosteen ES-versio), module (moduulijärjestelmä), outDir (tulostekansio) ja strict (kaikkien tiukkojen tarkistusten käyttöönotto).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Katselutila komennolla tsc --watch

Suorita `tsc --watch`, jotta TypeScript-tiedosto käännetään automaattisesti uudelleen aina tallennuksen yhteydessä. Tämä nopeuttaa kehityssykliä.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: tyyppitarkistus ilman tiedostojen tuottamista

`noEmit`-lippu suorittaa tyyppitarkistuksen kirjoittamatta tulostetiedostoja. Tämä on hyödyllistä CI-putkissa, joissa varsinainen käännös tehdään bundlerilla, kuten Vitellä tai esbuildillä.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Nopeammat vaihtoehdot: ts-node ja tsx

Kehityksen aikana voit suorittaa TypeScriptiä suoraan ilman erillistä käännösvaihetta käyttämällä `ts-node`- tai nopeampaa `tsx`-työkalua.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Lähdekartat virheenkorjausta varten

Ota `sourceMap: true` käyttöön, jotta selaimen kehittäjätyökalut ja Node.js-virheenkorjaimet voivat yhdistää käännetyn JS-koodin rivit alkuperäiseen TypeScript-lähdekoodiin.
{ "compilerOptions": { "sourceMap": true } }

Määritystiedostot (.d.ts)

Kun `declaration: true` on käytössä, kääntäjä tuottaa myös `.d.ts`-tiedostoja. Niiden avulla muut TypeScript-projektit voivat käyttää kirjastoasi kaikkien tyyppitietojen kanssa.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Kääntäjän virheet estävät tulosteen oletusarvoisesti

Oletusarvoisesti TypeScript tuottaa JavaScriptin edelleen, vaikka siinä olisi tyyppivirheitä, mutta `tsc` päättyy nollasta poikkeavalla paluuarvolla. Käytä asetusta `noEmitOnError: true`, jos haluat estää tulosteen tuottamisen virheiden yhteydessä.
{ "compilerOptions": { "noEmitOnError": true } }

Pikatarkistus

Mitä komennon `tsc --noEmit` suorittaminen saa aikaan?

Kertaus

TypeScript-kääntäjä muuntaa .ts-tiedostot JavaScriptiksi. Määritä se tsconfig.json-tiedostolla, käytä kehityksen aikana --watch-lippua, pelkkään tyyppitarkistukseen --noEmit-lippua ja TypeScriptin suorittamiseen suoraan ts-nodea tai tsx:ää.
Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
101
Oppitunnit
352

Usein kysytyt kysymykset

Onko oppitunti ”TypeScriptin kääntäminen JavaScriptiksi” ilmainen?

Kyllä – oppitunnin ”TypeScriptin kääntäminen JavaScriptiksi” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”TypeScriptin kääntäminen JavaScriptiksi”?

Ymmärtäkää TypeScript-kääntäjää ja sen tuottamaa koodia. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”TypeScriptin kääntäminen JavaScriptiksi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. JavaScriptin kipukohdat: ajonaikaiset virheet
  2. Mitä TypeScript lisää JavaScriptiin
  3. TypeScriptin kääntäminen JavaScriptiksi
  4. Milloin TypeScriptiä kannattaa käyttää projekteissa
← Takaisin: TypeScript Academy