Ce este typescript? Tutorial și introducere

TypeScript este un limbaj de programare open-source dezvoltat de Microsoft, care extinde JavaScript prin adăugarea de tipuri statice. Acest lucru permite detectarea erorilor înainte de rularea codului, îmbunătățind astfel calitatea și mentenabilitatea aplicațiilor. În acest tutorial, vom explora conceptele de bază și avansate ale TypeScript, de la configurarea mediului de dezvoltare până la utilizarea tipurilor generice și a decoratorilor.

Principalele idei

• TypeScript adaugă tipuri statice la JavaScript, ajutând la detectarea timpurie a erorilor.
• Este compatibil cu orice browser web și sistem de operare care suportă JavaScript.
• Permite dezvoltarea de aplicații mari și complexe într-un mod mai structurat și modular.
• Oferă suport excelent pentru instrumente de dezvoltare, cum ar fi autocompletarea și verificarea erorilor.
• Poate fi integrat treptat în proiectele JavaScript existente, fără a necesita rescrierea completă a codului.

Ce este TypeScript și de ce să-l folosești

TypeScript este un limbaj de programare dezvoltat de Microsoft, care extinde JavaScript prin adăugarea de tipuri statice. Este un superset al JavaScript, ceea ce înseamnă că orice cod JavaScript valid este și cod TypeScript valid. TypeScript este compilat în JavaScript, permițându-i să ruleze pe orice platformă care suportă JavaScript.

Avantajele TypeScript față de JavaScript

• Organizarea codului: TypeScript ajută la menținerea unui cod bine structurat și ușor de întreținut, mai ales în proiectele mari și complexe.
• Erori de compilare: Detectează erorile în timpul compilării, reducând numărul de bug-uri în timpul execuției.
• Suport pentru biblioteci JS: Acceptă toate bibliotecile și API-urile JavaScript existente.
• Tipare statice: Permite definirea tipurilor de date, ceea ce ajută la prevenirea erorilor de tip.
• Programare orientată pe obiecte: Suportă clase, interfețe și alte concepte OOP, facilitând dezvoltarea aplicațiilor mari.
• Compatibilitate ECMAScript: Acceptă toate caracteristicile ECMAScript moderne, precum și extensii proprii.

Cine folosește TypeScript

TypeScript este utilizat de multe echipe și companii mari pentru a dezvolta aplicații scalabile și robuste. Printre utilizatori se numără:

• Echipa Angular: Angular, un popular framework pentru dezvoltarea aplicațiilor web, este scris în TypeScript.
• Microsoft: Fiind dezvoltat de Microsoft, multe dintre proiectele lor interne și externe folosesc TypeScript.
• Facebook: Deși React este scris în JavaScript, multe proiecte din ecosistemul React folosesc TypeScript pentru a beneficia de tipare statice.

Exemple de proiecte TypeScript

TypeScript este folosit într-o varietate de proiecte, de la aplicații web la servere backend. Iată câteva exemple:

• Aplicatii web: Framework-uri precum Angular și React pot fi scrise în TypeScript pentru a beneficia de tipare statice și erori de compilare.
• Servere backend: Node.js, un mediu de execuție pentru JavaScript, suportă TypeScript, permițând dezvoltarea de servere scalabile și robuste.
• Biblioteci și tool-uri: Multe biblioteci populare, cum ar fi RxJS și D3.js, oferă suport pentru TypeScript, facilitând integrarea în proiecte TypeScript.

TypeScript nu doar că îmbunătățește calitatea codului, dar și facilitează colaborarea între dezvoltatori, oferind un mediu de dezvoltare mai sigur și mai predictibil.

Configurarea mediului de dezvoltare TypeScript

Instalarea TypeScript

Pentru a începe cu TypeScript, trebuie să aveți instalat Node.js și npm. Node.js este un runtime JavaScript care vă permite să rulați JavaScript pe server, iar npm este managerul de pachete pentru Node.js.

1. Descărcați și instalați Node.js de pe site-ul oficial: nodejs.org.
2. Verificați instalarea Node.js și npm rulând următoarele comenzi în linia de comandă:

node --version
npm --version

3. Creați un nou director pentru proiectul dvs. și inițializați un nou proiect npm:

mkdir typeproject
cd typeproject
npm init -y

4. Instalați TypeScript global folosind npm:

