TypeScript Tutorial: Ce este, Interfață, Enum, Array

⚡ Rezumat inteligent

TypeScript este o supermulțime puternic tipizată a JavaScript care se compilează în format simplu JavaScrieți scripturi și adăugați clase, interfețe, enumări, module și spații de nume. Acest articol acoperă instalarea, variabilele, tipurile, tablourile, clasele, modificatorii de acces, interfețele, funcțiile, enumările, modulele și declarațiile ambientale.

  • 🧬 Relația lingvistică: Fiecare valid JavaProgramul script este valid TypeScript, iar compilatorul emite un cod simplu JavaScript pentru orice versiune țintă.
  • 🔒 Ty staticping: O variabilă păstrează tipul dat la declarare, astfel încât o nepotrivire este raportată la momentul compilării, mai degrabă decât la momentul execuției.
  • 🧱 Orientare pe obiecte: Clasele, moștenirea și modificatorii publici, privati ​​și protejați aduc o structură familiară codului browserului.
  • 📐 Interfețe: O interfață definește o contrafăcutătract de proprietăți și metode pe care o variabilă, funcție sau clasă trebuie să le satisfacă.
  • 🔢 Enumări: Seturile de constante denumite se compilează în funcții autoinvocate, deoarece JavaScriptul nu are un tip enum nativ.
  • 📦 Module: Exportul și importul păstrează declarațiile locale într-un fișier și previn coliziunile globale de nume.
  • 🔌 Declarații privind mediul: Un fișier .d.ts descrie o terță parte JavaBibliotecă de scripturi, astfel încât verificarea tipului se aplică fără a o rescriere.

TypeScript tutorial

Ce Este TypeScript?

TypeScript este un superset de JavaScenariul. TypeScript este un limbaj de programare orientat pe obiecte care suportă clase, interfețe și multe altele. Este un limbaj open-source dezvoltat de Microsoft care compilează static codul la JavaScript. Poate rula cu ușurință într-un browser sau în Nodejs.

Toate cele mai recente caracteristici lansate pentru ECMAScript sunt acceptate în TypeScript, si in completare TypeScript are propriile caracteristici orientate pe obiecte, cum ar fi interfețe, declarații ambientale și moștenire de clase, care ajută la dezvoltareping o aplicație mare care altfel ar fi dificil de integrat JavaScenariu.

Relația este unidirecțională. Fiecare valid JavaFișierul script este deja valid TypeScript, dar inversul nu este adevărat, deoarece adnotările de tip există doar în TypeScript și sunt șterse în timpul compilării.

De ce sa folosim TypeScript?

Iată beneficiile importante ale utilizării TypeScript:

  • Proiecte mari și complexe în JavaScripturile sunt dificil de codat și întreținut.
  • TypeScript ajută mult la organizarea codului și elimină majoritatea erorilor în timpul compilării, mai degrabă decât în ​​timpul execuției.
  • TypeScript suportă biblioteci JS și documentație API.
  • Este un limbaj de scripting opțional tipizat, astfel încât tipurile pot fi adoptate treptat.
  • TypeScript codul poate fi convertit în cod simplu JavaCod script pentru orice țintă de browser.
  • Oferă o structurare mai bună a codului și tehnici de programare orientată pe obiecte.
  • Permite un suport mai bun pentru instrumente în timpul dezvoltării, inclusiv autocompletare și refactorizare sigură.
  • Poate extinde limbajul dincolo de standard, cu caracteristici precum decoratori.

Cel mai mare avantaj practic este suportul oferit de editori. Deoarece compilatorul cunoaște forma fiecărei valori, un editor poate redenumi o proprietate în întregul proiect și poate raporta fiecare loc care nu se mai potrivește.

TypeScript Istorie

Să vedem reperele importante din istoria TypeScript:

  • După doi ani de dezvoltare internă la Microsoft, TypeScript 0.9 a fost lansat în 2013.
  • TypeScript Versiunea 1.0, cu suport suplimentar pentru generice, a fost lansată la Build 2014.
  • În iulie 2014, un nou TypeScript a sosit compilatorul care a fost de cinci ori mai rapid decât versiunea anterioară.
  • În iulie 2015, a fost adăugat suport pentru modulele ES6, cuvântul cheie namespace, for…of și decoratori.
  • În noiembrie 2016, au fost adăugate tipurile mapate, tipurile de chei și de căutare, precum și repausul și răspândirea obiectelor.
  • Pe 27 martie 2018, au fost adăugate tipuri condiționale și o funcție keyof îmbunătățită cu tipuri de intersecție.
  • TypeScript Versiunea 5.0, lansată în martie 2023, a modernizat decoratorii și a redus dimensiunea pachetului.
  • TypeScript Versiunea 6.0 a apărut în martie 2026 ca versiune finală construită pe JavaBaza de cod a scriptului.
  • TypeScript Versiunea 7.0 mută compilatorul la o implementare nativă Go, care Microsoft raportează ca fiind de aproximativ zece ori mai rapid decât 6.0.

Cine folosește TypeScript?

