TypeScript Vodič: Što je, sučelje, enum, polje s primjerom

Što je TypeScript?

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

Sve najnovije značajke objavljene za ECMAScript podržane su u TypeScript i pored njega TypeScript ima vlastite objektno orijentirane značajke kao što su sučelja, ambijentalna deklaracija, nasljeđivanje klasa itd. što pomaže u razvoju velike aplikacije što bi inače bilo teško napraviti u JavaScript.

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 nodejs: https://nodejs.org/en/download/ te preuzmite i instalirajte nodejs prema vašem operativnom sustavu. Detaljne upute o tome kako preuzeti nodejs dostupne su ovdje: https://www.guru99.com/download-install-node-js.html

Korak 2) Provjerite Nodejs i npm verziju

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Dakle, imate instaliran nodejs v10 i npm 6.

Korak 3) TypeScript Montaža

Napravite svoj direktorij projekta typeproject/ i pokrenite npm init, kao što je prikazano u naredbi ispod:

npm init

Korak 4) Pokrenite instalaciju

Sada ćemo kreirati paket .json koji će pohraniti ovisnosti za naš projekt.

Nakon dovršetka instalacije 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 -g je ta što ćete moći koristiti TypeScript tsk naredbu iz bilo kojeg direktorija jer je instaliran globalno. U slučaju da ne želite instalirati TypeScript globalno koristite donju naredbu:

npm --save install typescript

Stvorite mapu src/ u direktoriju vašeg projekta i u mapi src/ folder create 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 koristite sljedeću naredbu:

If TypeScript je globalno instaliran upotrijebite donju naredbu:

tsc test.ts

If TypeScript je instaliran lokalno za vaš projekt morate koristiti stazu TypeScript iz node_modules kao što je prikazano:

node_modules/typescript/bin/tsc test.ts

Gornja naredba stvorit će datoteku test.js i kod će se kompajlirati u javascript.

Primjer: test.js

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

Izvršiti Javascript koristeći Nodejs

U ovom TypeScript vodiča, izvršit ćemo test.js u nodejs na sljedeći način:

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

Konsolirana vrijednost prikazuje se pri izvršavanju 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. Ali ne podržavaju sve nove značajke na starijim preglednicima, zbog čega morate prevesti javascript u stariju verziju Ecmascripta. TypeScript pruža opcije kompilatora koje to mogu učiniti.

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. U slučaju da ga želite promijeniti, možete upotrijebiti gornju naredbu.

Trenutno ćemo u tome koristiti ES6 TypeScript tutorial kao cilj:

tsc --target ES6  test.ts

test.ts u test.js

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

addnumbers(10, 20);

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

Prema zadanim postavkama cilj je ES3 tako da bez cilja dobivate test.js kao:

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

Ovdje je debela strelica promijenjena u normalnu anonimnu funkciju.

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 JavaScript. Dakle, 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 sličan je javascriptu, a korisnici koji poznaju javascript vrlo će ga lako pronaći. Samo varijable poput pustiti i const ne koriste se puno u usporedbi s je.

Deklariranje varijabli pomoću var

Sintaksa:

var firstname = "Roy";

Pogledajmo nekoliko TypeScript primjeri za razumijevanje rada ključne riječi var i također opseg 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and 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 malom razlikom i razumjet će isto pomoću an TypeScript primjer.

Primjer:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Iznad TypeScript primjer daje pogrešku, ali isto bi dobro funkcioniralo da je s je ključna riječ. Korištenje varijabli pustiti dostupni su unutar deklariranog opsega bloka, na primjer, varijabla t dostupna je samo unutar if-bloka, a ne cijeloj funkciji.

Također, ako deklarirate varijablu unutar bilo koje funkcije, ili for-petlje, while-petlje, TypeScript blok prekidača, bit će vam dostupan samo unutar tog bloka i bez referenca na njega izvan bloka, a izbacit će pogrešku ako se varijabla koristi izvan bloka. Ovo je glavna razlika između varijabli deklariranih ključnom riječi var i let.

Deklariranje varijabli pomoću const