npm install -g typescript

Acum aveți TypeScript instalat global și puteți folosi comanda tsc din orice director.

Configurarea unui proiect TypeScript

Pentru a configura un proiect TypeScript, trebuie să creați un fișier de configurare tsconfig.json. Acest fișier va conține toate setările necesare pentru compilatorul TypeScript.

1. În directorul proiectului, creați fișierul tsconfig.json:

tsc --init

2. Editați fișierul tsconfig.json pentru a se potrivi nevoilor proiectului dvs. Un exemplu de configurare de bază ar putea arăta astfel:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

3. Creați un director src în care veți plasa fișierele TypeScript.
4. Scrieți un fișier TypeScript de test în src/test.ts:

function add(x: number, y: number): number {
  return x + y;
}

let sum = add(5, 10);
console.log(sum);

5. Compilați fișierul TypeScript folosind comanda tsc:

tsc

Aceasta va genera un fișier JavaScript în directorul dist.

Instrumente și extensii recomandate

Pentru a îmbunătăți experiența de dezvoltare cu TypeScript, există câteva instrumente și extensii pe care le puteți folosi:

• Visual Studio Code: Un editor de cod sursă foarte popular, care are suport excelent pentru TypeScript.
• Extensia TypeScript pentru Visual Studio Code: Oferă autocompletare, verificare de erori în timp real și multe alte funcționalități utile.
• TSLint: Un instrument de lintering pentru TypeScript care ajută la menținerea unui cod curat și consistent.
• Prettier: Un formator de cod care poate fi integrat cu TypeScript pentru a asigura un stil de cod consistent.

Configurarea corectă a mediului de dezvoltare TypeScript este esențială pentru a beneficia de toate avantajele acestui limbaj puternic.

Cu aceste setări, sunteți gata să începeți să dezvoltați aplicații robuste și scalabile folosind TypeScript.

Sintaxa de bază în TypeScript

Declarații de variabile și constante

În TypeScript, variabilele sunt folosite pentru a stoca valori, iar valoarea poate fi un șir, un număr, boolean sau o expresie. Tipul unei variabile este definit doar la început și trebuie să mențină același tip pe parcursul execuției. Orice modificare a tipului va duce la o eroare de compilare. De exemplu:

let numar: number = 5;
const mesaj: string = "Salutare!";

Tipuri de date în TypeScript

TypeScript acceptă mai multe tipuri de date, inclusiv tipuri primare precum string, number și boolean. De asemenea, există tipuri complexe și speciale. Iată câteva exemple de tipuri de date:

• String: let text: string = "Hello World";
• Number: let numar: number = 10;
• Boolean: let esteAdevarat: boolean = true;
• Array: let numere: number[] = [1, 2, 3, 4];
• Tuple: let pereche: [string, number] = ["Salut", 5];

Comentarii și operatori

Comentariile în TypeScript sunt similare cu cele din JavaScript și pot fi de două tipuri: pe o singură linie și pe mai multe linii. Operatorii sunt folosiți pentru a efectua operații asupra variabilelor și valorilor. Exemple de comentarii și operatori:

// Acesta este un comentariu pe o singură linie
/* Acesta este un comentariu
   pe mai multe linii */

let suma = 5 + 3; // Operator de adunare
let diferenta = 5 - 3; // Operator de scădere
let produs = 5 * 3; // Operator de înmulțire
let cat = 5 / 3; // Operator de împărțire

În TypeScript, funcțiile sunt un set de instrucțiuni efectuate pentru a îndeplini o sarcină. De exemplu, funcțiile matematice și statistice sunt ușor de învățat și utilizat.

Tipuri de date în TypeScript

Tipuri primare

În TypeScript, tipurile primare includ numere, șiruri de caractere și valori booleene. Acestea sunt esențiale pentru orice limbaj de programare.

• Număr: Reprezintă valori numerice, fie ele întregi sau zecimale.let a: number = 10; let price: number = 10.2;
• Șir: Reprezintă secvențe de caractere.let str: string = "hello world";
• Boolean: Reprezintă valori logice, adevărat sau fals.let isDone: boolean = false;

Tipuri complexe

Tipurile complexe permit stocarea și manipularea unor seturi mai mari de date.