TypeScript nu mai este o alegere de nișă. Stă la baza mai multora dintre cele mai utilizate instrumente front-end și back-end, iar lista de mai jos arată unde este cel mai probabil ca un începător să îl întâlnească.

  • Unghiular: Framework-ul Angular este scris în TypeScriptși se așteaptă ca și codul aplicației să fie scris în acesta.
  • Proiecte React și Vue: Ambele ecosisteme expediază oficial TypeScript șabloane, iar majoritatea programelor de pornire moderne îl activează în mod implicit.
  • Backend-uri Node.js: Framework-urile de server precum NestJS sunt construite în jurul TypeScript clase și decoratori.
  • Instrumente editor: Visual Studio Code este în sine o mare TypeScript baza de cod, motiv pentru care suportul său lingvistic este atât de complet.
  • Interfețe pentru întreprinderi mari: Echipele care lucrează cu mulți contribuitori îl adoptă pentru a detecta erorile de integrare înainte de implementare.

Cum se descarcă și se instalează TypeScript

Iată procesul pas cu pas pentru descărcare și instalare TypeScript:

Pasul 1) Descărcați și instalați Nodejs

Accesați site-ul oficial al Nodejs, https://nodejs.org/en/download/și descărcați și instalați Nodejs pentru sistemul dvs. de operare. Instrucțiuni detaliate sunt disponibile în ghidul de pe cum se descarcă și se instalează Node.js.

Pasul 2) Verificați versiunea Nodejs și npm

Pentru a verifica dacă sunt instalate Nodejs și npm, verificați versiunea în promptul de comandă.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Orice versiune actuală de Node LTS funcționează. TypeScript în sine necesită doar o versiune Node acceptată pentru a rula compilatorul.

Pas 3) TypeScript Instalare

Creați directorul proiectului typeproject\ și rulați npm init, așa cum se arată în comanda de mai jos:

npm init

Pasul 4) Porniți instalarea

Aceasta creează fișierul package.json, care va stoca dependențele proiectului nostru.

După ce ați terminat, instalați TypeScript după cum urmează:

npm -g install typescript

Comanda de mai sus se va ocupa de instalare TypeScript. Adăugarea „-g” la instalarea npm se va instala TypeScript global. Avantajul utilizării -g este că veți putea utiliza TypeScript tsk comanda din orice director, deoarece este instalată global. În cazul în care nu doriți să instalați TypeScript global, utilizați comanda de mai jos:

npm install --save-dev typescript

Creați un folder src\ în directorul proiectului și, în interiorul acestuia, creați folderul TypeScript fișier test.ts și scrieți-vă codul.

Exemplu: test.ts

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

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

Compila TypeScript codul către Javascript

Pentru a compila codul de mai sus, utilizați următoarea comandă.

If TypeScript este instalat global, utilizați comanda de mai jos:

tsc test.ts

If TypeScript este instalat local în proiectul dvs., trebuie să utilizați calea către TypeScript din node_modules, așa cum se arată, sau rulați-l prin npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Comanda de mai sus va crea un fișier test.js care va conține codul compilat pentru JavaScenariul.

Exemplu: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Executa Javascript folosind Nodejs

Acum vom executa test.js în Nodejs după cum urmează:

D:\typeproject\src>node test.js
15

Valoarea transmisă către console.log este afișată atunci când rulează test.js.

Executa JavaScript în Browser

Exemplu:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Executa Javascript folosind Nodejs

Compila TypeScript codul către Javascript folosind versiunea EcmaScript

TypeScript Acceptă toate funcțiile ECMAScript lansate, iar dezvoltatorii le pot folosi în timpul programării. Însă nu toate funcțiile noi sunt acceptate pe browserele mai vechi, așa că este posibil să fie nevoie să compilați la o versiune mai veche de ECMAScript. TypeScript oferă opțiuni de compilare care fac exact acest lucru.

Exemplu: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Pentru a compila la versiunea ES aleasă de dvs., puteți utiliza opțiunea target sau t din comandă, după cum urmează:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

În mod implicit, ținta este ES3 pentru compilatorul clasic. În cazul în care doriți să o modificați, puteți utiliza comanda de mai sus.

În prezent vom folosi ES6 ca țintă:

tsc --target ES6  test.ts

test.ts pentru a testa.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Codul rămâne așa cum este, deoarece funcția săgeată pe care ați folosit-o este o caracteristică ES6 și este neschimbată la compilarea în ES6.

În mod implicit, ținta este ES3, deci fără o țintă obțineți test.js ca:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Așadar, aici, săgeata groasă este transformată într-o funcție anonimă normală.

💡 Sfat: În loc să transmiți opțiuni pe linia de comandă de fiecare dată, rulează tsc --init pentru a genera un fișier tsconfig.json. Compilatorul citește apoi setările target, outDir și strict din acel fișier pentru întregul proiect.

Variabile în TypeScript

