TypeScript este un superset care trebuie să fie compilat în JavaScript simplu. Oferă mai mult control asupra codului dvs., deoarece folosește adnotări de tip, interfețe, clase și verificări de tip static pentru a arunca erori în timpul compilării.

TypeScript ajută la îmbunătățirea calității și a înțelegerii codului, în special cu o bază de cod mare.

În acest ghid, vă voi conduce prin TypeScript învățând mai întâi toate elementele de bază necesare pentru a începe cu acest mare limbaj. Apoi vom termina construind o aplicație de la zero folosind HTML, CSS și TypeScript.

Hai să ne scufundăm

  • Ce este TypeScript?
  • Configurarea TypeScript
  • Configurarea TypeScript cu tsconfig
  • Tipuri TypeScript
  • Tipuri de bază Scripturi tip
  • Interfețe și aliasuri de tip
  • Construiți o aplicație Pokedex folosind TypeScript
  • Markup
  • Obțineți și afișați date folosind TypeScript
  • Compilați TypeScript în JavaScript
  • Resurse

Ce este TypeScript?

TypeScript este un limbaj de programare orientat pe obiecte dezvoltat și întreținut de Microsoft. Este un superset de JavaScript, ceea ce înseamnă că orice cod JavaScript valid va rula, de asemenea, așa cum era de așteptat în TypeScript.

ad-banner

TypeScript are toate funcționalitățile JavaScript, precum și câteva caracteristici suplimentare. Trebuie să fie compilat în format JavaScript simplu în timpul rulării, de aceea aveți nevoie de un compilator pentru a recupera codul JS.

TypeScript utilizează tastarea statică, ceea ce înseamnă că puteți da un tip unei variabile în timpul declarației. Și este ceva ce nu se poate face cu JavaScript, deoarece este un limbaj tastat dinamic – nu cunoaște tipul de date al unei variabile până când nu atribuie o valoare acelei variabile în timpul rulării.

Verificarea de tip static face ca TypeScript să fie excelent, deoarece ajută la aruncarea unei erori în timpul compilării, dacă variabila este neutilizată sau reatribuită cu o adnotare de tip diferit. Cu toate acestea, eroarea nu blochează executarea codului (iar codul JavaScript va fi în continuare generat).

Tastarea statică este opțională în TypeScript. Dacă nu este definit niciun tip, dar variabila are o valoare, TypeScript va deduce valoarea ca tip. Și dacă variabila nu are valoare, tipul va fi setat la orice în mod implicit.

Acum, să începem să folosim TypeScript în secțiunea următoare pentru a o vedea în acțiune.

Configurarea TypeScript

După cum am spus mai devreme, TypeScript trebuie să se compileze în JavaScript simplu. Deci, trebuie să folosim un instrument pentru a compila. Și pentru a avea acces la acel instrument, trebuie să instalați TypeScript executând această comandă pe terminal.

  yarn add -g typescript

Sau dacă utilizați npm:

  npm install -g typescript

Rețineți că aici folosesc -g semn pentru a instala TypeScript la nivel global, astfel încât să îl pot accesa de oriunde.

Prin instalarea TypeScript, avem acum acces la compilator și putem compila codul nostru în JavaScript.

Mai târziu ne vom scufunda în el și ce face, dar deocamdată să adăugăm un fișier de configurare la proiectul nostru. Nu este obligatoriu să adăugați un fișier de configurare – dar pentru multe cazuri, este util să îl aveți, deoarece ne permite să definim seturi de reguli pentru compilator.

Configurarea TypeScript cu tsconfig

tsconfig este un fișier JSON care ajută la configurarea TypeScript. Este mai bine să aveți un fișier de configurare, deoarece vă ajută să controlați comportamentul compilatorului.

Pentru a crea fișierul de configurare, trebuie mai întâi să creați un nou director numit Pokedex și navigați în rădăcina folderului. Apoi, deschideți-l pe terminal sau un IDE și executați această comandă pentru a genera un nou fișier de configurare TypeScript.

  tsc --init