• Matrice: Permite stocarea mai multor valori de același tip.let numbers: number[] = [1, 2, 3, 4, 5];
• Tuplu: Permite stocarea unui set fix de elemente de tipuri diferite.let tuple: [string, number]; tuple = ["hello", 10];
• Obiect: Permite stocarea de perechi cheie-valoare.let person: { name: string, age: number } = { name: "John", age: 30 };

Tipuri speciale

TypeScript oferă și tipuri speciale pentru cazuri particulare.

• Any: Permite atribuirea oricărui tip de valoare.let randomValue: any = 10; randomValue = "hello";
• Void: Este folosit în principal pentru funcțiile care nu returnează nimic.function logMessage(): void { console.log("Hello, world!"); }
• Null și Undefined: Reprezintă valori neatribuite sau inexistente.let u: undefined = undefined; let n: null = null;

În concluzie, înțelegerea diferitelor tipuri de date din TypeScript este esențială pentru a scrie cod robust și eficient.

Clase și obiecte în TypeScript

Definirea claselor

În TypeScript, clasele sunt folosite pentru a crea obiecte care împărtășesc aceleași proprietăți și metode. Sintaxa de bază pentru definirea unei clase este următoarea:

class NumeClasa {
    // definește proprietățile aici
    constructor() {
        // inițializează proprietățile aici
    }
    // definește metodele aici
}

Moștenirea și polimorfismul

Moștenirea permite unei clase să preia proprietățile și metodele unei alte clase. Acest lucru se face folosind cuvântul cheie extends:

class ClasaParinte {
    // proprietăți și metode
}

class ClasaCopil extends ClasaParinte {
    // proprietăți și metode suplimentare
}

Polimorfismul permite obiectelor de diferite tipuri să fie tratate ca și cum ar fi de același tip, prin intermediul unei clase de bază comune.

Proprietăți și metode statice

Proprietățile și metodele statice aparțin clasei în sine, nu instanțelor acesteia. Ele sunt accesate folosind numele clasei:

class Utilitar {
    static versiune: string = "1.0";
    static afiseazaVersiune() {
        console.log(Utilitar.versiune);
    }
}

Utilitar.afiseazaVersiune(); // 1.0

În TypeScript, clasele sunt o modalitate puternică de a organiza și reutiliza codul, similar cu alte limbaje de programare orientate pe obiecte.

Interfețe și tipuri avansate

Crearea și utilizarea interfețelor

Interfețele sunt un element esențial în TypeScript. Ele definesc un set de reguli pe care o clasă, o funcție sau o variabilă trebuie să le respecte. Interfețele ajută la verificarea tipului pentru orice entitate care le implementează. De exemplu, o interfață poate conține proprietăți și metode, iar acestea pot fi marcate ca opționale folosind sintaxa ?.

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Tipuri generice

Tipurile generice permit crearea de componente reutilizabile. Acestea funcționează cu orice tip de date și sunt foarte utile pentru a crea funcții, clase sau interfețe care pot lucra cu diferite tipuri de date fără a pierde din siguranța tipului.

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Bună!");

Tipuri condiționale

Tipurile condiționale sunt o caracteristică avansată care permite crearea de tipuri noi pe baza unei condiții. Acestea sunt utile pentru a crea tipuri complexe și flexibile.

type IsString<T> = T extends string ? 'Da' : 'Nu';

let rezultat: IsString<number>; // 'Nu'
let rezultat2: IsString<string>; // 'Da'

În acest curs de instruire live, condus de un instructor în România, participanții vor învăța cum să construiască aplicații folosind TypeScript și alte tehnologii moderne.

Controlul fluxului în TypeScript

Instrucțiuni if-else

Instrucțiunile if-else sunt esențiale pentru controlul fluxului în TypeScript. Acestea permit executarea condiționată a unor blocuri de cod. Sintaxa este similară cu cea din JavaScript:

let num: number = 10;
if (num > 5) {
    console.log('Numărul este mai mare decât 5');
} else {
    console.log('Numărul este 5 sau mai mic');
}

Instrucțiuni switch

Instrucțiunile switch sunt utile atunci când trebuie să compari o variabilă cu mai multe valori posibile. Acestea oferă o alternativă mai clară și mai organizată la multiplele if-else:

let zi: string = 'Luni';
switch (zi) {
    case 'Luni':
        console.log('Astăzi este luni');
        break;
    case 'Marti':
        console.log('Astăzi este marți');
        break;
    default:
        console.log('Zi necunoscută');
}

Bucla for și while

Bucla for este folosită pentru a repeta un bloc de cod de un număr specific de ori. Este foarte utilă pentru iterarea prin array-uri sau colecții:

let numere: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numere.length; i++) {
    console.log(numere[i]);
}

Bucla while continuă să execute un bloc de cod atâta timp cât o condiție specificată este adevărată. Este utilă pentru situațiile în care nu știi dinainte câte iterații sunt necesare:

let count: number = 0;
while (count < 5) {
    console.log(count);
    count++;
}

Controlul fluxului în TypeScript este esențial pentru a gestiona rata de transmitere a datelor între expeditor și receptor, prevenind congestia rețelei.

Funcții și metode în TypeScript

Definirea funcțiilor

Funcțiile sunt un set de instrucțiuni care îndeplinesc o anumită sarcină. În TypeScript, funcțiile sunt similare cu cele din JavaScript, dar tipurile de date aduc un plus de siguranță. De exemplu, o funcție simplă de adunare arată astfel:

function add(a: number, b: number): number {
    return a + b;
}

Parametri opționali și default

În TypeScript, poți defini parametri opționali folosind semnul ? și parametri cu valori implicite. Aceasta face funcțiile mai flexibile și ușor de utilizat.

function greet(name: string, greeting?: string): string {
    return `${greeting || 'Hello'}, ${name}!`;
}

Funcții generice

Funcțiile generice permit crearea de funcții care pot lucra cu diferite tipuri de date, oferind flexibilitate și reutilizare a codului. Iată un exemplu de funcție generică:

function identity<T>(arg: T): T {
    return arg;
}

Funcțiile generice sunt utile în multe scenarii, cum ar fi manipularea colecțiilor de date de diferite tipuri.

Module și namespaces în TypeScript

Import și export de module

În TypeScript, modulele sunt folosite pentru a organiza codul în fișiere separate și pentru a evita conflictele de nume. Modulele permit împărțirea codului în bucăți reutilizabile și gestionabile. Pentru a exporta o variabilă, funcție sau clasă, se folosește cuvântul cheie export. Importul se face cu ajutorul cuvântului cheie import.

// Exportarea unei funcții
export function salut() {
    console.log('Salut lume!');
}

// Importarea funcției
import { salut } from './salut';
salut();

Utilizarea namespaces

Namespaces sunt o modalitate de a grupa codul sub un singur nume. Acestea sunt utile pentru a organiza codul și pentru a evita conflictele de nume în aplicații mari. Un namespace este definit folosind cuvântul cheie namespace.

namespace StudentSetup {
    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str: string): string {
        return str.split('').join(' ');
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(details: StudDetails) {
            this.name = details.name;
            this.age = details.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

let student = new StudentSetup.Student({ name: 'Harry', age: 20 });
console.log('The name is: ' + StudentSetup.addSpace(student.getName()));

Gestionarea dependențelor

Gestionarea dependențelor în TypeScript se face de obicei cu ajutorul unor instrumente precum npm (Node Package Manager). Aceste instrumente permit instalarea și actualizarea pachetelor necesare pentru proiectul tău. Pentru a instala un pachet, se folosește comanda npm install.

npm install lodash

După instalare, pachetul poate fi importat și utilizat în codul TypeScript.

import * as _ from 'lodash';

let array = [1, 2, 3, 4];
console.log(_.reverse(array)); // [4, 3, 2, 1]

Decoratori și meta-programare

Ce sunt decoratorii

Decoratorii sunt o caracteristică avansată în TypeScript, care permite adăugarea de comportamente suplimentare claselor, metodelor, proprietăților sau parametrilor. Aceștia sunt folosiți pentru a modifica sau extinde funcționalitatea codului existent fără a-l modifica direct.

Crearea decoratorilor

Pentru a crea un decorator, trebuie să definim o funcție care va primi ca parametru elementul pe care dorim să-l decorăm. Iată un exemplu simplu de decorator pentru o metodă:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Metoda ${propertyKey} a fost apelată cu argumentele: ${args}`);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

Utilizarea meta-programării

Meta-programarea în TypeScript implică scrierea de cod care operează asupra altui cod. Decoratorii sunt un exemplu de meta-programare, deoarece permit adăugarea de comportamente suplimentare la codul existent. Aceasta poate include validarea datelor, logarea apelurilor de metode sau chiar modificarea comportamentului unei clase întregi.

Meta-programarea poate simplifica foarte mult codul, reducând redundanța și îmbunătățind lizibilitatea.

Decoratorii și meta-programarea sunt instrumente puternice care pot transforma modul în care scriem și gestionăm codul în TypeScript.

Compatibilitatea TypeScript cu JavaScript

Integrarea TypeScript în proiecte existente

TypeScript este un superset de JavaScript, ceea ce înseamnă că orice cod JavaScript valid este și cod TypeScript valid. Acest lucru face ca integrarea TypeScript în proiectele existente să fie foarte simplă. Dezvoltatorii pot începe prin a redenumi fișierele .js în .ts și apoi să adauge treptat tipizări pentru a beneficia de avantajele TypeScript.

Conversia codului JavaScript în TypeScript

Conversia codului JavaScript în TypeScript poate fi realizată în câțiva pași simpli:

1. Redenumiți fișierele .js în .ts.
2. Adăugați tipizări explicite pentru variabile și funcții.
3. Rulați compilatorul TypeScript pentru a verifica eventualele erori de tip.

Acest proces ajută la identificarea și corectarea erorilor de tip care ar putea trece neobservate în JavaScript.

Beneficiile compatibilității

Compatibilitatea între TypeScript și JavaScript aduce numeroase beneficii:

• Siguranța tipurilor: TypeScript ajută la prevenirea erorilor de tip prin verificarea acestora în timpul compilării.
• Îmbunătățirea productivității: Instrumentele de dezvoltare, cum ar fi IntelliSense, funcționează mai bine cu TypeScript, oferind sugestii și completări de cod mai precise.
• Adoptare treptată: Deoarece TypeScript este compatibil cu JavaScript, echipele pot adopta TypeScript treptat, fără a fi nevoie să rescrie întregul cod de la început.

TypeScript permite dezvoltatorilor să profite de avantajele tipizării statice, menținând în același timp compatibilitatea cu codul JavaScript existent.

Concluzie

TypeScript este un instrument valoros pentru dezvoltatorii care doresc să îmbunătățească calitatea și fiabilitatea codului lor JavaScript. Prin adăugarea de tipuri statice, TypeScript ajută la detectarea erorilor încă din faza de scriere a codului, ceea ce poate economisi timp și efort pe termen lung. De asemenea, facilitează dezvoltarea aplicațiilor de mari dimensiuni, oferind un sistem de tipuri robust și funcționalități avansate precum clase, interfețe și generice. În plus, compatibilitatea sa cu JavaScript face tranziția ușoară și permite adoptarea treptată în proiectele existente. În concluzie, învățarea și utilizarea TypeScript poate aduce numeroase beneficii, de la un cod mai curat și mai ușor de întreținut, până la o productivitate crescută în echipele de dezvoltare.

Întrebări frecvente

Ce este TypeScript?

TypeScript este un limbaj de programare open-source dezvoltat de Microsoft. Este o extensie a JavaScript-ului care adaugă tipuri statice.

De ce să folosesc TypeScript în loc de JavaScript?

TypeScript te ajută să găsești și să corectezi erorile mai devreme, îmbunătățește calitatea codului și face proiectele mari mai ușor de gestionat.

Cine folosește TypeScript?

TypeScript este folosit de companii mari precum Microsoft, Google și Asana, dar și de mulți dezvoltatori individuali.

Cum instalez TypeScript?

Poți instala TypeScript folosind npm (Node Package Manager) cu comanda `npm install -g typescript`.

Pot folosi TypeScript cu proiectele mele existente în JavaScript?

Da, TypeScript este compatibil cu JavaScript și poți adăuga treptat cod TypeScript în proiectele tale existente.

Ce sunt tipurile primare în TypeScript?

Tipurile primare în TypeScript includ string, number, boolean, null, și undefined.

Ce sunt interfețele în TypeScript?

Interfețele în TypeScript sunt folosite pentru a defini structura unui obiect, specificând ce proprietăți și metode trebuie să aibă.

Cum pot învăța TypeScript mai repede?

Cel mai bun mod de a învăța TypeScript este să-l folosești în proiecte practice, să citești documentația oficială și să urmezi tutoriale online.