Variabile sunt folosite pentru a stoca valori, iar valoarea poate fi un șir, un număr, boolean sau o expresie. Când vine vorba de variabile în TypeScript, sunt asemănătoare cu JavaScenariuAșadar, haideți să învățăm să declarăm și să atribuim o valoare variabilelor în TypeScript.

Variabilele nu pot fi utilizate în cod fără a fi definite. Pentru a declara o variabilă puteți utiliza

a fost cuvânt cheie,

lăsa cuvinte cheie

CONST cuvinte cheie

Lucrul cu variabile în TypeScript este similar cu JavaScript și utilizatori familiarizați cu JavaScript-ul va găsi foarte ușor. În codul modern, lăsa și CONST sunt preferate a fost, deoarece domeniul lor de aplicare în bloc previne o întreagă clasă de erori.

Declararea variabilelor folosind var

Sintaxă:

var firstname = "Roy";

Să aruncăm o privire la câteva TypeScript exemple pentru a înțelege funcționarea cuvântului cheie var și, de asemenea, domeniul de aplicare al variabilelor declarate folosind a fost cuvinte cheie.

Exemplu 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Exemplu 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Exemplu 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Declararea variabilelor folosind let

TypeScript sintaxa pentru let este următoarea:

Sintaxă:

let name = "Roy";

Funcționarea lăsa variabila este aproape aceeași cu a fost, dar cu o diferență importantă, pe care o demonstrează exemplul de mai jos.

Exemplu:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

Cele de mai sus TypeScript exemplul generează o eroare, dar același cod ar fi funcționat cu a fost cuvânt cheie. Variabile declarate folosind lăsa sunt disponibile numai în blocul în care sunt declarate. În acest exemplu, t există doar în blocul if, nu în întreaga funcție.

Același lucru este valabil în interiorul oricărei funcții, bucle for, bucle while sau bloc switch. O variabilă let este disponibilă numai în interiorul acelui bloc, iar referențierea ei în afara acestuia generează o eroare. Aceasta este principala diferență dintre var și let.

Declararea variabilelor folosind const

„Const” înseamnă variabile constante. Sunt similare variabilelor „let”, cu diferența că odată ce o valoare este atribuită, aceasta nu poate fi modificată. Prin urmare, o declarație de tip „const” trebuie inițializată pe aceeași linie.

Sintaxă:

const name = "Roy";

Exemplu:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Așadar, folosiți const ori de câte ori știți că valoarea atribuită nu va fi reatribuită. Rețineți că const previne reatribuirea legăturii, nu modificarea unui obiect la care indică.

Introduceți TypeScript

TypeScript este un limbaj puternic tipizat, în timp ce JavaScriptul nu este. O variabilă a cărei valoare este definită ca un șir de caractere poate fi schimbată într-un număr fără nicio problemă în JavaScript. Același lucru nu este tolerat în TypeScript. În TypeScript, tipul unei variabile este definit la început și pe tot parcursul execuției trebuie să păstreze acel tip. Orice modificare duce la o eroare de compilare în timpul compilării către JavaScenariul.

Următoarele sunt tipurile de bază:

Tip acceptă Exemplu de declarație
număr Numere întregi, numere cu număr mobil și fracții fie a: număr = 10;
şir Numai valori text let s: șir = „salut”;
boolean adevărat sau fals doar fie b: boolean = true;
Orice Orice valoare, fără verificare aplicată fie x: oricare = 123;
anula Absența unei valori returnate funcția f(): void {}

Număr

Acceptă doar numere întregi, numere cu virgulă mobilă, fracții și valori numerice similare.

Sintaxă:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Iată câteva metode importante care pot fi utilizate pentru tipurile de numere:

toFixed() – va converti numărul într-un șir de caractere și va păstra zecimalele date metodei.

toString () – această metodă va converti numărul într-un șir de caractere.

valoarea() – această metodă va restitui valoarea primitivă a numărului.

la Precizie() – această metodă va formata numărul la o lungime specificată.

Exemplu: cu toate metodele numerice

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

Şir

Șir de caractere: doar valori de tip șir de caractere.

Sintaxă:

let str :string = "hello world";

Iată câteva metode importante care pot fi utilizate pe tipuri de șiruri de caractere:

  • împărţi() – această metodă va împărți șirul într-un array.
  • charAt() – această metodă va da caracterul la indexul dat.
  • Index de() – această metodă va indica poziția primei apariții a valorii care îi este dată.
  • înlocui() – această metodă acceptă 2 șiruri de caractere. Caută prima valoare din șir și, dacă este prezentă, o înlocuiește cu a doua, returnând un nou șir de caractere.
  • tunde() – această metodă va elimina spațiile albe de pe ambele părți ale șirului de caractere.
  • substr() – această metodă va oferi o parte a șirului de caractere, în funcție de poziția de început și de lungimea dată.
  • subcord() – această metodă va oferi o parte a șirului de caractere, în funcție de pozițiile de început și de sfârșit. Caracterul de la poziția finală este exclus.
  • laMajuscule() – va converti șirul de caractere în majuscule.
  • toLowerCase() – va converti șirul în minuscule.

Exemplu:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

boolean