Const znači konstantne varijable. Slične su let varijablama, s jedinom razlikom što se jednom dodijeljena vrijednost ne može promijeniti.

Sintaksa:

const name;

Primjer:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Dakle, korisnici mogu koristiti const varijable samo u slučajevima kada znaju da ne moraju mijenjati vrijednosti koje su im dodijeljene.

Upisuje se TypeScript

TypeScript je strogo tipiziran jezik, dok javascript nije. Varijabla koja ima vrijednost definiranu kao niz može se promijeniti u broj bez ikakvih problema Javascript. Isto se ne tolerira u TypeScript, u TypeScript, tip varijable definiran je samo na početku i kroz izvođenje, mora održavati isti tip, bilo kakve promjene dovest će do pogreške tijekom kompilacije tijekom kompilacije u javascript.

Slijede vrste:

Broj
Niz
Booleova
bilo koji
Poništiti

Broj

Uzima samo cijele brojeve, float-ove, razlomke itd.

Sintaksa:

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

Evo nekoliko važnih metoda koje se mogu koristiti na vrstama brojeva:

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

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

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

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

Primjer: sa svim String 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 vrijednosti niza

Sintaksa:

let str :string = "hello world";

Evo nekoliko važnih metoda koje se mogu koristiti na vrstama nizova:

Split() – ova metoda će podijeliti niz u niz.
charAt() – ova metoda će dati prvi znak za dani indeks.
indeksOf() – ova metoda će dati poziciju prvog pojavljivanja za vrijednost koja joj je dana.
zamijeniti () – ova metoda uzima 2 niza, prvo vrijednost za pretraživanje u nizu i ako postoji, zamijenit će je drugom i vratiti novi niz.
Podrezati () – ova metoda će ukloniti razmake s obje strane niza.
substr() – ova metoda će dati dio niza koji će ovisiti o poziciji zadanoj kao početak i kraj.
podniz() – ova metoda će dati dio niza koji će ovisiti o poziciji zadanoj kao početak i kraj. Znak na krajnjoj poziciji bit će isključen.
toUpperCase() - pretvorit će 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 is the value does not exist in the string.
_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

Prihvatit će logičke vrijednosti poput true, false, 0 i 1.

Sintaksa:

let bflag :boolean = 1;
let status :boolean = true;

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 uzeti varijablu kao niz, broj, niz, booleov ili prazan. TypeScript neće izbaciti nikakvu pogrešku tijekom kompajliranja; ovo je slično varijablama deklariranim u JavaSkripta. Upotrijebite bilo koju vrstu varijable samo ako niste sigurni u vrstu vrijednosti koja će biti pridružena toj varijabli.

Poništiti

Void tip se uglavnom koristi kao povratni tip za funkciju koja nema što vratiti.

Sintaksa:

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

TypeScript Poredak

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

Od TypeScript je strogo tipiziran jezik, morate reći koji će biti tip podataka vrijednosti u nizu. U suprotnom, smatrat će ga bilo kojim tipom.

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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Različiti načini pristupa elementima iz polja

Da biste dobili elemente iz niza, vrijednosti počinju od indeksa 0 do duljine niza.

Primjer:

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

Također možete dobiti elemente iz niza pomoću TypeScript za petlja kao što je prikazano u nastavku:

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]);
}
Output:
2016
2017
2018
2019

Korištenje for-in petlje

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

Output:
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)
}
Output:
2016
2017
2018
2019

Korištenje foreach petlje

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

TypeScript Metode polja

TypeScript Objekt niza ima mnoga svojstva i metode koje programerima pomažu u lakom i učinkovitom rukovanju nizovima. Možete dobiti vrijednost svojstva specificiranjem arrayname.property i izlaz metode specificiranjem arrayname.method().

svojstvo duljine

=> Ako želite znati broj elemenata u nizu, možete koristiti svojstvo length.

Reverse metoda

=> Možete obrnuti redoslijed stavki u nizu koristeći obrnutu metodu.

Metoda sortiranja

=> Možete sortirati stavke u nizu pomoću metode sortiranja.

Pop metoda