Odată ce fișierul este generat, îl putem explora acum pe un IDE.

  • tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "public/js"
        "rootDir": "src",
        "strict": true,
        "esModuleInterop": true
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src"]
}

Acest fișier de configurare este mult mai detaliat decât ceea ce vedeți mai sus – am eliminat comentariile și valorile neutilizate pentru a ușura citirea. Acestea fiind spuse, putem acum să descompunem aceste valori, să le explicăm pe fiecare și să vedem ce face.

țintă: specifică versiunea țintă ECMAScript la compilarea codului TypeScript. Aici, vizăm es5 pentru a suporta toate browserele, îl puteți schimba în ES6, ES3 (este implicit dacă nu este specificată nicio țintă), ES2020 etc.

module: definește modulul codului compilat. Modulul poate fi Common JS, ES2015, ES2020 etc.

outDir: specifică directorul de ieșire pentru codul compilat în JavaScript.

rootDir: definește locația în care se află fișierele TypeScript care trebuie compilate.

include: ajută la definirea directorului care trebuie compilat. Dacă nu aveți această valoare, compilatorul va lua fiecare .ts fișier și compilați-l în JavaScript chiar dacă este definit un director de ieșire.

Având în vedere acest lucru, ne putem scufunda acum într-una dintre cele mai importante părți ale TypeScript: tipurile.

Tipuri TypeScript

Tipurile oferă o modalitate de a îmbunătăți calitatea codului și, de asemenea, fac codul mai ușor de înțeles, deoarece definește tipurile de variabile. Acestea sunt opționale și ajută la definirea a ceea ce ar trebui să aibă o anumită variabilă ca valoare. Acestea permit, de asemenea, compilatorului să prindă erori înainte de runtime.

TypeScript are mai multe tipuri, cum ar fi număr, șir, boolean, enum, void, nul, nedefinit, oricare, niciodată, matrice și tuplu. Nu vom vedea toate tipurile în acest ghid, dar rețineți că există.

Acum, să vedem câteva exemple de tipuri de bază.

Tipuri de bază Scripturi tip

let foo: string = "test"
let bar: number = 1
let baz: string[] = ["This", "is", "a", "Test"]

După cum puteți vedea aici, avem trei variabile cu tipuri diferite. foo așteaptă un șir, bar, un număr și baz, o matrice a unui șir. Dacă primesc orice altceva în afară de tipul declarat, o eroare va fi aruncată de TypeScript.

De asemenea, puteți declara baz asa: let baz: Array<string> = ["This", "is", "a", "Test"].

Acum, să încercăm să reatribuiți una dintre aceste variabile și să vedem cum se comportă TypeScript.

let foo: string = "test"
foo = 1
Type '1' is not assignable to type 'string'

TypeScript va arunca o eroare deoarece am declarat deja foo să aștepți un șir ca valoare. Și această eroare este surprinsă în timpul compilării, ceea ce face ca TypeScript să fie excelent și util.

Cu TypeScript, tipurile pot fi explicite ca mai sus, dar pot fi și implicite. Este mai bine să definiți în mod explicit tipul unei valori date, deoarece ajută compilatorul și următorul dezvoltator care moștenește codul. Dar puteți, de asemenea, să declarați variabile cu o adnotare de tip implicită.

let foo = "test"
let bar = 1
let baz = ["This", "is", "a", "Test"]

TypeScript va încerca aici să deducă cât de mult poate pentru a vă oferi siguranța tipului cu mai puțin cod. Va lua valoarea și o va defini ca un tip pentru variabilă. Și nimic nu se va schimba în ceea ce privește erorile.

Să încercăm să reatribuiți aceste variabile pentru a vedea ce se va întâmpla.

foo = 7
bar = "updated"
baz = [2, true, "a", 10]

TypeScript va surprinde erorile ca înainte, chiar dacă tipurile de variabile sunt declarate implicit.

Type '7' is not assignable to type 'string'.
Type '"updated"' is not assignable to type 'number'.
Type 'true' is not assignable to type 'string'.