Un boolean acceptă doar valorile logice adevărat și fals. Spre deosebire de valorile simple JavaÎn script, numerele 0 și 1 nu sunt acceptate, deoarece sunt de tip număr.

Sintaxă:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Orice

Sintaxă:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variabile declarate folosind Orice tipul poate conține un șir de caractere, un număr, o matrice, o valoare booleană sau void. TypeScript nu va genera nicio eroare la compilare, similară variabilelor din JavaScript. Folosește tipul „any” doar atunci când nu ești sigur de tipul valorii care va fi asociată cu variabila respectivă, deoarece dezactivează orice verificare a valorii respective.

Gol

Tipul void este folosit mai ales ca tip de retur al unei funcții care nu returnează nimic.

Sintaxă:

function testfunc():void{
 //code here
}

TypeScript Mulțime

An Mulțime in TypeScript este un tip de date în care puteți stoca mai multe valori. Să învățăm cum să declarăm și să atribuim valori pentru operațiunile cu matrice în TypeScript.

Întrucât TypeScript este un limbaj puternic tipizat, trebuie să specificați tipul de date al valorilor dintr-un array. În caz contrar, acesta va fi tratat ca fiind de tip „orice”.

Declarați și inițializați o matrice

Sintaxă:

let nameofthearray : Array<typehere>

Exemplu

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Diferite moduri de a accesa elemente dintr-un Array

Pentru a obține elementele dintr-un tablou, valorile încep de la indicele 0 până la lungimea tabloului minus unu.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

De asemenea, puteți obține elementele dintr-un array folosind un TypeScript pentru buclă, așa cum se arată mai jos.

Utilizarea TypeScript pentru bucla

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

ieșire:

2016
2017
2018
2019

⚠️ Atenție: Condiția buclei trebuie să fie i < years.length. Scris i <= years.length rulează o iterație suplimentară și afișează undefined, deoarece ultimul index valid este întotdeauna lungimea minus unu.

Folosind bucla for-in

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

ieșire:

2016
2017
2018
2019

Folosind bucla for-of

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

ieșire:

2016
2017
2018
2019

Folosirea buclei forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

ieșire:

2016
2017
2018
2019

TypeScript Metode de matrice

TypeScript Obiectul Array are numeroase proprietăți și metode care ajută dezvoltatorii să gestioneze ușor și eficient tablourile. Puteți obține valoarea unei proprietăți specificând arrayname.property, iar rezultatul unei metode specificând arrayname.method().

Membru Scop Returnări
lungime Numărul de elemente din matrice număr
verso() Reverseordinea elementelor la locul lor Aceeași matrice
fel() Sortează obiectele la locul lor Aceeași matrice
pop () Elimină ultimul element Elementul eliminat
schimb() Elimină primul element Elementul eliminat
Apăsați() Adaugă o valoare ca ultim element Noua lungime
concat() Unește două matrice într-una singură O nouă matrice

Exemplu pentru proprietatea lungimii

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Exemplu pentru metoda inversă

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Exemplu pentru metoda de sortare

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Exemplu pentru metoda pop

console.log(months.pop()); // Dec

Exemplu pentru metoda schimbului

console.log(months.shift()); // Jan

Exemplu pentru metoda push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

Exemplu pentru metoda concat

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

Clasa în TypeScript

TypeScript este un superset de JavaScript, deci tot ce este posibil în JavaScriptul este, de asemenea, posibil în TypeScriptClasa este o funcționalitate adăugată începând cu ES6. Anterior în JavaFuncționalitate asemănătoare scriptului, de tip clasă, a fost obținută folosind o funcție cu metode prototip pentru reutilizarea codului. Folosind clasa, codul dvs. se poate apropia de limbaje precum Java, C# și Python, unde codul este ușor de reutilizat.

Definirea unei clase în TypeScript

Iată sintaxa de bază a clasei în TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Exemplu: Un exemplu de lucru pe Class

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

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

    getAge() : number {
        return this.age;
    }
}

În exemplul de mai sus, aveți o clasă numită Students. Aceasta are proprietățile age, name și roll_no.

Constructor în a TypeScript Clasă

Clasa Students definită mai sus are un constructor așa cum se arată mai jos:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Metoda constructorului are parametrii age, name și roll_no. Constructorul se ocupă de inițializarea proprietăților atunci când clasa este instanțiată. Proprietățile sunt accesate folosind acest cuvânt cheie, de exemplu this.age pentru a accesa age și this.roll_no pentru a accesa roll_no. Puteți avea și un constructor implicit, așa cum se arată mai jos:

constructor () {}

Metode în interiorul a TypeScript Clasă

În clasa Students există metode definite, de exemplu getRollNo(), getName() și getAge(), care returnează valorile proprietăților roll_no, name și age.

getRollNo(): number {
        return this.roll_no;
}

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

getAge() : number {
	return this.age;
}

Crearea unei instanțe a unei clase în TypeScript

In TypeScript, pentru a crea o instanță a unei clase se folosește operatorul new. Când se creează o instanță cu new, se obține un obiect care poate accesa proprietățile și metodele clasei, așa cum se arată mai jos:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

