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.

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