Atunci când aveți de-a face cu un obiect cu mai multe proprietăți, poate fi dificil și enervant să definiți tipurile. Dar, din fericire, TypeScript are ceva care să vă ajute împreună cu acest caz de utilizare. Deci, să ne scufundăm în interfețele TypeScript și aliasurile de tip din secțiunea următoare.

Interfețe și aliasuri de tip

Interfețele și pseudonimele de tip ne ajută să definim forma unei structuri de date asemănătoare unui obiect. Pare același lucru în ceea ce privește structura lor, dar rețineți că sunt diferite.

Cu toate acestea, consensul dintre dezvoltatori este de a folosi interface ori de câte ori puteți, deoarece este în modul implicit tslint set de reguli.

Acum, să creăm o interfață și un alias de tip în secțiunea următoare pentru a le vedea în acțiune.

interface ITest {
  id: number;
  name?: string;
}

type TestType = {
  id: number,
  name?: string,
}

function myTest(args: ITest): string {
  if (args.name) {
    return `Hello ${args.name}`
  }
  return "Hello Word"
}

myTest({ id: 1 })

După cum puteți vedea, structura unei interfețe și a unui alias tip arată ca un obiect JavaScript. Ei trebuie să definească forma datelor date cu TypeScript.

Observați că aici folosesc un câmp opțional name prin adăugarea unui semn de întrebare (?). Ne permite să realizăm proprietatea name opțional. Asta înseamnă că dacă nu se transmite nicio valoare proprietății name, se va întoarce undefined ca valoare a acestuia.

Apoi, folosim interfața ITest ca tip pentru argumentul primit de funcție myTest. Și, ca și în cazul variabilelor, funcțiile pot fi definite și pentru a returna un anumit tip. Și aici, valoarea returnată trebuie să fie un șir, altfel o eroare va fi aruncată de TypeScript.

Până în prezent, am acoperit toate cunoștințele de bază necesare pentru a începe cu TypeScript. Acum, să-l folosim pentru a construi un Pokedex cu HTML și CSS.

Hai să ne scufundăm.

excitat

Construiți o aplicație Pokedex folosind TypeScript

Proiectul pe care urmează să îl construim va prelua date de la distanță de pe API Pokemon și afișați fiecare pokemon cu TypeScript.

Deci, să începem prin a crea trei fișiere noi în rădăcina folderului Pokedex: index.html, style.css, și src/app.ts. Și pentru configurația TypeScript, vom folosi același lucru tsconfig.json fișier creat mai devreme.

Acum, să trecem la partea de marcare și să adăugăm conținut în fișierul HTML.

Markup

  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/a-practical-guide-to-typescript-how-to-build-a-pokedex-app-using-html-css-and-typescript/style.css" />
    <title>TypeScript Pokedex</title>
  </head>
  <body>
    <main>
      <h1>Typed Pokedex</h1>
      <div id="app"></div>
    </main>
    <script src="public/js/app.js"></script>
  </body>
</html>

După cum puteți vedea, avem un markup relativ simplu. Există însă două lucruri importante de reținut:

  • id app din div etichetă care va fi utilizată pentru a adăuga conținutul folosind TypeScript și
  • script etichetă care indică spre public folder și, mai exact, fișierul JavaScript pe care TypeScript îl va crea în timpul compilării.

În plus, fișierul CSS este puțin lung, așa că nu îl voi acoperi – nu vreau să vă pierd timpul și vreau să rămân concentrat pe TypeScript. Acestea fiind spuse, acum ne putem scufunda în el și putem începe să preluăm date din API.

Obțineți și afișați date folosind TypeScript

Începem partea TS selectând id-ul app care este id-ul div tag.

  • src/app.ts
const container: HTMLElement | any = document.getElementById("app")
const pokemons: number = 100

interface IPokemon {
  id: number;
  name: string;
  image: string;
  type: string;
}

Aici avem o adnotare de tip care nu trebuie încă acoperită. Acesta este un tip de uniune care permite să aveți tipuri alternative pentru o anumită variabilă. Asta înseamnă dacă container nu este de tip HTMLElement, TypeScript va verifica din nou dacă valoarea este egală cu tipul după țeavă (|) și așa mai departe, deoarece puteți avea mai multe tipuri.