Compilarea unui TypeScript Clasa la JavaScenariu

Puteți utiliza comanda tsc, așa cum se arată mai jos, pentru a compila la JavaScenariul.

Command: tsc  Students.ts

Ieșirea fișierului JavaCodul scriptului la compilare este prezentat mai jos:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaScript, clasa este convertită într-o funcție autoinvocată.

Moștenirea de clasă

Clasele pot fi moștenite folosind extinde cuvânt cheie în TypeScript.

Sintaxa moștenirii clasei:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

clasa B va putea împărtăși clasa a metode si proprietati.

Iată un exemplu funcțional de clasă care folosește moștenirea:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

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

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

Aveți două clase, Person și Student. Student extinde Person, iar obiectul creat din Student poate accesa propriile metode și proprietăți, precum și pe cele ale clasei pe care o extinde.

Acum haideți să adăugăm câteva modificări la clasa de mai sus.

Exemplu:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

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

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

Modificarea față de exemplul anterior este un constructor definit în clasa Student. Constructorul primește aceiași parametri ca și clasa de bază, plus orice parametri suplimentari proprii.

In TypeScript Trebuie să apelați super cu toți parametrii clasei de bază. Aceasta trebuie să fie prima instrucțiune din interiorul constructorului, deoarece super execută constructorul clasei extinse. Orice proprietate declarată de clasa derivată, cum ar fi tmarks, trebuie apoi atribuită explicit, altfel getMarks ar returna undefined.

Accesați modificatorii în TypeScript

TypeScript acceptă modificatorii de acces public, privat și protejat pentru metodele și proprietățile dumneavoastră. În mod implicit, dacă nu este dat niciun modificator de acces, metoda sau proprietatea este considerată publică și este ușor accesibilă din obiectul clasei.

În cazul modificatorilor de acces privat, membrii nu sunt disponibili din obiectul clasei și sunt destinați a fi utilizați doar în interiorul clasei. Aceștia nu sunt disponibili pentru o clasă moștenită.

În cazul modificatorilor de acces protejat, membrii sunt destinați a fi utilizați în interiorul clasei și în clasa moștenită și nu sunt accesibili din obiectul clasei.

Exemplu:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

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

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

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

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena
Modificatorul Aceeasi clasa Clasa derivata Obiectul clasei
public Da Da Da
protejat Da Da Nu
privat Da Nu Nu

Interfață în TypeScript

Una dintre caracteristicile de bază ale TypeScript sunt interfețe. O interfață este un set de reguli care trebuie implementate de entitatea care o utilizează. Entitatea poate fi o clasă, o funcție sau o variabilă. O interfață poate fi alcătuită din proprietăți și metode. Puteți marca o proprietate sau o metodă ca opțională folosind sintaxa „?”. Interfața adaugă o verificare puternică de tip pentru orice funcție, variabilă sau clasă care o implementează.

Sintaxa unei interfețe în TypeScript

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

Ați definit o interfață numită Dimension care are proprietățile width și height, ambele de tip șir de caractere.

Acum, această interfață poate fi implementată printr-o variabilă, o funcție sau o clasă. Iată un exemplu de variabilă care implementează interfața Dimension.

Exemplu:

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

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

Semnătura interfeței Dimension are lățime și înălțime, ambele fiind obligatorii. Dacă o proprietate este omisă sau un tip este modificat, va apărea o eroare la compilare în timpul compilării codului. JavaScenariul.

Codul de mai sus, atunci când este compilat în JavaScriptul arată astfel:

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

Să vedem acum cum să folosim o interfață cu o funcție.

Utilizarea unei interfețe pe o funcție ca tip de returnare

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

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

În exemplul de mai sus, interfața Dimension este utilizată ca tip de retur al funcției getDimension(). Valoarea returnată trebuie să corespundă proprietăților și tipurilor declarate în interfață.

Compilatul JavaCodul scriptului va fi următorul:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

În timpul compilării, dacă tipul returnat nu corespunde interfeței, va genera o eroare.

Interfața ca parametru de funcție

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

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

În exemplul de mai sus, ați folosit interfața Dimension ca parametru pentru funcția getDimension(). Când apelați funcția, parametrul transmis acesteia trebuie să corespundă regulilor definite de interfață.

Compilatul JavaCodul scriptului va fi următorul:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Clasă care implementează o interfață

Pentru a utiliza o interfață cu o clasă, trebuie să utilizați cuvântul cheie ustensile.

Sintaxa pentru o clasă care implementează o interfață:

class NameofClass implements InterfaceName {
}

Următorul exemplu prezintă o interfață care funcționează cu o clasă.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

În exemplul de mai sus, ați definit interfața Dimension cu proprietățile width și height, ambele de tip șir de caractere, și o metodă numită getWidth() care returnează un șir de caractere.

Compilatul JavaCodul scriptului va fi următorul:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Functioneaza in TypeScript