=> Možete ukloniti zadnju stavku niza koristeći pop metodu.

Shift način

=> Možete ukloniti prvu stavku niza koristeći shift metodu.

Push metoda

=> Možete dodati vrijednost kao posljednju stavku niza.

concat metoda

=> Možete spojiti dva niza u jedan element niza.

Primjer svojstva duljine

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

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

Primjer obrnute metode

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

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

Primjer metode sortiranja

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

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

Primjer pop metode

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

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

Primjer za metodu pomaka

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

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

Primjer za push metodu

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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 sve što je moguće učiniti u JavaSkripta je također moguća u TypeScript. Class je nova značajka dodana od ES6 nadalje, dakle ranije u JavaIsprobano je skriptiranje funkcije tipa klase pomoću funkcije s funkcijom prototipa za ponovnu upotrebu koda. Koristeći class, možete imati naš kod gotovo blizu jezika kao što su java, c#, python itd., gdje se kod može ponovno koristiti. Sa značajkom klase in TypeScript/JavaSkripta, čini jezik vrlo moćnim.

Definiranje klase u TypeScript

Ovdje je osnovna sintaksa 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 Učenici. Ima svojstva age, name i roll_no.

Konstruktor u a TypeScript Klasa

Primjer klase Učenici koji smo gore definirali, 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 će se pobrinuti za inicijalizaciju svojstava kada se klasa pozove. Svojstvima se pristupa pomoću to ključna riječ. Primjer this.age za pristup svojstvu dobi, this.roll_no za pristup roll_no, itd. Također možete imati zadani konstruktor, kao što je prikazano u nastavku:

constructor () {}

Metode unutar a TypeScript Klasa

U primjeru klase Učenici postoje metode definirane na primjer getRollNo(), getName(), getAge() koje se koriste za davanje pojedinosti o svojstvima 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

Primjer:

In TypeScript da biste stvorili instancu klase, morate koristiti operator new. Kada stvorimo instancu klase koristeći new operator, dobivamo 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

Za kompajliranje možete koristiti naredbu tsc kao što je prikazano u nastavku Javascript.

Command: tsc  Students.ts

Izlaz od Javascript kod pri kompilaciji 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 Javascript, klasa se pretvara u funkciju koja se sama poziva.

Klasno nasljeđivanje

Klase se mogu naslijediti korištenjem produžiti 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.

Ovdje je radni primjer 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, osobu i učenika. Studentska klasa proširuje osobu, a objekt kreiran na Studentu može pristupiti vlastitim metodama i svojstvima, kao i klasi koju je proširio.

Dodajmo sada još neke promjene u gornju klasu.

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

Promjene koje ste dodali u odnosu na prethodni primjer su da postoji konstruktor definiran u klasi Student. Konstruktor mora uzeti iste parametre kao osnovna klasa i dodati vlastite dodatne parametre ako ih ima.

In TypeScript morate pozvati super će sve parametre kao baze params u njemu. Ovo mora biti prva stvar koju treba napraviti unutar konstruktora. Super će izvršiti konstruktor proširene klase.

Modifikatori pristupa u TypeScript

TypeScript podržava javne, privatne i zaštićene modifikatore pristupa vašim metodama i svojstvima. Prema zadanim postavkama, ako modifikatori pristupa nisu dati, metoda ili svojstvo se smatraju javnima i bit će im lako dostupno iz objekta klase.

U slučaju modifikatora privatnog pristupa, njima se ne može pristupiti iz objekta klase i namijenjeni su samo upotrebi unutar klase. Nisu dostupni za naslijeđenu klasu.

U slučaju zaštićenih modifikatora pristupa, oni su namijenjeni za korištenje unutar klase i naslijeđene klase i neće im se 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

Smještaj kod: svojstvima ili metodama ne može pristupiti objekt klase, kao ni izvedena klasa, oni su namijenjeni internoj upotrebi unutar klase.
Zaštićen: svojstvima i metodama također ne može pristupiti stvoreni objekt. Dostupni su iz klase i dostupni su klasi koja je proširuje.
Javnost: svojstva i metode su deklarirane bez ikakve ključne riječi. Lako im se pristupa korištenjem objekta klase izvana.