Apoi, avem o interfață IPokemon care definește forma unui obiect pokemon care va fi utilizat în continuare în funcția responsabilă cu afișarea conținutului.

  • src/app.ts
const fetchData = (): void => {
  for (let i = 1; i <= pokemons; i++) {
    getPokemon(i)
  }
}

const getPokemon = async (id: number): Promise<void> => {
  const data: Response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  const pokemon: any = await data.json()
  const pokemonType: string = pokemon.types
    .map((poke: any) => poke.type.name)
    .join(", ")

  const transformedPokemon = {
    id: pokemon.id,
    name: pokemon.name,
    image: `${pokemon.sprites.front_default}`,
    type: pokemonType,
  }

  showPokemon(transformedPokemon)
}

Functia fetchData ne permite să parcurgem numărul de pokemon de recuperat și pentru fiecare apel de obiect getPokemon cu numărul pokemon.

Poate dura ceva timp pentru a prelua date, așa că vom folosi o funcție asincronă care returnează un Promise de tip void. Acest lucru înseamnă că funcția nu va returna o valoare.

Și odată ce datele au fost preluate, putem crea acum un nou obiect transformedPokemon care reflectă interfața IPokemon, și apoi treceți-o ca argument la showPokemon().

  • src/app.ts
const showPokemon = (pokemon: IPokemon): void => {
  let output: string = `
        <div class="card">
            <span class="card--id">#${pokemon.id}</span>
            <img class="card--image" src=${pokemon.image} alt=${pokemon.name} />
            <h1 class="card--name">${pokemon.name}</h1>
            <span class="card--details">${pokemon.type}</span>
        </div>
    `
  container.innerHTML += output
}

fetchData()

După cum puteți vedea, funcția showPokemon primește ca parametru obiectul pokemon de tip IPokemon și se întoarce void sau nicio valoare pentru a fi precis. Va adăuga conținutul la fișierul HTML cu ajutorul id-ului container (amintiți-vă, este div etichetă).

Grozav! Acum am făcut multe, dar ceva încă lipsește deoarece index.html fișierul nu va afișa nimic dacă încercați să îl lansați în browser. Acest lucru se datorează faptului că TypeScript trebuie compilat în JavaScript simplu. Deci, să facem asta în secțiunea următoare.

Compilați TypeScript în JavaScript

Mai devreme în acest tutorial, am instalat compilatorul TypeScript care permite compilarea codului TS în JavaScript. Și pentru a face acest lucru, trebuie să navigați în rădăcina proiectului și să rulați următoarea comandă.

  tsc

Această comandă va compila fiecare fișier cu un fișier .ts extensie la JavaScript. Și din moment ce avem un tsconfig , compilatorul va urma regulile definite și va compila numai fișierele TS aflate în src și introduceți codul JS în public director.

De asemenea, compilatorul permite compilarea unui singur fișier.

  tsc myFile.ts

Și dacă nu specificați un nume după fișierul TS (myFile.ts), fișierul JS compilat va lua același nume ca și fișierul TS.

Dacă doriți să nu executați comanda la fiecare modificare, trebuie doar să adăugați un -w flag pentru a permite compilatorului să urmărească în continuare modificările și să recompileze codul atunci când este necesar.

  tsc -w

Și acum, dacă lansați index.html fișier, veți vedea Pokedex redat cu succes în browser.

aplicație

Grozav! Am învățat acum noțiunile de bază ale TypeScript prin crearea unei aplicații Pokedex cu HTML și CSS.

Previzualizați proiectul finalizat aici sau găsiți codul sursă aici.

Puteți găsi, de asemenea, alte conținut grozav ca acesta blogul meu sau urmează-mă pe Twitter să primesc notificări când scriu ceva nou.

Mulțumesc pentru lectură.

Resurse

Iată câteva resurse utile pentru a vă adânci în TypeScript.

Tipuri TypeScript

Opțiuni compilator TypeScript

Manualul TypeScript