Funcțiile sunt seturi de instrucțiuni executate pentru a îndeplini o sarcină. În JavaScript, cea mai mare parte a codului este scrisă sub formă de funcții și acestea joacă un rol major. În TypeScript aveți clase, interfețe, module și spații de nume disponibile, dar funcțiile joacă în continuare un rol important. Diferența dintre o funcție în JavaScript și TypeScript reprezintă parametrul și tipurile de returnare disponibile cu un TypeScript Funcția.

JavaFuncția de script:

function add (a1, b1) {
   return a1+b1;
}

TypeScript funcţie:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

În funcția de mai sus, numele funcției este add, parametrii sunt a1 și b1, ambele fiind de tip număr, iar tipul returnat este, de asemenea, un număr. Dacă transmiteți un șir de caractere funcției, aceasta va genera o eroare la compilare în timpul compilării către JavaScenariul.

Efectuarea unui apel către funcție: add

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Parametrii a1 și b1 sunt obligatorii și vor cauza o eroare dacă nu sunt furnizate. Tipurile de parametri și tipul de returnare sunt la fel de importante și nu se pot modifica odată definite.

Parametri opționali pentru o funcție

In JavaScript, toți parametrii funcțiilor sunt opționali și sunt considerați nedefiniți dacă nu sunt transmiși. Același lucru nu este valabil și în TypeScriptDupă ce definiți parametrii, trebuie să îi furnizați. Dacă doriți ca un parametru să fie opțional, adăugați un semn de întrebare după numele parametrului, așa cum se arată mai jos:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

Rețineți că parametrii opționali trebuie definiți ultimii. Nu puteți avea primul parametru opțional și al doilea obligatoriu, deoarece compilatorul nu ar ști ce valoare a fost furnizată.

Atribuiți valori implicite la Params

Puteți atribui valori implicite parametrilor, așa cum se arată mai jos:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Similar parametrilor opționali, parametrii inițializați implicit trebuie, de asemenea, păstrați la sfârșitul listei de parametri.

Parametrii de odihnă

Ai văzut cum TypeScript gestionează parametrii obligatorii, parametrii opționali și parametrii cu valori implicite. Acum vom analiza parametrii de repaus. Parametrii de repaus sunt un grup de parametri opționali definiți împreună, folosind trei puncte (…) urmat de numele parametrului, care este un array.

Sintaxă pentru parametrii Rest:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

După cum se arată mai sus, parametrul rest este un tablou prefixat de trei puncte. Tabloul va conține toate argumentele rămase transmise funcției.

Exemplu:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

Funcții săgeți

O funcție săgeată este una dintre caracteristicile importante lansate în ES6 și este disponibilă în TypeScript de asemenea. Sintaxa are o săgeată groasă, de unde provine și numele.

Sintaxă a funcției săgeată:

var nameoffunction = (params) => {
 // code here
}

La ce folosește o funcție săgeată?

Să luăm un exemplu pentru a înțelege cazul de utilizare al unei funcții săgeată.

Exemplu:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Ați creat o funcție cu o proprietate scor inițializată la 0 și o metodă getScore care utilizează intern setTimeout și, după o secundă, înregistrează this.score. Valoarea înregistrată este nedefinită, chiar dacă this.score este definit și inițializat. Problema constă în acest Funcția din interiorul setTimeout are propriul cuvânt cheie `this`, iar din moment ce `score` nu este definit pe aceasta, rezultatul este nedefinit.

Același lucru poate fi gestionat folosind o funcție săgeată, așa cum se arată mai jos:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

O funcție săgeată nu are propria sa acestși, în schimb, îl partajează pe cel din domeniul său de aplicare părinte, astfel încât variabilele declarate în afara domeniului de aplicare sunt accesibile cu ajutorul acestui paragraf în interiorul unei funcții săgeată. Acestea sunt utile datorită sintaxei mai scurte, precum și pentru apeluri inverse, gestionarea evenimentelor și funcții de temporizare.

TypeScript Enumere

A TypeScript enum este un obiect care conține o colecție de valori corelate stocate împreună. JavaScriptul nu acceptă enumări nativ. Majoritatea limbajelor de programare, cum ar fi Java, C și C++ enumări de suport și TypeScript le face și pe acestea disponibile. Enumerațiile sunt definite folosind cuvântul cheie enum.

Cum se declară o Enum?

Sintaxă:

enum NameofEnum {
   value1,
   value2,
    ..
}

Exemplu: Enum

enum Directions {
    North,
    South,
    East,
    West
}

În exemplul de mai sus, ați definit o enumerare numită Direcții cu valorile Nord, Sud, Est și Vest. Valorile sunt numerotate de la 0 pentru prima intrare și cresc cu 1 pentru fiecare intrare ulterioară.

Declarați o enumerare cu o valoare numerică

În mod implicit, dacă unui membru al enumerării nu i se atribuie o valoare, acesta primește un număr începând de la 0. Următorul exemplu prezintă o enumerare cu valori numerice explicite.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

De asemenea, puteți atribui o valoare inițială, iar următorii membri primesc valori incrementate. De exemplu:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Acum, Nordul începe la 5, deci Sudul este 6, Estul este 7 și Vestul este 8.

De asemenea, puteți atribui valori la alegere în locul valorilor implicite. De exemplu:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Cum se accesează o Enum?

Următorul exemplu arată cum se utilizează o enumerare în codul dumneavoastră:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

Compilatul JavaScenariul este următorul:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Întrucât JavaScriptul nu acceptă enum-uri, compilatorul convertește enum-ul într-o funcție auto-invocată, așa cum se arată mai sus. Atribuirea dublă este cea care creează maparea inversă.ping de la număr înapoi la nume.

Declarați o enumerare cu o valoare de tip șir de caractere

Puteți atribui valori de tip șir de caractere la alegere, așa cum se arată în exemplul de mai jos.

Exemplu:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

Compilatul JavaScenariul este următorul:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

⚠️ Atenție: Enumerațiile de șiruri de caractere nu au o hartă inversăpingComparați cele două ieșiri compilate de mai sus: enumerarea numerică stochează ambele direcții, în timp ce enumerarea de tip șir de caractere stochează doar numele până la valoarea. De aceea Directions[0] returnează nedefinit pentru o enumerare de tip șir de caractere.

În ce sunt modulele TypeScript?

Fișiere create în TypeScript au acces global, ceea ce înseamnă că variabilele declarate într-un fișier pot fi accesate într-un alt fișier. Această natură globală poate cauza conflicte de cod și probleme de execuție. Funcționalitatea modulului de export și import poate fi utilizată pentru a evita conflictele globale între variabile și funcții. Această caracteristică a apărut în JavaScript cu versiunea ES6 și este, de asemenea, acceptat în TypeScript.

De ce aveți nevoie de module în TypeScript?

Următorul exemplu prezintă problema fără module.

Exemplu test1.ts

let age : number = 25;

Ați definit o vârstă variabilă a numărului de tip în test1.ts.

Exemplu test2.ts

În test2.ts puteți accesa variabila vârstă definit în test1.ts și modificați-l, așa cum se arată mai jos:

age = 30; // changed from 25 to 30.
let _new_age = age;

Acest lucru poate crea o mulțime de probleme, deoarece variabilele sunt disponibile global și pot fi modificate de oriunde.

cu module, codul scris rămâne local în fișier și nu poate fi accesat în afara acestuia. Pentru a partaja orice element dintr-un fișier, acesta trebuie exportat folosind cuvântul cheie export. Export se folosește atunci când se dorește ca o variabilă, o clasă, o funcție sau o interfață să fie utilizată într-un alt fișier. Import se utilizează atunci când doriți să accesați un element exportat. Această acțiune păstrează codul intact în fișier și, chiar dacă definiți aceleași nume de variabile, acestea nu sunt confundate.

Folosind Export și Import

Există multe modalități de a exporta și importa. Vom discuta sintaxa cea mai frecvent utilizată.

Sintaxa pentru import și export 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

Iată un exemplu de lucru folosind export și import.

test1.ts

export let age: number = 25;

Cuvântul cheie export este utilizat pentru a partaja variabila de vârstă cu un alt fișier.

test2.ts

import { age } from "./test1"
let new_age :number = age;

Cuvântul cheie import este utilizat pentru a accesa vârstă variabilă și trebuie să specificați locația fișierului așa cum se arată mai sus.

Sintaxa pentru import și export 2:

Există o altă modalitate de a exporta și importa, iar sintaxa este următoarea:

export = classname;

import classname = require("file path of modulename")

Când utilizați export = Pentru a exporta modulul, importul trebuie să utilizeze comanda require(„calea fișierului cu numele modulului”).

Iată un exemplu practic care ilustrează acest caz.

Client.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

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

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Încărcător de module

Modulele nu pot funcționa singure, așa că aveți nevoie de un încărcător de module pentru a localiza dependențele de import, așa cum se vede în TypeScript exemplele de mai sus. Încărcătoarele de module disponibile sunt CommonJS pentru Nodejs și Require.js pentru a rula în browser.

Pentru a compila cod folosind formatul modulului CommonJS, utilizați următoarea comandă:

tsc --module commonjs testCustomer.ts

Pentru a compila cod folosind formatul modulului Requirejs, utilizați următoarea comandă:

tsc --module amd testCustomer.ts

Fișierele dependente vor fi convertite în fișiere js cu comanda de mai sus.

Exemplu testCustomer.ts către testCustomer.js folosind Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Exemplu Customer.ts către Customer.js folosind Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Pentru a testa folosind require.js, trebuie să creați un fișier numit main.js care face referire la dependențe, așa cum se arată.

Iată structura folderului:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

Încărcător de module

Spații de nume în TypeScript

Un spațiu de nume conține o colecție de clase, interfețe, variabile și funcții într-un singur fișier.

Sintaxa spațiului de nume

namespace name{

export class {
}

export interface {
}

export const constname;

}

Codul aferent este disponibil sub un singur spațiu de nume.

Exemplu de lucru cu spațiul de nume: testnamespace.ts

namespace StudentSetup {

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

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

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

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

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

Numele spațiului de nume este Configurare studentși ați adăugat o interfață StudDetails, o funcție addSpace și o clasă numită Student.

Accesarea unui spațiu de nume

Mai jos este codul în care utilizați spațiul de nume Configurare student.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Clasa, interfața sau funcția disponibilă într-un spațiu de nume trebuie să fie referită folosind numele spațiului de nume, de exemplu StudentSetup.addSpace pentru a accesa funcția și StudentSetup.Student pentru a accesa clasa.

Puteți compila ambele fișiere într-un singur fișier js, așa cum se arată mai jos:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Verificați ieșirea din promptul de comandă folosind comanda de mai jos:

node namespace.js

ieșire:

The name is :H a r r y

Declarații de mediu în TypeScript

TypeScript vă permite să utilizați terți JavaFișiere script care utilizează declarații ambientale. Avantajul acestei funcții este că nu trebuie să rescrieți biblioteca și totuși puteți utiliza toate funcțiile acesteia cu verificarea tipului. TypeScript.

Sintaxa ambientală

Pentru a declara un modul ambiental:

declare module moduleName {
   //code here
}

Fișierul ambiental trebuie salvat ca:

filename.d.ts

Pentru a utiliza fișierul nume de fișier.d.ts În fișierul .ts trebuie să îl referențiezi astfel:

/// <reference path="filename.d.ts"/>

Declarația de tip ambiental în TypeScript se referă la biblioteca terță parte și redeclară funcțiile necesare cu propriile tipuri. De exemplu, luați în considerare mica JavaBiblioteca de scripturi este prezentată mai jos.

Terță parte JavaFișier script: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Aveți un obiect numit StringChecks care are funcțiile isString, convertToUpperCase, convertToLowerCase și convertToStringBold.

Crearea unui modul ambiental în TypeScript

Acum vom crea un modul ambiental care face referire la JavaFuncțiile scriptului de mai sus și adaugă verificări de tip după cum este necesar.

Nume fișier: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Definiți un modul numit TestString și exportați interfața StringsFunc. Fiecare semnătură specifică ce acceptă și ce returnează funcția:

  • isString(str: șir): boolean – primește un șir de caractere și returnează o valoare booleană. Transmiterea unui număr sau a oricărui alt tip produce o eroare la compilare.
  • convertToUpperCase(str: șir): șir – preia un șir de caractere și returnează un șir de caractere.
  • convertToLowerCase(str: șir): șir – preia un șir de caractere și returnează un șir de caractere.
  • convertToStringBold(str: șir): șir – preia un șir de caractere și returnează un șir de caractere.

Deoarece JavaFișierul script expune numele obiectului StringChecks, în final facem referire la același nume în fișierul .d.ts:

declare var StringChecks: TestString.StringsFunc;

Utilizarea unui modul Ambient în TypeScript

Iată fișierul test.ts care folosește fișierul ambiental tstring.d.ts.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Compilează cu tsc test.ts pentru a produce test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Acum puteți utiliza test.js într-un fișier HTML împreună cu fișierul bibliotecii testString.js.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

ieșire:

true
HELLO WORLD
hello
<b>Hello World</b>

💡 Sfat: Pentru bibliotecile populare, rareori este nevoie să scrieți singur un fișier .d.ts. Instalați în schimb tipurile întreținute de comunitate, de exemplu npm install --save-dev @types/lodash, iar compilatorul le preia automat.

Pentru a continua, comparați direct cele două limbi în TypeScript vs JavaScenariu, revedeți JavaMetode de tip matrice de script pentru echivalentele netipizate utilizate aici și studiați bucle în JavaScenariu și intern si extern JavaScenariu pentru elementele fundamentale ale browserului pe care se bazează rezultatul compilat.

Întrebări frecvente

Nu. Un browser execută JavaDoar script, deci fișierul .ts trebuie compilat mai întâi cu tsc sau un program de compilare. Adnotările de tip sunt șterse în timpul acestui pas și nu au costuri de execuție.

Da. Activați allowJs în tsconfig.json și redenumiți fișierele pe rând. Deoarece fiecare JavaFișierul script este deja valid TypeScript, proiectul continuă să se compileze pe parcursul migrării.

O interfață poate fi redeschisă și extinsă și este alegerea obișnuită pentru formele obiectelor. Un alias de tip acoperă și uniuni, tupluri și primitive, pe care interfețele nu le pot exprima.

Folosește module cu export și import. Spațiile de nume sunt anterioare modulelor ES și rămân utile în principal pentru fișierele de declarații și bazele de cod mai vechi bazate pe scripturi.

Da, măsurabil. Compilatorul respinge imediat proprietățile halucinate și tipurile de argumente greșite, astfel încât un fragment generat fie verifică tipul, fie raportează exact unde este greșit.

Integrările editorului introduc tipurile și fișierele .d.ts în contextul modelului. Prin urmare, adnotările mai bogate produc completări mai precise decât codul cu tipizare liberă.

Rezumați această postare cu: