TypeScript Vodič: Što je sučelje, nabrajanje, niz

⚡ Pametni sažetak

TypeScript je snažno tipizirani nadskup od JavaSkripta koja se kompajlira u običan format JavaSkriptira i dodaje klase, sučelja, nabrajanja, module i imenske prostore. Ovaj članak pokriva instalaciju, varijable, tipove, nizove, klase, modifikatore pristupa, sučelja, funkcije, nabrajanja, module i ambijentalne deklaracije.

  • 🧬 Jezični odnos: Svaki valjani JavaSkriptni program je valjan TypeScript, a kompajler emitira običan JavaSkripta za bilo koju ciljnu verziju.
  • 🔒 Statički Typing: Varijabla zadržava tip zadan prilikom deklaracije, pa se neusklađenost prijavljuje tijekom kompajliranja, a ne tijekom izvođenja.
  • 🧱 Orijentacija objekta: Klase, nasljeđivanje te modifikatori public, private i protected donose poznatu strukturu kodu preglednika.
  • 📐 sučelja: Sučelje definira prevarutract svojstava i metoda koje varijabla, funkcija ili klasa mora zadovoljiti.
  • 🔢 Nabrajanja: Imenovani skupovi konstanti kompajliraju se u samopozivane funkcije, budući da JavaSkripta nema izvorni tip nabrajanja.
  • ???? moduli: Izvoz i uvoz drže deklaracije lokalnim za datoteku i sprječavaju globalne kolizije imena.
  • 🔌 Ambijentalne izjave: .d.ts datoteka opisuje treću stranu JavaBiblioteka skripti tako da se provjera tipova primjenjuje bez prepisivanja.

TypeScript Tutorijal

Što je TypeScript?

TypeScript je nadskup od JavaSkripta. TypeScript je objektno orijentirani programski jezik koji podržava klase, sučelja i još mnogo toga. To je jezik otvorenog koda koji je razvio Microsoft koji statički kompajlira kod na JavaSkripta. Može se lako pokrenuti u pregledniku ili u Nodejsu.

Sve najnovije značajke objavljene za ECMAScript podržane su u TypeScript, i osim toga TypeScript ima vlastite objektno orijentirane značajke kao što su sučelja, ambijentalne deklaracije i nasljeđivanje klasa, koje pomažu u razvojuping velika aplikacija koju bi inače bilo teško ugraditi JavaScript.

Odnos je jednosmjeran. Svaki valjani JavaDatoteka skripte je već valjana TypeScript, ali obrnuto ne vrijedi, jer anotacije tipova postoje samo u TypeScript i brišu se tijekom kompilacije.

Zašto koristiti TypeScript?

Evo važnih prednosti korištenja TypeScript:

  • Veliki i složeni projekti u JavaSkripte je teško kodirati i održavati.
  • TypeScript puno pomaže s organizacijom koda i uklanja većinu grešaka tijekom kompilacije, a ne za vrijeme izvođenja.
  • TypeScript podržava JS biblioteke i API dokumentaciju.
  • To je opcionalno tipizirani skriptni jezik, tako da se tipovi mogu usvajati postupno.
  • TypeScript kod se može pretvoriti u običan JavaSkriptni kod za bilo koju ciljnu stranicu preglednika.
  • Pruža bolje strukturiranje koda i tehnike objektno orijentiranog programiranja.
  • Omogućuje bolju podršku alatima za vrijeme razvoja, uključujući automatsko dovršavanje i sigurno refaktoriranje.
  • Može proširiti jezik izvan standarda, s značajkama kao što su dekorateri.

Najveća praktična dobit je podrška za editore. Budući da kompajler zna oblik svake vrijednosti, editor može preimenovati svojstvo u cijelom projektu i prijaviti svako mjesto koje više ne odgovara.

TypeScript Povijest

Pogledajmo važne znamenitosti iz povijesti TypeScript:

  • Nakon dvije godine internog razvoja na Microsoft, TypeScript Verzija 0.9 je objavljena 2013. godine.
  • TypeScript Verzija 1.0, s dodatnom podrškom za generičke klase, objavljena je u verziji Build 2014.
  • U srpnju 2014. novi TypeScript stigao je kompajler koji je bio pet puta brži od prethodne verzije.
  • U srpnju 2015. dodana je podrška za ES6 module, ključnu riječ imenskog prostora, for…of i dekoratere.
  • U studenom 2016. dodani su mapirani tipovi, tipovi ključeva i pretraživanja te ostatak i širenje objekata.
  • Dana 27. ožujka 2018. dodani su uvjetni tipovi i poboljšani keyof s tipovima presjeka.
  • TypeScript Verzija 5.0, objavljena u ožujku 2023., modernizirala je dekoratere i smanjila veličinu paketa.
  • TypeScript Verzija 6.0 stigla je u ožujku 2026. kao konačno izdanje izgrađeno na JavaKodna baza skripte.
  • TypeScript 7.0 prebacuje kompajler na izvornu Go implementaciju, koja Microsoft izvještava da je otprilike deset puta brži od 6.0.

Tko koristi TypeScript?

TypeScript više nije nišni izbor. Podupire nekoliko najčešće korištenih front-end i back-end alata, a donji popis pokazuje gdje će ga početnik najvjerojatnije susresti.

  • Kutni: Angular okvir je napisan u TypeScript, a očekuje se da će u njemu biti napisan i kod aplikacije.
  • React i Vue projekti: Oba ekosustava šalju službene podatke TypeScript predlošci, a većina modernih početnika to omogućuje prema zadanim postavkama.
  • Node.js pozadinski dijelovi: Serverski okviri poput NestJS-a izgrađeni su oko TypeScript razredi i dekorateri.
  • Alati urednika: Visual Studio Code je sam po sebi velik TypeScript kodnu bazu, zbog čega je njegova jezična podrška tako potpuna.
  • Prednji dijelovi za velika poduzeća: Timovi koji rade s mnogo suradnika usvajaju ga kako bi uhvatili pogreške u integraciji prije implementacije.

Kako preuzeti i instalirati TypeScript

Ovdje je korak po korak proces preuzimanja i instaliranja TypeScript:

Korak 1) Preuzmite i instalirajte Nodejs

Idite na službenu stranicu Nodejsa, https://nodejs.org/en/download/i preuzmite i instalirajte Nodejs za svoj operativni sustav. Detaljne upute dostupne su u vodiču na kako preuzeti i instalirati Node.js.

Korak 2) Provjerite Nodejs i npm verziju

Da biste provjerili jesu li Nodejs i npm instalirani, provjerite verziju u naredbenom retku.

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

D:\typeproject>npm --version
10.9.2

Bilo koje trenutno izdanje Node LTS-a radi. TypeScript sama po sebi zahtijeva samo podržanu verziju Nodea za pokretanje kompajlera.

Korak 3) TypeScript Montaža

Kreirajte direktorij projekta tipa project\ i pokrenite npm init, kao što je prikazano u naredbi ispod:

npm init

Korak 4) Pokrenite instalaciju

Ovim se stvara package.json, koji će pohraniti ovisnosti za naš projekt.

Nakon što završite, instalirajte TypeScript kako slijedi:

npm -g install typescript

Gornja naredba će se pobrinuti za instalaciju TypeScript. Dodavanje "-g" u npm install će se instalirati TypeScript globalno. Prednost korištenja opcije -g je u tome što ćete moći koristiti TypeScript tsk naredbu iz bilo kojeg direktorija, jer je instalirana globalno. U slučaju da ne želite instalirati TypeScript globalno, upotrijebite naredbu u nastavku:

npm install --save-dev typescript

Napravite mapu src\ u direktoriju vašeg projekta, a unutar nje stvorite TypeScript datoteku test.ts i napišite svoj kod.

Primjer: test.ts

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

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

Sastaviti TypeScript kod za Javascript

Za kompajliranje gornjeg koda upotrijebite sljedeću naredbu.

If TypeScript je globalno instaliran pomoću naredbe u nastavku:

tsc test.ts

If TypeScript je instaliran lokalno u vašem projektu, morate koristiti putanju od TypeScript iz node_modules, kao što je prikazano, ili ga pokrenite kroz npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Gornja naredba će kreirati datoteku test.js koja će sadržavati kod kompajliran u JavaSkripta.

Primjer: test.js

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

Izvršiti Javascript koristeći Nodejs

Sada ćemo izvršiti test.js u Nodejsu na sljedeći način:

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

Vrijednost proslijeđena console.logu prikazuje se kada se pokrene test.js.

Izvršiti JavaSkripta u pregledniku

Primjer:

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

Izvršiti Javascript koristeći Nodejs

Sastaviti TypeScript kod za Javascript koristeći EcmaScript verziju

TypeScript podržava sve objavljene značajke ECMAScripta, a programeri ih mogu koristiti tijekom kodiranja. No, nisu sve nove značajke podržane na starijim preglednicima, pa ćete možda morati kompajlirati u stariju verziju ECMAScripta. TypeScript pruža opcije kompajlera koje rade upravo to.

Primjer: test.ts

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

addnumbers(10, 20);

Za prevođenje u ES verziju po vašem izboru, možete koristiti opciju target ili t u svojoj naredbi na sljedeći način:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Prema zadanim postavkama, cilj je ES3 za klasični kompajler. U slučaju da ga želite promijeniti, možete upotrijebiti gornju naredbu.

Trenutno ćemo koristiti ES6 kao cilj:

tsc --target ES6  test.ts

test.ts u test.js

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

addnumbers(10, 20);

Kod ostaje kakav jest, jer je funkcija strelice koju ste koristili ES6 značajka i ostaje nepromijenjena kada se kompajlira u ES6.

Prema zadanim postavkama cilj je ES3, pa bez cilja dobivate test.js kao:

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

Dakle, ovdje se debela strelica mijenja u normalnu anonimnu funkciju.

💡 Savjet: Umjesto da svaki put prosljeđujete opcije u naredbenom retku, pokrenite tsc --init za generiranje datoteke tsconfig.json. Kompajler zatim čita postavke target, outDir i strict iz te datoteke za cijeli projekt.

Varijable u TypeScript

Varijable koriste se za pohranjivanje vrijednosti, a vrijednost može biti niz, broj, Booleov ili izraz. Kada je riječ o varijablama u TypeScript, slični su JavaScriptDakle, naučimo deklarirati i dodijeliti vrijednost varijablama u TypeScript.

Varijable se ne mogu koristiti u kodu bez definiranja. Za deklariranje varijable možete koristiti

je ključna riječ,

pustiti ključne riječi

const ključne riječi

Rad s varijablama u TypeScript je sličan JavaSkripta i korisnici koji su upoznati s JavaSkripta će to vrlo lako pronaći. U modernom kodu, pustiti i const su poželjniji od je, jer njihov blokovski opseg sprječava cijelu klasu grešaka.

Deklariranje varijabli pomoću var

Sintaksa:

var firstname = "Roy";

Pogledajmo nekoliko TypeScript primjeri za razumijevanje rada ključne riječi var i opsega varijabli deklariranih pomoću je ključne riječi.

Primjer 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

Primjer 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

Primjer 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

Deklariranje varijabli pomoću let

The TypeScript sintaksa za let je kao što je navedeno u nastavku:

Sintaksa:

let name = "Roy";

Rad od pustiti varijabla je gotovo ista kao je, ali s jednom važnom razlikom, koju pokazuje donji primjer.

Primjer:

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

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

Gore TypeScript primjer baca grešku, ali isti kod bi radio i s je ključna riječ. Varijable deklarirane pomoću pustiti dostupni su samo unutar bloka u kojem su deklarirani. U ovom primjeru, t postoji samo unutar if bloka, a ne u cijeloj funkciji.

Isto vrijedi i unutar bilo koje funkcije, for petlje, while petlje ili switch bloka. Varijabla let dostupna je samo unutar tog bloka, a pozivanje na nju izvana izbacuje grešku. To je glavna razlika između var i let.

Deklariranje varijabli pomoću const

Const znači konstantne varijable. Slične su varijablama let, s tom razlikom što se vrijednost, nakon što je dodijeljena, ne može mijenjati. Deklaracija konstante stoga mora biti inicijalizirana u istom retku.

Sintaksa:

const name = "Roy";

Primjer:

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

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

Stoga koristite const kad god znate da dodijeljena vrijednost neće biti ponovno dodijeljena. Imajte na umu da const sprječava ponovno dodjeljivanje povezivanja, a ne modifikaciju objekta na koji pokazuje.

Upisuje se TypeScript

TypeScript je jezik snažnog tipa, dok JavaSkripta nije. Varijabla čija je vrijednost definirana kao niz znakova može se bez problema promijeniti u broj u JavaSkripta. Isto se ne tolerira u TypeScript, u TypeScript, tip varijable je definiran na početku i tijekom izvršavanja mora zadržati taj tip. Svaka promjena dovodi do pogreške tijekom kompajliranja u JavaSkripta.

Sljedeće su osnovne vrste:

Tip prihvaća Primjer deklaracije
broj Cijeli brojevi, brojevi s pomičnim zarezom i razlomci neka je a: broj = 10;
niz Samo tekstualne vrijednosti neka s: niz = “pozdrav”;
boolean samo istina ili laž neka b: boolean = true;
Bilo koji Bilo koja vrijednost, bez provjere neka je x: bilo koji = 123;
poništiti Odsutnost povratne vrijednosti funkcija f(): void {}

Broj

Prihvaća samo cijele brojeve, brojeve s pomičnim zarezom, razlomke i slične numeričke vrijednosti.

Sintaksa:

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

Evo nekoliko važnih metoda koje se mogu koristiti na brojevnim tipovima:

toFixed() – pretvorit će broj u niz znakova i zadržati decimalna mjesta zadana metodi.

toString () – ova metoda će pretvoriti broj u niz znakova.

vrijednost() – ova metoda će vratiti primitivnu vrijednost broja.

toPrecision() – ova metoda formatira broj na određenu duljinu.

Primjer: sa svim brojnim metodama

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

Niz

Niz: samo nizovne vrijednosti.

Sintaksa:

let str :string = "hello world";

Evo nekoliko važnih metoda koje se mogu koristiti na tipovima stringova:

  • Split() – ova metoda će podijeliti niz u niz.
  • charAt() – ova metoda će vratiti znak na zadanom indeksu.
  • indeksOf() – ova metoda će dati poziciju prvog pojavljivanja zadane vrijednosti.
  • zamijeniti() – ova metoda prima 2 niza znakova. Traži prvu vrijednost u nizu i, ako je prisutna, zamjenjuje je drugom, vraćajući novi niz znakova.
  • podrezati() – ova metoda će ukloniti prazan prostor s obje strane niza.
  • substr() – ova metoda će vratiti dio niza, ovisno o početnoj poziciji i zadanoj duljini.
  • podniz() – ova metoda će vratiti dio niza, ovisno o početnoj i završnoj poziciji. Znak na završnoj poziciji je isključen.
  • toUpperCase() – pretvara niz u velika slova.
  • malim slovima() – pretvorit će niz u mala slova.

Primjer:

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"

Booleova

Boolean prihvaća samo logičke vrijednosti true i false. Za razliku od običnog JavaSkripta, brojevi 0 i 1 nisu prihvaćeni jer su tipa broj.

Sintaksa:

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

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

bilo koji

Sintaksa:

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

Varijable deklarirane pomoću Bilo koji tip može sadržavati niz znakova, broj, niz, logičku vrijednost ili prazninu. TypeScript neće izbaciti nikakvu grešku prilikom kompajliranja, što je slično varijablama u JavaSkripta. Koristite tip `any` samo kada niste sigurni koja će vrsta vrijednosti biti povezana s tom varijablom, jer isključuje svaku provjeru te vrijednosti.

Poništiti

Tip Void se uglavnom koristi kao povratni tip funkcije koja ne vraća ništa.

Sintaksa:

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

TypeScript Poredak

An Poredak in TypeScript je tip podataka u koji možete pohraniti više vrijednosti. Naučimo kako deklarirati i dodijeliti vrijednosti za operacije s nizovima u TypeScript.

Od TypeScript je jezik snažnog tipa, morate navesti tip podataka vrijednosti u polju. Inače će se tretirati kao tip any.

Deklarirajte i inicijalizirajte polje

Sintaksa:

let nameofthearray : Array<typehere>

Primjer

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

Različiti načini pristupa elementima iz polja

Da bi se dobili elementi iz niza, vrijednosti počinju od indeksa 0 do duljine niza minus jedan.

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

Elemente iz niza možete dobiti i pomoću TypeScript za petlja, kako je prikazano dolje.

Korištenje TypeScript za petlju

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

Izlaz:

2016
2017
2018
2019

⚠️ Upozorenje: Uvjet petlje mora biti i < years.lengthPisanje i <= years.length izvršava jednu dodatnu iteraciju i ispisuje undefined, jer je zadnji valjani indeks uvijek duljine minus jedan.

Korištenje for-in petlje

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

Izlaz:

2016
2017
2018
2019

Korištenje for-of petlje

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

Izlaz:

2016
2017
2018
2019

Korištenje petlje forEach

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

Izlaz:

2016
2017
2018
2019

TypeScript Metode polja

The TypeScript Objekt Array ima mnoga svojstva i metode koje pomažu programerima da lako i učinkovito rukuju nizovima. Vrijednost svojstva možete dobiti navođenjem arrayname.property, a izlaz metode navođenjem arrayname.method().

Član Svrha Povratak
dužina Broj elemenata u nizu broj
obrnuti () Reverseredoslijed stavki na mjestu Isti niz
vrsta() Sortira predmete na svoje mjesto Isti niz
pop () Uklanja posljednju stavku Uklonjena stavka
pomak() Uklanja prvu stavku Uklonjena stavka
gurnuti() Dodaje vrijednost kao posljednju stavku Nova duljina
concat() Spaja dva niza u jedan Novi niz

Primjer svojstva duljine

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

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

Primjer obrnute metode

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

Primjer metode sortiranja

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

Primjer pop metode

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

Primjer za metodu pomaka

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

Primjer za push metodu

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
});

Primjer za concat metodu

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]

Nastava TypeScript

TypeScript je nadskup od JavaSkripta, pa što god je moguće u JavaSkripta je također moguća u TypeScriptKlasa je značajka dodana od ES6 nadalje. Ranije u JavaSkriptna, klasna funkcionalnost postignuta je korištenjem funkcije s prototipnim metodama za ponovnu upotrebu koda. Korištenjem klase, vaš kod može se približiti jezicima kao što su Java, C# i Python, gdje se kod lako ponovno koristi.

Definiranje klase u TypeScript

Evo osnovne sintakse klase u TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Primjer: radni primjer na Classu

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;
    }
}

U gornjem primjeru imate klasu pod nazivom Studenti. Ima svojstva dob, ime i broj_uloge.

Konstruktor u a TypeScript Klasa

Klasa Students definirana gore ima konstruktor kao što je prikazano u nastavku:

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

Metoda konstruktora ima parametre age, name i roll_no. Konstruktor se brine za inicijalizaciju svojstava kada se instancira klasa. Svojstvima se pristupa pomoću to ključna riječ, na primjer this.age za pristup age i this.roll_no za pristup roll_no. Također možete imati zadani konstruktor, kao što je prikazano u nastavku:

constructor () {}

Metode unutar a TypeScript Klasa

U klasi Students definirane su metode, na primjer getRollNo(), getName() i getAge(), koje vraćaju vrijednosti svojstava roll_no, name i age.

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

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

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

Stvaranje instance klase u TypeScript

In TypeScript, za stvaranje instance klase koristite operator new. Kada stvorite instancu s operatorom new, dobivate objekt koji može pristupiti svojstvima i metodama klase, kao što je prikazano u nastavku:

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

Sastavljanje TypeScript Razred za JavaScript

Možete koristiti naredbu tsc kao što je prikazano dolje za kompajliranje u JavaSkripta.

Command: tsc  Students.ts

Izlaz JavaSkriptni kod prilikom kompilacije je prikazan u nastavku:

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 JavaSkripta, klasa se pretvara u samopozivanu funkciju.

Klasno nasljeđivanje

Klase se mogu naslijediti korištenjem proteže se ključna riječ u TypeScript.

Sintaksa nasljeđivanja klase:

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

}

razred B moći će dijeliti klasa A metode i svojstva.

Evo radnog primjera klase koja koristi nasljeđivanje:

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

Imate dvije klase, Person i Student. Student proširuje Person, a objekt stvoren iz Studenta može pristupiti vlastitim metodama i svojstvima kao i onima klase koju proširuje.

Sada dodajmo neke promjene gornjoj klasi.

Primjer:

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

Promjena u usporedbi s prethodnim primjerom je konstruktor definiran u klasi Student. Konstruktor uzima iste parametre kao i osnovna klasa, plus sve dodatne vlastite parametre.

In TypeScript Morate pozvati super sa svim parametrima osnovne klase. Ovo mora biti prva naredba unutar konstruktora, jer super izvršava konstruktor proširene klase. Bilo koje svojstvo deklarirano od strane izvedene klase, kao što su tmars, tada se mora eksplicitno dodijeliti, inače bi getMarks vratio nedefinirano.

Modifikatori pristupa u TypeScript

TypeScript podržava modifikatore pristupa public, private i protected na vašim metodama i svojstvima. Prema zadanim postavkama, ako nije naveden modifikator pristupa, metoda ili svojstvo smatra se javnim i lako mu se može pristupiti iz objekta klase.

U slučaju modifikatora privatnog pristupa, članovi nisu dostupni iz objekta klase i namijenjeni su za korištenje samo unutar klase. Nisu dostupni naslijeđenoj klasi.

U slučaju modifikatora zaštićenog pristupa, članovi su namijenjeni za korištenje unutar klase i naslijeđene klase te im se ne može pristupiti iz objekta klase.

Primjer:

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
Promijeniti Isti razred Izvedena klasa Objekt klase
javni Da Da Da
zaštićen Da Da Ne
privatni Da Ne Ne

Sučelje u TypeScript

Jedna od temeljnih značajki TypeScript je sučelja. Sučelje je skup pravila koja entitet koji ga koristi treba implementirati. Entitet može biti klasa, funkcija ili varijabla. Sučelje se može sastojati od svojstava i metoda. Svojstvo ili metodu možete označiti kao opcionalno pomoću sintakse "?". Sučelje dodaje strogu provjeru tipa za bilo koju funkciju, varijablu ili klasu koja ga implementira.

Sintaksa sučelja u TypeScript

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

Definirali ste sučelje pod nazivom Dimension koje ima svojstva širina i visina, oba tipa string.

Sada se ovo sučelje može implementirati varijablom, funkcijom ili klasom. Evo primjera varijable koja implementira sučelje Dimension.

Primjer:

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

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

Potpis sučelja Dimension ima širinu i visinu, i oba su obavezna. Ako se neko svojstvo propusti ili se promijeni tip, to će dati grešku prilikom kompajliranja koda u JavaSkripta.

Gornji kod, kada se kompilira u JavaSkripta, izgleda ovako:

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

Pogledajmo sada kako koristiti sučelje s funkcijom.

Korištenje sučelja na funkciji kao povratnog tipa

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

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

U gornjem primjeru, sučelje Dimension se koristi kao povratni tip funkcije getDimension(). Povratna vrijednost mora odgovarati svojstvima i tipovima deklariranim u sučelju.

Sastavljeno JavaSkriptni kod će biti sljedeći:

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

Tijekom kompilacije, ako se povratni tip ne podudara s interfejsom, izbacit će grešku.

Sučelje kao parametar funkcije

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"

U gornjem primjeru, koristili ste sučelje Dimension kao parametar funkcije getDimension(). Kada pozovete funkciju, parametar koji joj je proslijeđen mora odgovarati pravilima definiranim sučeljem.

Sastavljeno JavaSkriptni kod će biti sljedeći:

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

Klasa koja implementira sučelje

Za korištenje sučelja s klasom potrebno je koristiti ključnu riječ provodi.

Sintaksa za klasu koja implementira sučelje:

class NameofClass implements InterfaceName {
}

Sljedeći primjer prikazuje sučelje koje radi s klasom.

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;
    }
}

U gornjem primjeru definirali ste sučelje Dimension sa svojstvima width i height, oba tipa string, i metodom getWidth() koja vraća string.

Sastavljeno JavaSkriptni kod će biti sljedeći:

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

Funkcije u TypeScript

Funkcije su skupovi instrukcija koje se izvršavaju za izvršavanje zadatka. U JavaSkripta, većina koda je napisana u obliku funkcija i one igraju glavnu ulogu. U TypeScript Imate klase, sučelja, module i imenske prostore, ali funkcije i dalje igraju važnu ulogu. Razlika između funkcije u JavaSkripta i TypeScript jesu li tipovi parametara i povratnih vrijednosti dostupni s TypeScript funkcija.

JavaFunkcija skripte:

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

TypeScript funkcija:

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

U gornjoj funkciji, naziv funkcije je zbroj, parametri su a1 i b1, oba tipa broj, a povratni tip je također broj. Ako funkciji proslijedite niz znakova, izbacit će grešku prilikom kompajliranja u JavaSkripta.

Pozivanje funkcije: 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'

Parametri a1 i b1 su obavezni i uzrokovat će grešku ako se ne navedu. Tipovi parametara i tip povrata jednako su važni i ne mogu se mijenjati nakon što se definiraju.

Neobavezni parametri funkcije

In JavaSkripta, svi parametri funkcijama su opcionalni i smatraju se nedefiniranima ako se ne prosljeđuju. Isto ne vrijedi u TypeScriptNakon što definirate parametre, morate ih navesti. Ako želite da parametar bude opcionalan, dodajte upitnik nakon naziva parametra, kao što je prikazano u nastavku:

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

Imajte na umu da opcionalni parametri moraju biti definirani zadnji. Prvi parametar ne može biti opcionalan, a drugi obavezan, jer kompajler ne bi znao koja je vrijednost unesena.

Dodijelite zadane vrijednosti parametrima

Parametrima možete dodijeliti zadane vrijednosti kao što je prikazano u nastavku:

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

Slično kao i kod opcionalnih parametara, zadani inicijalizirani parametri također se moraju nalaziti na kraju popisa parametara.

Parametri mirovanja

Vidjeli ste kako TypeScript obrađuje obavezne parametre, opcionalne parametre i parametre zadane vrijednosti. Sada ćemo pogledati preostale parametre. Preostali parametri su skupina opcionalnih parametara definiranih zajedno, pomoću tri točkice (…) nakon čega slijedi naziv parametra, koji je niz.

Sintaksa za Rest parametre:

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

Kao što je gore prikazano, parametar rest je niz s tri točke ispred sebe. Niz će sadržavati sve preostale argumente proslijeđene funkciji.

Primjer:

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

Funkcije strelica

Funkcija strelice jedna je od važnih značajki objavljenih u ES6, a dostupna je u TypeScript također. Sintaksa ima debelu strelicu, odakle i potječe naziv.

Sintaksa funkcije strelice:

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

Čemu služi funkcija strelice?

Pogledajmo primjer kako bismo razumjeli slučaj upotrebe funkcije strelice.

Primjer:

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

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

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

Kreirali ste funkciju sa svojstvom score inicijaliziranim na 0 i metodom getScore koja interno koristi setTimeout i, nakon jedne sekunde, zapisuje this.score. Zabilježena vrijednost je nedefinirana iako je this.score definiran i inicijaliziran. Problem leži u to ključna riječ. Funkcija unutar setTimeout ima svoju vlastitu this, a budući da score nije definiran na njoj, rezultat je nedefiniran.

Isto se može riješiti pomoću funkcije strelice, kao što je prikazano u nastavku:

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

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

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

Funkcija strelice nema vlastitu to, a umjesto toga dijeli onu iz svog roditeljskog opsega, pa su varijable deklarirane izvana dostupne s this unutar funkcije strelice. Korisne su zbog kraće sintakse, kao i za povratne pozive, rukovatelje događajima i funkcije određivanja vremena.

TypeScript Enum

A TypeScript enum je objekt koji sadrži kolekciju povezanih vrijednosti pohranjenih zajedno. JavaSkripta izvorno ne podržava nabrajanja. Većina programskih jezika, kao što su Java, C i C++ podržavaju nabrajanja i TypeScript čini ih također dostupnima. Nabrajanja se definiraju pomoću ključne riječi enum.

Kako deklarirati Enum?

Sintaksa:

enum NameofEnum {
   value1,
   value2,
    ..
}

Primjer: Enum

enum Directions {
    North,
    South,
    East,
    West
}

U gornjem primjeru definirali ste nabrajanje pod nazivom Directions s vrijednostima North, South, East i West. Vrijednosti su numerirane od 0 za prvi unos i povećavaju se za 1 za svaki sljedeći unos.

Deklariraj Enum s numeričkom vrijednošću

Prema zadanim postavkama, ako članu nabrajanja nije dodijeljena vrijednost, uzima broj koji počinje od 0. Sljedeći primjer prikazuje nabrajanje s eksplicitnim numeričkim vrijednostima.

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

Također možete dodijeliti početnu vrijednost, a sljedeći članovi će dobiti povećane vrijednosti. Na primjer:

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

Sada sjever počinje s 5, pa je jug 6, istok 7, a zapad 8.

Također možete dodijeliti vrijednosti po vlastitom izboru umjesto zadanih vrijednosti. Na primjer:

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

Kako pristupiti Enumu?

Sljedeći primjer pokazuje kako koristiti enum u vašem kodu:

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

Sastavljeno JavaSkripta je sljedeća:

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]);

Od JavaSkripta ne podržava nabrajanja, kompajler pretvara nabrajanje u samopozvanu funkciju, kao što je prikazano gore. Dvostruko dodjeljivanje stvara obrnuto mapiranje.ping od broja natrag do imena.

Deklarirajte Enum s nizom vrijednosti

Možete dodijeliti niz vrijednosti po vašem izboru, kao što je prikazano u primjeru u nastavku.

Primjer:

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

Sastavljeno JavaSkripta je sljedeća:

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]);

⚠️ Upozorenje: Nabrajanje nizova nema obrnutu mapupingUsporedite dva kompajlirana izlaza iznad: numerički nabrojani oblik pohranjuje oba smjera, dok niz znakova pohranjuje samo naziv do vrijednosti. Zato Directions[0] vraća nedefinirano za nabrajanje nizova.

U čemu se nalaze moduli TypeScript?

Datoteke stvorene u TypeScript imaju globalni pristup, što znači da se varijablama deklariranim u jednoj datoteci može pristupiti u drugoj datoteci. Ova globalna priroda može uzrokovati sukobe koda i probleme tijekom izvođenja. Funkcionalnost modula za izvoz i uvoz može se koristiti za izbjegavanje sukoba globalnih varijabli i funkcija. Ova značajka stigla je u JavaSkripta s izdanjem ES6 i također je podržana u TypeScript.

Zašto su vam potrebni moduli TypeScript?

Sljedeći primjer prikazuje problem bez modula.

Primjer test1.ts

let age : number = 25;

Definirali ste varijablu age tipa broj u test1.ts.

Primjer test2.ts

U test2.ts možete pristupiti varijabli starost definirano u test1.ts i također ga modificirati, kao što je prikazano u nastavku:

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

To može stvoriti mnogo problema, jer su varijable globalno dostupne i mogu se mijenjati s bilo kojeg mjesta.

Kontakt moduli, napisani kod ostaje lokalan za datoteku i ne može mu se pristupiti izvan nje. Da biste dijelili bilo što iz datoteke, to se mora izvesti pomoću ključne riječi export. Izvoz koristi se kada želite da se varijabla, klasa, funkcija ili sučelje koristi u drugoj datoteci. uvoz koristi se kada želite pristupiti izvezenoj stavci. Time se kod unutar datoteke zadržava netaknut, pa čak i ako definirate iste nazive varijabli, oni se ne miješaju.

Korištenje izvoza i uvoza

Postoji mnogo načina za izvoz i uvoz. Raspravit ćemo o sintaksi koja se najčešće koristi.

Sintaksa za uvoz i izvoz 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"

Ovdje je radni primjer korištenja izvoza i uvoza.

test1.ts

export let age: number = 25;

Ključna riječ export koristi se za dijeljenje varijable age s drugom datotekom.

test2.ts

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

Ključna riječ import koristi se za pristup starost varijablu i trebate navesti lokaciju datoteke kao što je prikazano gore.

Sintaksa za uvoz i izvoz 2:

Postoji još jedan način izvoza i uvoza, a sintaksa je prikazana u nastavku:

export = classname;

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

Kad koristite izvoz = Za izvoz modula, uvoz mora koristiti require(“putanja datoteke nazivamodula”).

Evo radnog primjera koji pokazuje taj slučaj.

Kupac.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());

Učitavač modula

Moduli ne mogu raditi samostalno, stoga vam je potreban program za učitavanje modula kako biste pronašli ovisnosti uvoza, kao što je prikazano na TypeScript primjeri iznad. Dostupni učitavači modula su CommonJS za Nodejs i Require.js za pokretanje u pregledniku.

Za kompajliranje koda pomoću CommonJS modula formata koristite sljedeću naredbu:

tsc --module commonjs testCustomer.ts

Za kompajliranje koda pomoću Requirejs formata modula upotrijebite sljedeću naredbu:

tsc --module amd testCustomer.ts

Ovisne datoteke će se pretvoriti u js datoteke pomoću gornje naredbe.

Primjer testCustomer.ts za testCustomer.js korištenjem Requirejs-a

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

Primjer Customer.ts u Customer.js pomoću Requirejs-a

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;
});

Za testiranje pomoću require.js, potrebno je stvoriti datoteku pod nazivom main.js koja referencira ovisnosti kao što je prikazano.

Ovo je struktura mape:

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

glavni.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>

Učitavač modula

Imenski prostori u TypeScript

Imenski prostor sadrži kolekciju klasa, sučelja, varijabli i funkcija zajedno u jednoj datoteci.

Sintaksa prostora imena

namespace name{

export class {
}

export interface {
}

export const constname;

}

Povezani kod dostupan je pod jednim imenskim prostorom.

Radni primjer prostora imena: 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;
        }
    }
}

Naziv imenskog prostora je Postavke za studente, a dodali ste i sučelje StudDetails, funkciju addSpace i klasu pod nazivom Student.

Pristup imenskom prostoru

Slijedi kod gdje koristite imenski prostor Postavke za studente.

testStudentSetup.ts

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

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

Klasa, sučelje ili funkcija dostupni unutar imenskog prostora moraju se pozivati ​​pomoću imena imenskog prostora, na primjer StudentSetup.addSpace za pristup funkciji i StudentSetup.Student za pristup razredu.

Obje datoteke možete kompajlirati u jednu js datoteku kao što je prikazano dolje:

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

Provjerite izlaz u naredbenom retku pomoću naredbe u nastavku:

node namespace.js

Izlaz:

The name is :H a r r y

Ambijentalne deklaracije u TypeScript

TypeScript omogućuje vam korištenje treće strane JavaSkriptne datoteke koje koriste ambijentalne deklaracije. Prednost ove značajke je što ne morate prepisivati ​​biblioteku, a ipak možete koristiti sve njezine značajke s provjerom tipa. TypeScript.

Ambijentalna sintaksa

Za deklariranje ambijentalnog modula:

declare module moduleName {
   //code here
}

Ambijentalna datoteka mora biti spremljena kao:

filename.d.ts

Za korištenje datoteke naziv datoteke.d.ts u vašoj .ts datoteci morate je referencirati kao:

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

Deklaracija ambijentalnog tipa u TypeScript odnosi se na biblioteku treće strane i ponovno deklarira potrebne funkcije s njihovim vlastitim tipovima. Na primjer, razmotrimo mali JavaBiblioteka skripti prikazana je dolje.

Treća stranka JavaDatoteka skripte: 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();
    }
};

Imate objekt pod nazivom StringChecks koji ima funkcije isString, convertToUpperCase, convertToLowerCase i convertToStringBold.

Izrada ambijentalnog modula u TypeScript

Sada ćemo kreirati ambijentalni modul koji referencira JavaSkripta funkcionira iznad i dodaje provjere tipova po potrebi.

Naziv datoteke: 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;

Definirate modul pod nazivom TestString i izvozite sučelje StringsFunc. Svaki potpis navodi što funkcija prihvaća i vraća:

  • isString(str: niz): booleov – prima niz znakova i vraća logičku vrijednost. Prosljeđivanje broja ili bilo kojeg drugog tipa uzrokuje grešku pri kompajliranju.
  • pretvoritiUVelikaSlova(str: niz): niz – uzima niz znakova i vraća niz znakova.
  • pretvoritiUMalaSlova(str: niz): niz – uzima niz znakova i vraća niz znakova.
  • convertToStringBold(str: niz): niz – uzima niz znakova i vraća niz znakova.

Budući da JavaDatoteka skripte otkriva naziv objekta StringChecks, na kraju se pozivamo na isti naziv u .d.ts datoteci:

declare var StringChecks: TestString.StringsFunc;

Korištenje Ambient modula u TypeScript

Evo datoteke test.ts koja koristi ambijentalnu datoteku 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);

Kompajliraj s tsc test.ts za izradu test.js datoteke:

/// <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);

Sada možete koristiti test.js u HTML datoteci zajedno s bibliotečnom datotekom testString.js.

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

Izlaz:

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

💡 Savjet: Za popularne biblioteke rijetko morate sami pisati .d.ts datoteku. Umjesto toga, instalirajte tipove koje održava zajednica, na primjer npm install --save-dev @types/lodash, a kompajler ih automatski prepoznaje.

Za nastavak, usporedite dva jezika izravno u TypeScript vs JavaScript, ponovno posjetiti JavaMetode niza skripti za ovdje korištene netipizirane ekvivalente i proučite petlje u JavaScript i unutarnje i vanjsko JavaScript za osnove preglednika na koje se oslanja kompilirani izlaz.

Pitanja i odgovori

Ne. Preglednik izvršava JavaSamo skripta, tako da se .ts datoteka prvo mora kompajlirati s tsc-om ili bundlerom. Anotacije tipova se brišu tijekom tog koraka i nemaju troškove izvođenja.

Da. Omogućite allowJs u tsconfig.json i preimenujte datoteke jednu po jednu. Jer svaki JavaDatoteka skripte je već valjana TypeScript, projekt se nastavlja kompajlirati tijekom migracije.

Sučelje se može ponovno otvoriti i proširiti, te je uobičajeni izbor za oblike objekata. Alias ​​tipa također pokriva unije, n-torke i primitive, koje sučelja ne mogu izraziti.

Koristite module s izvozom i uvozom. Imenski prostori stariji su od ES modula i ostaju korisni uglavnom za deklaracijske datoteke i starije kodne baze temeljene na skriptama.

Da, mjerljivo. Kompajler odmah odbacuje halucinirana svojstva i pogrešne tipove argumenata, pa generirani isječak ili provjerava tip ili točno izvještava gdje je pogrešan.

Integracije urednika u kontekst modela unose okolne tipove i .d.ts datoteke. Bogatije anotacije stoga proizvode točnije dovršavanje nego što to čini labavo tipizirani kod.

Sažmite ovu objavu uz: