Aflați TypeScript în 5 minute – Un tutorial pentru începători

TypeScript este un superset setat de JavaScript, menit să facă limbajul mai scalabil și mai fiabil.

Este open-source și a fost întreținut de Microsoft de când l-au creat în 2012. Cu toate acestea, TypeScript a obținut descoperirea inițială ca limbaj de programare de bază în Angular 2. De atunci a continuat să crească, tot în comunitățile React și Vue.

În acest tutorial, veți învăța noțiunile de bază ale TypeScript cu ajutorul unor exemple practice.

Suntem, de asemenea, pe punctul de a lansa un curs TypeScript gratuit, format din 22 de părți, pe Scrimba. Lăsați-vă e-mailul aici dacă doriți acces anticipat!

Să începem.

Instalarea TypeScript

Înainte de a începe codarea, trebuie să instalăm TypeScript pe computerul nostru. Vom folosi npm pentru aceasta, deci deschideți terminalul și tastați următoarea comandă:

npm install -g typescript

Odată instalat, îl putem verifica executând comanda tsc -v care va afișa versiunea TypeScript instalată.

Scrierea unui cod

Să creăm primul nostru fișier TypeScript și să scriem un cod în el. Deschideți IDE-ul sau Editorul de text preferat și creați un fișier cu numelefirst.ts– Pentru fișierele TypeScript, folosim extensia.ts

Deocamdată, vom scrie doar câteva rânduri de JavaScript vechi simplu, deoarece tot codul JavaScript este, de asemenea, un cod TypeScript valid:

let a = 5;  
let b = 5;  
let c = a + b;

console.log(c);

Următorul pas este să compilăm TypeScript-ul nostru în JavaScript simplu, așa cum doresc browserele .js fișiere de citit.

Compilarea TypeScript

Pentru a compila, vom executa comanda de tsc filename.ts, care creează un fișier JavaScript cu același nume de fișier, dar o extensie diferită și pe care în cele din urmă îl putem transmite browserelor noastre.

Deci, deschideți terminalul la locația fișierului și executați următoarea comandă:

tsc first.ts

Bacsis: Dacă doriți să compilați toate fișierele TypeScript din orice folder, utilizați comanda: tsc *.ts

Tipuri de date

TypeScript – așa cum sugerează și numele său – este versiunea tastată a JavaScript. Aceasta înseamnă că putem specifica tipuri pentru diferite variabile în momentul declarării. În acest domeniu vor păstra întotdeauna același tip de date.

Tastarea este o caracteristică foarte utilă pentru a asigura fiabilitatea și scalabilitatea. Verificarea de tip vă ajută să ne asigurați că codul nostru funcționează conform așteptărilor. De asemenea, ajută la depistarea erorilor și erorilor și la documentarea corectă a codului nostru.

Sintaxa pentru a atribui un tip oricărei variabile este de a scrie numele variabilei urmat de un : semn, apoi numele tipului urmat de a = semnul și valoarea variabilei.

Există trei tipuri diferite în TypeScript: any tasteaza Built-in tipuri și User-defined tipuri. Să aruncăm o privire la fiecare dintre ele.

orice tip

any tipul de date este supersetul tuturor tipurilor de date din TypeScript. Oferind oricărei variabile tipul de any este echivalent cu renunțarea la verificarea tipului pentru o variabilă.

let myVariable: any = 'This is a string'

Tipuri încorporate

Acestea sunt tipurile încorporate în TypeScript. Ei includ number, string, boolean, void, null și undefined.

let num: number = 5;  
let name: string = 'Alex';  
let isPresent: boolean = true;

Tipuri definite de utilizator

User-defined tipurile includ enum, class, interface, array, și tuple. Unele dintre acestea le vom discuta mai târziu în acest articol.

Programare orientată pe obiecte

TypeScript acceptă toate caracteristicile programării orientate pe obiecte, cum ar fi clasele și interfețele. Această capacitate este un impuls uriaș pentru JavaScript – s-a luptat întotdeauna cu funcționalitatea sa OOP, mai ales că dezvoltatorii au început să o folosească pentru aplicații pe scară largă.

Clasă

În programarea orientată pe obiecte, o clasă este șablonul obiectelor. O clasă definește cum ar arăta un obiect în ceea ce privește caracteristicile și funcționalitățile acelui obiect. O clasă încapsulează, de asemenea, date pentru obiect.

TypeScript are suport încorporat pentru clase, care nu au fost acceptate de ES5 și versiunile anterioare. Aceasta înseamnă că putem folosi class cuvânt cheie pentru a declara cu ușurință unul.

class Car {

// fields  
  model: String;  
  doors: Number;  
  isElectric: Boolean;

constructor(model: String, doors: Number, isElectric: Boolean) {  
    this.model = model;  
    this.doors = doors;  
    this.isElectric = isElectric;  
  }

displayMake(): void {  
    console.log(`This car is ${this.model}`);  
  }

}

În exemplul de mai sus, am declarat a Car class, împreună cu unele dintre proprietățile sale, pe care le inițializăm în constructor. De asemenea, avem o metodă care ar afișa un mesaj folosind proprietatea sa.

Să vedem cum putem crea o nouă instanță a acestei clase:

const Prius = new Car('Prius', 4, true);  
Prius.displayMake(); // This car is Prius

Pentru a crea un obiect al unei clase, folosim cuvântul cheie de new și apelați constructorul clasei și transmiteți-i proprietățile. Acum acest obiect Prius are propriile sale proprietăți de model, doors, și isElectric. Obiectul poate apela și metoda displayMake, care ar avea acces la proprietățile Prius.

Interfață

Conceptul de interfețe este o altă caracteristică puternică a TypeScript, care vă permite să definiți structura variabilelor. O interfață este ca un contract sintactic la care ar trebui să se conformeze un obiect.

Interfețele sunt descrise cel mai bine printr-un exemplu real. Deci, să presupunem că avem un obiect de Car:

const Car = {  
  model: 'Prius',  
  make: 'Toyota',  
  display() => { console.log('hi'); }  
}

Dacă ne uităm la obiectul de mai sus și încercăm să extragem semnătura acestuia, ar fi:

{  
  model: String,  
  make: String,  
  display(): void  
}

Dacă dorim să refolosim această semnătură, o putem declara sub formă de interfață. Pentru a crea o interfață, folosim cuvântul cheie interface.

interface ICar {  
  model: String,  
  make: String,  
  display(): void  
}

const Car: ICar = {  
  model: 'Prius',  
  make: 'Toyota',  
  display() => { console.log('hi'); }  
}

Aici, am declarat o interfață numită ICar , și a creat un obiect Car. Car este acum obligatoriu pentru ICar interfață, asigurându-se că Car obiect definește toate proprietățile care se află în interfață.

Concluzie

Așadar, sper că acest lucru v-a dat o scurtă privire asupra modului în care TypeScript vă poate face JavaScript mai stabil și mai puțin predispus la erori.

TypeScript câștigă mult impuls în lumea dezvoltării web. Există, de asemenea, o cantitate din ce în ce mai mare de dezvoltatori React care îl adoptă. TypeScript este cu siguranță ceva de care ar trebui să fie conștient orice dezvoltator front-end din 2018.

Codificare fericita 🙂

Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.