Sučelje u TypeScript

Jedna od temeljnih značajki TypeScript je sučelja. Sučelje je skup definiranih pravila koje treba implementirati entitet koji ga koristi. Entitet može biti klasa, funkcija ili varijabla. Sučelje se može sastojati od svojstava i metoda. Svojstva možete definirati kao izborna koristeći “?” sintaksu za to svojstvo ili metodu. Sučelje dodaje jaku provjeru tipa za bilo koju funkciju, varijablu ili klasu koja implementira sučelje.

Sintaksa sučelja u TypeScript

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

Definirali ste sučelje pod nazivom Dimenzija koje ima svojstva širina i visina, a oba imaju tip kao niz.

Sada ovo sučelje može biti implementirano pomoću varijable, funkcije ili klase. Ovdje je primjer varijable koja implementira sučelje Dimension.

Primjer:

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

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

Potpis Dimension sučelja ima širinu i visinu, a obje su obavezne. U slučaju da je tijekom implementacije sučelja bilo koje svojstvo propušteno ili je tip promijenjen, to će dati pogrešku vremena kompajliranja tijekom kompajliranja koda u javascript.

Gornji kod, kada se kompajlira u javascript, 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

Primjer:

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 implementirano je na funkciji getDimension() kao tip povrata. Povratni tip funkcije getDimension() mora se podudarati sa svojstvima i tipom spomenutim za Dimenziju sučelja.

Prevedeni kod za Javascript bit će kako slijedi:

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

Tijekom kompilacije, ako povratni tip ne odgovara sučelju, izbacit će pogreš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"}); // will get "300px-250px"

Dakle, gornji primjer, koristili ste dimenziju sučelja kao parametar funkcije getDimension(). Kada pozovete funkciju, trebate provjeriti odgovara li joj proslijeđeni parametar definiranom pravilu sučelja.

Prevedeni kod za Javascript bit će kako slijedi:

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

Sučelje za implementaciju klase

Da biste koristili sučelje s klasom, morate koristiti ključnu riječ provodi.

Sintaksa za klasu koja implementira sučelje:

class NameofClass implements InterfaceName {
}

Sljedeći primjer pokazuje rad sučelja 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 nazvanom getWidth() koja ima povratnu vrijednost kao niz.

Prevedeni kod za Javascript bit će kako slijedi:

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 skup uputa koje se izvode da bi se izvršio zadatak. U Javascript, većina koda napisana je u obliku funkcija i igra glavnu ulogu. U TypeScript, imate dostupne klase, sučelja, module, imenske prostore, ali ipak funkcije igraju važnu ulogu. Razlika između funkcije u javascript i TypeScript funkcija je vrsta povrata dostupna 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 gornjim funkcijama dodaje se naziv funkcije, parametri su a1i b1 oba imaju tip kao broj, a povratni tip je također broj. Ako se dogodi da funkciji proslijedite niz, javit će se pogreška tijekom kompajliranja JavaSkripta.

Upućivanje poziva funkciji: add

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

Parametri a1 i b1 su obavezni parametri i izbacit će pogrešku ako nisu primljeni na taj način. Također, vrsta parametra i povratna vrsta su vrlo važni i ne mogu se promijeniti nakon definiranja.

Neobavezni parametri funkcije

U javascriptu su svi parametri funkcija izborni i smatraju se nedefiniranim ako nisu proslijeđeni. Ali isto nije slučaj sa TypeScript, nakon što definirate parametre, trebate ih također poslati, ali u slučaju da želite zadržati bilo koji parametar kao opciju, možete to učiniti koristeći? protiv naziva parametra kao što je prikazano u nastavku:

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

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

Imajte na umu da izborne parametre treba definirati u funkciji samo na zadnjoj, ne možete imati prvi parametar kao izborni, a drugi parametar kao obavezan. Kada pozovete funkciju s jednim parametrom, kompajler će izbaciti pogrešku. Stoga je potrebno zadržati neobavezne parametre na kraju.

Dodijelite zadane vrijednosti parametrima

Možete dodijeliti zadane vrijednosti parametrima 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 opcijskim parametrima, i ovdje se zadani inicijalizirani parametri moraju zadržati na kraju funkcije.

Parametri mirovanja

Vidjeli ste kako TypeScript rukuje obaveznim parametrima, opcijskim parametrima i inicijaliziranim parametrima zadane vrijednosti. Sada ćemo pogledati parametre mirovanja. Ostali parametri su grupa neobaveznih parametara definiranih zajedno, a definirani su 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 prikazano gore, ostali parametri su definirani korištenjem (…param-name); rest param je niz ispred kojeg su tri točke. Nizu će biti proslijeđeni svi parametri. Možete pozvati funkciju, kao što je prikazano u primjeru u nastavku:

Primjer:

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

Funkcije strelica

Funkcija strelice jedna je od važnih značajki objavljenih u ES6, a dostupna je u TypeScript također. Sintaksa funkcije strelice ima debelu strelicu zbog koje se funkcija naziva funkcijom strelice.

Sintaksa funkcije strelice:

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

Čemu služi funkcija strelice?

Pogledajmo primjer da bismo razumjeli slučaj upotrebe funkcije Arrow:

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

Stvorili ste anonimnu funkciju koja ima svojstvo this. Score se inicijalizira na 0 i metodu getScore koja interno ima setTimeout i za 1 sekundu konzolira this.score. Konsolirana vrijednost daje nedefinirano iako ste this.score definirali i inicijalizirali. Ovdje je problem s this ključna riječ. Funkcija unutar setTimeouta ima svoj vlastiti this i pokušava interno uputiti rezultat, a budući da nije definiran, daje nedefinirano.

Isto se može učiniti 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();

Promijenili ste funkciju unutar setTimeout u funkciju strelice kao što je prikazano u nastavku:

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

Funkcija strelice nema vlastitu to definiran i dijeli svog roditelja to, tako da su varijable deklarirane izvana lako dostupne pomoću ove unutar funkcije strelice. Korisni su zbog kraće sintakse kao i za povratne pozive, rukovatelje događajima, funkcije unutarnjeg mjerenja vremena itd.

TypeScript Enum

TypeScript Enum je objekt koji ima kolekciju povezanih vrijednosti pohranjenih zajedno. Javascript ne podržava enume. Većina programski jezik kao Java, C, C++ podržava TypeScript Enum i također je dostupan s TypeScript također. Enumi 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 enum pod nazivom Directions. Dana vrijednost je sjever, jug, istok, zapad. Vrijednosti su numerirane od 0 za prvu vrijednost u enumu i zatim se povećavaju za 1 za sljedeću vrijednost.

Deklarirajte Enum s numeričkom vrijednošću

Prema zadanim postavkama, ako enum nema nikakvu vrijednost, on ga smatra brojem počevši od 0. Sljedeći primjer prikazuje enum s numeričkom vrijednošću.

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

Također možete dodijeliti početnu vrijednost enumu i sljedeće enum vrijednosti dobit će povećane vrijednosti. Na primjer:

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

Sada vrijednost enuma Sjever počinje s 5, tako da će Jug dobiti vrijednost kao 6, Istok = 7 i Zapad = 8.

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

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

Kako pristupiti Enumu?

Sljedeći primjer pokazuje kako koristiti Enum u svom 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

Prevedeni kod u javascript je sljedeći:

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 Javascript ne podržava enume, on pretvara enum u funkcije koje se same pozivaju kao što je prikazano gore.

Deklarirajte Enum s vrijednošću niza

Možete dodijeliti vrijednosti niza po svom 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 North

Prevedeni kod u javascript je sljedeći:

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

U čemu se nalaze moduli TypeScript?

Datoteke stvorene u TypeScript imaju globalni pristup, što znači da se varijablama deklariranim u jednoj datoteci lako pristupa u drugoj datoteci. Ova globalna priroda može uzrokovati sukobe koda i probleme s izvršavanjem tijekom izvođenja. Imate funkcionalnost modula za izvoz i uvoz koji se može koristiti za izbjegavanje sukoba globalnih varijabli, funkcija. Ova je značajka dostupna u JavaSkripta s izdanjem ES6 i također 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 datoteci test2.ts lako možete pristupiti varijabli starost definirano u test1.ts i također ga modificirajte kao što je prikazano u nastavku:

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

Dakle, gornji slučaj može stvoriti mnogo problema jer su varijable globalno dostupne i mogu se mijenjati.

Kontakt Moduli, napisani kod ostaje lokaliziran u datoteci i ne može mu se pristupiti izvan nje. Da biste pristupili bilo čemu iz datoteke, ona se mora izvesti pomoću ključne riječi izvoz. It se koristi kada želite da se varijabla, klasa, funkcija ili sučelje koristi u drugoj datoteci. uvoz koristi se kada želite pristupiti izvezenoj varijabli, klasi ili sučelju ili funkciji. Na taj način napisani kod ostaje netaknut unutar datoteke, pa čak i ako definirate iste nazive varijabli, oni se ne miješaju i ponašaju se lokalno u datoteci u kojoj su deklarirani.

Korištenje izvoza i uvoza

Postoji mnogo načina izvoza i uvoza. Stoga ćemo ovdje raspravljati o sintaksi koja se uglavnom koristi.

Sintaksa za uvoz i izvoz 1:

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Ovdje je radni primjer korištenja izvoza i uvoza.

Primjer:

test1.ts

export let age: number = 25;

Ključna riječ Export koristi se za dijeljenje varijable dobi u drugoj datoteci.

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 za isti je prikazana u nastavku:

export = classname;

import classname = require(“file path of modulename”)

Kad koristite izvoz = za izvoz vašeg modula, uvoz mora koristiti require(“putanja datoteke imena modula”) za uvoz.

Evo radnog primjera koji prikazuje gornji 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 sami, pa vam je potreban učitavač modula da locirate ovisnosti o uvozu kao što ste vidjeli u TypeScript gore prikazani primjeri. Dostupan učitavač modula je CommonJS za nodejs i Require.js za pokretanje u pregledniku.

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

tsc --module commonjs testCustomer.ts

Za kompajliranje koda pomoću Requirejs modula koristite sljedeću naredbu:

tsc --module amd testCustomer.ts

Zavisne datoteke će se pretvoriti u js datoteku gornjom naredbom.

Primjer testCustomer.ts za testCustomer.js pomoću Requirejs

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

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

Da biste ga testirali pomoću require.js, morate stvoriti datoteku pod nazivom main.js, koja ima referencu na 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

Prostor imena u osnovi ima kolekciju klasa, sučelja, varijabli, funkcija zajedno u jednoj datoteci.

Sintaksa prostora imena

namespace name{

export class {
}

export interface {
}

export const constname;

}

Povezani kod dostupan je u jednom prostoru imena.

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 Studentske postavke, dodali ste sučelje StudDetails, funkciju addSpace i klasu pod nazivom Student.

Pristup prostoru imena

Slijedi kod u kojem koristite imenski prostor StudentSetup.

testStudentSetup.ts

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

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

Klasa, sučelje, funkcija dostupna unutar imenskog prostora mora se uputiti pomoću imena primjera imenskog prostora StudentSetup.addSpace za pristup funkciji, StudentSetup.Student za pristup razredu.

Možete kompajlirati obje datoteke u jedan js kao što je prikazano u nastavku:

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

Provjerite izlaz u naredbenom retku koristeći donju naredbu:

node namespace.js

Prikazat će izlaz kao:

The name is: H a r r y

Ambijentalne deklaracije u TypeScript

TypeScript omogućuje vam korištenje javascript datoteka trećih strana koristeći ambijentalnu deklaraciju. Prednost ove značajke je u tome što ne morate prepisivati, a opet koristite sve značajke biblioteke TypeScript.

Ambijentalna sintaksa

Za deklariranje ambijentalnog modula:

declare module moduleName {
   //code here
}

Ambijentalnu datoteku treba spremiti kao:

filename.d.ts

Za korištenje datoteke naziv datoteke.d.ts u svom .ts-u morate ga uputiti kao:

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

Deklaracija ambijentalnog tipa u TypeScript imat će referencu na biblioteku treće strane i ponovno će deklarirati potrebne funkcije s vlastitim tipom. Na primjer, pretpostavimo da imate malu javascript biblioteku, kao što je prikazano u nastavku:

Treća stranka JavaDatoteka skripte: testString.js

Primjer: 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 kao što su isString, convertToUpperCase, convertToLowerCase i converToStringBold.

Izrada ambijentalnog modula u TypeScript

Sada ćemo stvoriti ambijentalni modul koji će imati referencu na gornje js funkcije i također dodati provjeru tipa prema našim zahtjevima.

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;

Morate definirati naziv modula kao TestString i imati izvezeno sučelje StringsFunc.

isString(str: niz): booleov

=> Ovo će param uzeti kao niz, a tip povrata bit će Boolean. Kada koristite u svojoj .ts datoteci, u slučaju da proslijedite param kao broj ili bilo što drugo osim niza, to će vam dati pogrešku tipa kompajliranja.

convertToUpperCase(str:string): niz

=> Ovo će uzeti argument kao niz i vratiti niz. Isto vrijedi i za convertToLowerCase(str: niz)
: niz; i convertToStringBold(str: niz): niz
;

Budući da u javascript datoteci imate naziv objekta kao StringChecks, konačno moramo referencirati isto u .d.ts datoteci što se radi kao:

declare var StringChecks: TestString.StringsFunc;

Korištenje ambijentalnog modula u TypeScript

Sada je ovdje test.ts datoteka gdje će se koristiti ambijentalna datoteka tstring.d.ts

Primjer: test.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);

Sastaviti TypeScript tsc test.ts za testiranje.js

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

Sada možete koristiti test.js u html datoteci, kao i datoteku knjižnice testString.js

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

Ovo je izlaz koji se vidi u konzoli:

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

TypeScript Povijest

Pogledajmo važne znamenitosti iz povijesti TypeScript:

Nakon dvije godine internog razvoja na Microsoft. TypeScript 0.9, objavljen 2013
Dodatna podrška za generike TypeScript 1.0 je objavljen na Build 2014
U srpnju 2014. novi TypeScript došao je kompajler koji je pet puta brži od prethodne verzije.
U srpnju 2015., podrška za module ES6, ključna riječ prostora imena, za podršku, dekorateri.
U studenom 2016. dodana je značajka kao što su tipovi ključa i traženja mapiranih tipova i ostalo.
Dana 27. ožujka 2018., uvjetni tipovi, poboljšani ključ s podrškom za tipove raskrižja dodan je u TypeScript.

Zašto koristiti TypeScript?

Ovdje su važne prednosti/prednosti korištenja TypeScript

Veliki i složeni projekt u JavaSkripte je teško kodirati i održavati.
TypeScript puno pomaže u organizaciji koda, a ipak se rješava većine pogrešaka tijekom kompilacije.
TypeScript podržava JS biblioteke i API dokumentaciju
To je izborno tipkani skriptni jezik
TypeScript Kod se može pretvoriti u običan JavaKod skripte
Bolje strukturiranje koda i tehnike objektno orijentiranog programiranja
Omogućuje bolju podršku alata za vrijeme razvoja
Može proširiti jezik izvan standardnih dekoratora, async/await

Tko koristi TypeScript?

Ovdje su neke od najčešćih primjena TypeScript:

Kutni tim koristi TypeScript.
Instalacija NodeJS i NPM
TypeScript Montaža
Sastaviti TypeScript kod za Javascript
Izvršite kod koristeći Nodejs
Izvršiti Javascript u pregledniku
Sastaviti TypeScript kod za Javascript koristeći EcmaScript verziju
Možete jednostavno kompajlirati kod napisan u TypeScript do JavaSkripta koja koristi NodeJS.
Dakle, za rad TypeScript prvo trebate preuzeti i instalirati NodeJS.

Rezime

TypeScript je nadskup od JavaSkripta. TypeScript je čisti objektno orijentirani programski jezik koji podržava klase, sučelja itd.
TypeScript podržava sve objavljene značajke Ecmascripta, a programeri ih mogu koristiti tijekom kodiranja.
Varijable se koriste za pohranu vrijednosti, a vrijednost može biti niz, broj, Booleov ili izraz.
In TypeScript, tip varijable definiran je samo na početku i kroz izvođenje, mora održavati isti tip, bilo kakve promjene dovest će do pogreške tijekom kompilacije tijekom kompilacije u javascript.
Niz u TypeScript je tip podataka u kojem možete pohraniti više vrijednosti.
Class je nova značajka dodana od ES6 nadalje, dakle ranije u JavaIsprobano je skriptiranje funkcije tipa klase pomoću funkcije s funkcijom prototipa za ponovnu upotrebu koda.
TypeScript podržava javne, privatne i zaštićene modifikatore pristupa vašim metodama i svojstvima.
Jedna od temeljnih značajki TypeScript je sučelja. Sučelje je skup definiranih pravila koje treba implementirati entitet koji ga koristi.
Funkcije su skup uputa koje se izvode da bi se izvršio zadatak.
TypeScript Enum je objekt koji ima kolekciju povezanih vrijednosti pohranjenih zajedno.

Što je TypeScript?

Kako preuzeti i instalirati TypeScript

Sastaviti TypeScript kod za Javascript

Izvršiti Javascript koristeći Nodejs

Sastaviti TypeScript kod za Javascript koristeći EcmaScript verziju

POVEZANI ČLANCI

Varijable u TypeScript

Deklariranje varijabli pomoću var

Deklariranje varijabli pomoću let

Deklariranje varijabli pomoću const

Upisuje se TypeScript

Broj

Niz

Booleova

bilo koji

Poništiti

TypeScript Poredak

Deklarirajte i inicijalizirajte polje

Različiti načini pristupa elementima iz polja

Korištenje TypeScript za petlju

Korištenje for-in petlje

Korištenje for-of petlje

Korištenje foreach petlje

TypeScript Metode polja

svojstvo duljine

Reverse metoda

Metoda sortiranja

Pop metoda

Shift način

Push metoda

concat metoda

Primjer svojstva duljine

Primjer obrnute metode

Primjer metode sortiranja

Primjer pop metode

Primjer za metodu pomaka

Primjer za push metodu

Primjer za concat metodu

Nastava TypeScript

Definiranje klase u TypeScript

Primjer: radni primjer na Classu

Konstruktor u a TypeScript Klasa

Metode unutar a TypeScript Klasa

Stvaranje instance klase u TypeScript

sastavljanje TypeScript Razred za JavaScript

Klasno nasljeđivanje

Sintaksa nasljeđivanja klase:

Modifikatori pristupa u TypeScript

Sučelje u TypeScript

Sintaksa sučelja u TypeScript

Korištenje sučelja na funkciji kao povratnog tipa

Sučelje kao parametar funkcije

Sučelje za implementaciju klase

Funkcije u TypeScript

Upućivanje poziva funkciji: add

Neobavezni parametri funkcije

Dodijelite zadane vrijednosti parametrima

Parametri mirovanja

Funkcije strelica

Čemu služi funkcija strelice?

TypeScript Enum

Kako deklarirati Enum?

Deklarirajte Enum s numeričkom vrijednošću

Kako pristupiti Enumu?

Deklarirajte Enum s vrijednošću niza

U čemu se nalaze moduli TypeScript?

Zašto su vam potrebni moduli TypeScript?

Korištenje izvoza i uvoza

Sintaksa za uvoz i izvoz 1:

Sintaksa za uvoz i izvoz 2:

Učitavač modula

Primjer testCustomer.ts za testCustomer.js pomoću Requirejs

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

Imenski prostori u TypeScript

Sintaksa prostora imena

Pristup prostoru imena

Ambijentalne deklaracije u TypeScript

Ambijentalna sintaksa

Za deklariranje ambijentalnog modula:

Ambijentalnu datoteku treba spremiti kao: