TypeScript Õpetus: Mis on, liides, enum, massiiv näitega

Mis on TypeScript?

TypeScript on superkomplekt JavaSkript. TypeScript on puhas objektorienteeritud programmeerimiskeel, mis toetab klasse, liideseid jne. See on avatud lähtekoodiga keel, mille on välja töötanud Microsoft mis staatiliselt kompileerib koodi JavaSkript. Seda saab hõlpsasti käivitada brauseris või Nodejsis.

Toetatakse kõiki uusimaid ECMAScripti jaoks välja antud funktsioone TypeScript ja lisaks sellele TypeScript sellel on oma objektorienteeritud funktsioonid, nagu liidesed, keskkonnadeklaratsioon, klassi pärimine jne, mis aitavad arendada suurt rakendust, mida muidu oleks keeruline teha JavaScript.

Kuidas alla laadida ja installida TypeScript

Siin on samm-sammult allalaadimise ja installimise protsess TypeScript:

Samm 1) Laadige alla ja installige Nodejs

Minge nodejs'i ametlikule saidile: https://nodejs.org/en/download/ ning laadige alla ja installige nodejs vastavalt oma operatsioonisüsteemile. Üksikasjalikud juhised nodejs-i allalaadimiseks on saadaval siin: https://www.guru99.com/download-install-node-js.html

Samm 2) Kontrollige Nodejs ja npm versioon

Kontrollimaks, kas nodejs ja npm on installitud, kontrollige käsurealt versiooni.

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

D:\typeproject>npm --version
6.4.1

Nii et teil on installitud nodejs v10 ja npm 6.

Step 3) TypeScript paigaldamine

Looge oma projektikataloog typeproject/ ja käivitage npm init, nagu on näidatud allolevas käsus:

npm init

Samm 4) Käivitage installimine

Nüüd loome paketi .json, mis salvestab meie projekti sõltuvused.

Kui installimine on tehtud TypeScript järgmiselt:

npm -g install typescript

Ülaltoodud käsk hoolitseb installimise eest TypeScript. "-g" lisamine npm install installitakse TypeScript globaalselt. -g kasutamise eeliseks on see, et saate kasutada TypeScript tsc käsu mis tahes kataloogist, kuna see on globaalselt installitud. Kui te ei soovi installida TypeScript globaalselt kasutage allolevat käsku:

npm --save install typescript

Loo src/ kaust oma projekti kataloogis ja kaustas src/ loo TypeScript faili test.ts ja kirjutage oma kood.

Näide: test.ts

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

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

Koosta TypeScript koodi Javascript

Ülaltoodud koodi kompileerimiseks kasutage järgmist käsku:

If TypeScript on globaalselt installitud, kasutage allolevat käsku:

tsc test.ts

If TypeScript on installitud teie projektile, mille teed peate kasutama TypeScript alates node_modules, nagu näidatud:

node_modules/typescript/bin/tsc test.ts

Ülaltoodud käsk loob faili test.js ja selle kood kompileeritakse javascripti.

Näide: test.js

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

Täitma Javascript kasutades Nodejs

Selle TypeScript juhendis käivitame faili test.js in nodejs järgmiselt:

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

Konsoleeritud väärtus kuvatakse faili test.js täitmisel

Täitma JavaSkript brauseris

Näide:

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

Koosta TypeScript koodi Javascript kasutades EcmaScripti versiooni

TypeScript toetab kõiki välja antud Ecmascripti funktsioone ja arendajad saavad neid kodeerimisel kasutada. Kuid mitte kõik uued funktsioonid ei toeta vanemaid brausereid, mistõttu peate javascripti kompileerima Ecmascripti vanemale versioonile. TypeScript pakub kompilaatori valikuid, mis seda teha saavad.

Näide: test.ts

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

addnumbers(10, 20);

Valitud ES-i versioonile kompileerimiseks saate oma käsus kasutada suvandit target või t järgmiselt.

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Vaikimisi on sihtmärk ES3. Kui soovite seda muuta, võite kasutada ülaltoodud käsku.

Praegu kasutame selles ES6 TypeScript õpetus sihtmärgiks:

tsc --target ES6  test.ts

test.ts test.js-ks

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

addnumbers(10, 20);

Kood jääb samaks, kuna teie kasutatud noolefunktsioon on ES6 funktsioon ja seda ES6-le kompileerimisel ei muudeta.

Vaikimisi on sihtmärk ES3, nii et ilma sihtmärgita saate test.js-i kujul:

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

Nii et siin on rasvanool muudetud tavaliseks anonüümseks funktsiooniks.

Muutujad sisse TypeScript

Muutujad kasutatakse väärtuste salvestamiseks ja väärtus võib olla string, arv, tõeväärtus või avaldis. Kui tegemist on muutujatega TypeScript, on need sarnased JavaScript. Nii et õppigem deklareerima ja määrama muutujatele väärtusi TypeScript.

Muutujaid ei saa koodis kasutada ilma defineerimata. Muutuja deklareerimiseks võite kasutada

oli märksõna,

laskma võtmesõna

const võtmesõna

Muutujatega töötamine TypeScript sarnaneb javascriptiga ja javascriptiga tuttavatel kasutajatel on see väga lihtne. Ainult sellised muutujad nagu laskma ja const ei kasutata palju võrreldes oli.

Muutujate deklareerimine kasutades var

süntaksit:

var firstname = "Roy";

Heidame pilgu mõnele TypeScript näiteid, et mõista märksõna var toimimist ja ka kasutades deklareeritud muutujate ulatust oli märksõna.

Näide 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

Näide 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.

Näide 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.

Muutujate deklareerimine letiga

. TypeScript Let süntaks on järgmine:

süntaksit:

let name="Roy";

Töö laskma muutuja on peaaegu sama, mis oli, kuid väikese erinevusega ja mõistab sama kasutades an TypeScript näide.

Näide:

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

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

Üle TypeScript näide viskab vea, kuid sama oleks toiminud hästi, kui see oleks olnud koos oli märksõna. Kasutatavad muutujad laskma on saadaval deklareeritud ploki ulatuse piires, näiteks muutuja t on saadaval ainult if-ploki sees, mitte kogu funktsiooni jaoks.

Samuti kui juhtute mis tahes funktsiooni sees deklareerima muutuja või for-loop, while-loop, TypeScript lülitiplokk, on see teile saadaval ainult selle ploki sees ja sellele ei viidata väljaspool plokki ning see annab vea, kui muutujat kasutatakse väljaspool plokki. See on peamine erinevus märksõnade deklareeritud muutujate var ja let vahel.

Muutujate deklareerimine kasutades const

Const tähendab konstantseid muutujaid. Need on sarnased let-muutujatele, ainsaks erinevuseks on see, et kui väärtus on sellele määratud, ei saa seda muuta.

süntaksit:

const name;

Näide:

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

Seega saavad kasutajad const muutujaid kasutada ainult siis, kui nad teavad, et nad ei pea sellele määratud väärtusi muutma.

Sisestab sisse TypeScript

TypeScript on tugevasti trükitud keel, samas kui javascript ei ole. Muutuja, mille väärtus on määratletud stringina, saab muuta arvuks ilma probleemideta Javascript. Sama ei sallita TypeScript. sisse TypeScript, määratakse muutuja tüüp ainult alguses ja täitmise ajal peab see säilitama sama tüübi, kuna kõik selles tehtavad muudatused põhjustavad javascripti kompileerimisel kompileerimisaja tõrke.

Järgmised tüübid:

Number
nöör
Boolean
mistahes
Kehtetu

Number

Võtab ainult täisarvud, ujukid, murded jne.

süntaksit:

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

Siin on mõned olulised meetodid, mida saab numbritüüpide puhul kasutada.

fikseeritud() – see teisendab arvu stringiks ja säilitab meetodile antud kümnendkohad.

toString () – see meetod teisendab arvu stringiks.

valueOf () – see meetod annab tagasi arvu primitiivse väärtuse.

täpsus() – see meetod vormindab numbri määratud pikkusega.

Näide: kõigi stringmeetoditega

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

nöör

String: ainult stringi väärtused

süntaksit:

let str :string = "hello world";

Siin on mõned olulised meetodid, mida saab stringitüüpide puhul kasutada:

jagada() – see meetod jagab stringi massiiviks.
charAt() – see meetod annab antud indeksi esimese märgi.
indeks() – see meetod annab sellele antud väärtuse puhul esimese esinemiskoha.
asendama () – see meetod võtab 2 stringi, esmalt stringist otsitava väärtuse ja olemasolu korral asendab selle teise ja annab tagasi uue stringi.
Kärpima () – see meetod eemaldab tühikud stringi mõlemalt küljelt.
alamstr() – see meetod annab stringi osa, mis sõltub alguse ja lõpuna antud positsioonist.
alamstring() – see meetod annab stringi osa, mis sõltub alguse ja lõpuna antud positsioonist. Lõpppositsioonil olev tegelane jäetakse välja.
suurtähtedega() - teisendab stringi suurtähtedeks
väiketähtedega() – teisendab stringi väiketähtedeks.

Näide:

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"

Boolean

Aktsepteerib loogilisi väärtusi nagu tõene, väär, 0 ja 1.

süntaksit:

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

mistahes

süntaksit:

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

Muutujad deklareeritud kasutades mistahes tüüp võib võtta muutuja stringi, arvu, massiivi, tõeväärtuse või tühimikuna. TypeScript ei anna kompileerimisaja viga; see on sarnane jaotises deklareeritud muutujatega JavaSkript. Kasutage mis tahes tüüpi muutujaid ainult siis, kui te pole kindel selle muutujaga seostatava väärtuse tüübis.

Kehtetu

Tühitüüpi kasutatakse enamasti tagastamistüübina funktsioonis, millel pole midagi tagastada.

süntaksit:

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

TypeScript Array

An Array in TypeScript on andmetüüp, kuhu saab salvestada mitu väärtust. Õppime, kuidas deklareerida ja määrata väärtusi massiivi toimingute jaoks TypeScript.

Alates TypeScript on tugevasti trükitud keel, peate ütlema, milline on massiivi väärtuste andmetüüp. Vastasel juhul käsitletakse seda mis tahes tüüpina.

Massiivi deklareerimine ja initsialiseerimine

süntaksit:

let nameofthearray : Array<typehere>

Näide

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.

Erinevad viisid massiivi elementidele juurde pääsemiseks

Elementide saamiseks massiivist algavad väärtused indeksist 0 kuni massiivi pikkuseni.

Näide:

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

Elemente saate ka massiivist hankida kasutades TypeScript eest silmus nagu allpool näidatud:

Kasutamine TypeScript silmuse jaoks

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

For-in ahela kasutamine

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

Output:
2016
2017
2018
2019

For-of-silmuse kasutamine

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

Foreach-silmuse kasutamine

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

TypeScript Massiivimeetodid

TypeScript Massiiviobjektil on palju omadusi ja meetodeid, mis aitavad arendajatel massiive lihtsalt ja tõhusalt käsitseda. Atribuudi väärtuse saate, määrates massiivinimi.omadus ja meetodi väljundi, määrates massiivi nimi.method().

pikkuse omadus

=> Kui soovite teada massiivi elementide arvu, võite kasutada atribuuti pikkus.

Reverse meetod

=> Massiivis olevate üksuste järjekorda saab ümber pöörata, kasutades pöördmeetodit.

Sorteerimismeetod

=> Massiivi üksusi saab sortida sortimismeetodi abil.

Pop meetod

=> Massiivi viimase üksuse saate eemaldada popmeetodi abil.

Shift meetod

=> Massiivi esimese üksuse saate eemaldada nihkemeetodi abil.

Push meetod

=> Saate lisada väärtust massiivi viimase üksusena.

concat meetod

=> Saate ühendada kaks massiivi üheks massiivielemendiks.

Näide pikkuse omaduse kohta

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

Pöördmeetodi näide

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"]

Sorteerimismeetodi näide

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"]

Näide popmeetodi kohta

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

Näide nihkemeetodi kohta

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

Tõukemeetodi näide

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

Concat meetodi näide

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]

Klass TypeScript

TypeScript on superkomplekt JavaSkript, nii et mida iganes võimalik teha JavaSkript on võimalik ka sisse TypeScript. Klass on uus funktsioon, mis on lisatud alates ES6-st, seega varem JavaSkripti klassitüüpi funktsiooni prooviti, kasutades koodi taaskasutamiseks prototüübi funktsiooniga funktsiooni. Klassi kasutades võib meie kood olla peaaegu lähedane keeltele, nagu java, c#, python jne, kus koodi saab uuesti kasutada. Klassi funktsiooniga TypeScript/JavaSkript, see muudab keele väga võimsaks.

Klassi määratlemine TypeScript

Siin on põhiklassi süntaks TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Näide: klassi töönäide

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

Ülaltoodud näites on teil klass nimega Õpilased. Sellel on atribuudid vanus, nimi ja rulli_nr.

Konstruktor a TypeScript klass

Ülalpool määratletud klassi õpilaste näitel on konstruktor, nagu on näidatud allpool:

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

Konstruktormeetodil on parameetrid vanus, nimi ja rulli_nr. Konstruktor hoolitseb klassi kutsumisel atribuutide lähtestamise eest. Kinnistutele pääseb juurde kasutades see märksõna. Näide this.age, et pääseda juurde vanuse atribuudile, this.roll_no juurdepääsuks roll_no jne. Teil võib olla ka vaikekonstruktor, nagu allpool näidatud:

constructor () {}

Meetodid sees a TypeScript klass

Klassi Students näites on määratletud meetodid, näiteks getRollNo(), getName(), getAge(), mida kasutatakse atribuutide roll_no, nime ja vanuse üksikasjade andmiseks.

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

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

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

Klassi eksemplari loomine TypeScript

Näide:

In TypeScript klassi eksemplari loomiseks peate kasutama uut operaatorit. Kui loome uue operaatori abil klassi eksemplari, saame objekti, millel on juurdepääs klassi omadustele ja meetoditele, nagu allpool näidatud:

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

Kompileerimine TypeScript Klass kuni JavaScript

Kompileerimiseks võite kasutada käsku tsc, nagu allpool näidatud Javascript.

Command: tsc  Students.ts

Väljund Javascript koostamise kood on järgmine:

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, teisendatakse klass ise kutsutavaks funktsiooniks.

Klassipärand

Klassid saab pärida kasutades laiendama märksõna sisse TypeScript.

Klassi pärimise süntaks:

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

}

klass B saab jagada klass A meetodid ja omadused.

Siin on toimiv näide klassist, mis kasutab pärimist

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

Teil on kaks klassi, isik ja õpilane. Õpilasklass laiendab isikut ja õpilasel loodud objekt pääseb juurde nii oma meetoditele ja omadustele kui ka laiendatud klassile.

Nüüd lisame ülaltoodud klassi veel mõned muudatused.

Näide:

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

Muudatused, mille olete eelmise näitega võrreldes lisanud, on klassis Student määratletud konstruktor. Konstruktor peab võtma samad parameetrid nagu põhiklass ja lisama oma täiendavad parameetrid, kui neid on.

In TypeScript peate helistama supertahte kõikidele parameetritele, kuna selles sisalduvad põhiparameetrid. See peab olema esimene asi, mida konstruktori sees teha tuleb. Super teostab laiendatud klassi konstruktori.

Juurdepääs modifikaatoritele TypeScript

TypeScript toetab teie meetodite ja omaduste avalikke, privaatseid ja kaitstud juurdepääsu modifikaatoreid. Vaikimisi, kui juurdepääsu muutjaid ei anta, loetakse meetod või atribuut avalikuks ja need on klassi objektist hõlpsasti juurdepääsetavad.

Privaatjuurdepääsu modifikaatorite puhul ei ole neile juurdepääs klassi objektilt ja mõeldud kasutamiseks ainult klassi sees. Need ei ole päritud klassi jaoks saadaval.

Kaitstud juurdepääsu modifikaatorite puhul on need mõeldud kasutamiseks klassis ja päritud klassis ning need ei ole klassi objektilt juurdepääsetavad.

Näide:

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

Private: atribuutidele või meetoditele ei pääse klassi objekt ega ka tuletatud klass juurde, need on mõeldud klassisiseseks kasutamiseks.
Kaitstud: Samuti ei pääse loodud objekt atribuutidele ja meetoditele juurde. Need on juurdepääsetavad klassi seest ja saadaval klassile, kes seda laiendab.
Avalik: omadused ja meetodid deklareeritakse ilma ühegi märksõnata. Klassi objekti abil on neile lihtne juurde pääseda väljastpoolt.

Liides sisse TypeScript

Üks peamisi omadusi TypeScript on liidesed. Liides on määratletud reeglite kogum, mida seda kasutav olem peab rakendama. Olem võib olla klass, funktsioon või muutuja. Liides võib koosneda omadustest ja meetoditest. Saate määratleda atribuudid valikulistena, kasutades "?" selle atribuudi või meetodi süntaks. Liides lisab tugeva tüübikontrolli mis tahes liidest rakendava funktsiooni, muutuja või klassi jaoks.

Liidese süntaks TypeScript

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

Olete määratlenud liidese nimega Dimension, millel on atribuudid laius ja kõrgus ning mõlema tüüp on stringina.

Nüüd saab seda liidest rakendada muutuja, funktsiooni või klassi abil. Siin on näide liidese Dimension rakendava muutuja kohta.

Näide:

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

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

Liidese allkirjal Dimensioon on laius ja kõrgus ning mõlemad on kohustuslikud. Kui liidese juurutamisel jääb mõni atribuut märkamata või tüüpi muudetakse, annab see koodi javascripti kompileerimisel kompileerimisaja vea.

Ülaltoodud kood näeb javascripti koostamisel välja järgmine:

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

Vaatame nüüd, kuidas funktsiooniga liidest kasutada.

Funktsiooni liidese kasutamine tagastustüübina

Näide:

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

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

Ülaltoodud näites on liides Dimension rakendatud funktsiooni getDimension() tagastustüübina. GetDimension() tagastustüüp peab vastama liidese mõõtme jaoks mainitud atribuutide ja tüübile.

Kompileeritud kood Javascript saab olema järgmine:

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

Kui kompileerimise ajal tagastamise tüüp ei ühti liidesega, annab see veateate.

Liides funktsiooni parameetrina

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"

Nii et ülaltoodud näites kasutasite funktsiooni getDimension() parameetrina Interface Dimensionit. Funktsiooni kutsumisel peate veenduma, et sellele edastatud parameeter vastab määratletud liidesereeglile.

Kompileeritud kood Javascript saab olema järgmine:

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

Klassi rakendusliides

Klassiga liidese kasutamiseks peate kasutama märksõna tööriistad.

Liidest rakendava klassi süntaks:

class NameofClass implements InterfaceName {
}

Järgmine näide näitab liidese toimimist klassiga.

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

Ülaltoodud näites olete määratlenud liidese Dimension atribuutidega laius ja kõrgus nii tüüpi string kui ka meetod nimega getWidth(), millel on stringina tagastusväärtus.

Kompileeritud kood Javascript saab olema järgmine:

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

Funktsioonid sees TypeScript

Funktsioonid on juhiste kogum, mida täidetakse ülesande täitmiseks. sisse Javascript, on suurem osa koodist kirjutatud funktsioonide kujul ja mängib suurt rolli. sisse TypeScript, teil on saadaval klass, liidesed, moodulid, nimeruumid, kuid funktsioonid mängivad siiski olulist rolli. Funktsiooni erinevus in javascript ja TypeScript funktsioon on tagastustüüp, mis on saadaval TypeScript funktsiooni.

JavaSkripti funktsioon:

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

TypeScript funktsioon:

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

Ülaltoodud funktsioonides lisatakse funktsiooni nimi, parameetrid on a1ja b1 mõlemal on tüüp arvuna ja tagastustüüp on samuti arv. Kui juhtute funktsioonile stringi edastama, annab see kompileerimise ajal kompileerimise ajal vea JavaSkript.

Funktsioonile helistamine: lisa

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

Parameetrid a1 ja b1 on kohustuslikud parameetrid ja annavad vea, kui seda nii ei saada. Samuti on parameetri tüüp ja tagastustüüp väga olulised ja neid ei saa pärast määratlemist muuta.

Funktsiooni valikulised parameetrid

JavaScriptis on kõik funktsioonide parameetrid valikulised ja kui neid ei edastata, peetakse neid määratlemata. Kuid sama ei kehti TypeScript, kui olete määranud parameetrid, peate need ka saatma, kuid kui soovite jätta mõne parameetri valikuliseks, saate seda teha kasutades ? parameetri nime vastu, nagu allpool näidatud:

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.

Pange tähele, et valikulised parameetrid tuleb määratleda funktsioonis ainult viimases, esimest parameetrit ei saa seada valikuliseks ja teist parameetrit kohustuslikuks. Funktsiooni kutsumisel ühe parameetriga kompilaator annab vea. Seega on vaja valikulised parameetrid lõpus alles jätta.

Määrake parameetritele vaikeväärtused

Saate määrata parameetritele vaikeväärtused, nagu allpool näidatud.

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

Sarnaselt valikulistele parameetritele tuleb ka siin vaikimisi lähtestatud parameetrid säilitada funktsiooni lõpus.

Puhke parameetrid

Olete näinud, kuidas TypeScript käsitleb kohustuslikke parameetreid, valikulisi parameetreid ja vaikeväärtusega lähtestatud parameetreid. Nüüd vaatame puhkeparameetreid. Ülejäänud parameetrid on valikuliste parameetrite rühm, mis on määratletud koos ja need määratakse kolme abil punktid (…) millele järgneb parameetri nimi, mis on massiiv.

Puhkeparameetrite süntaks:

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

Nagu ülal näidatud, on ülejäänud parameetrid määratletud kasutades (…parameetri nimi); ülejäänud param on massiiv, mille eesliide on kolm punkti. Massiivile edastatakse kõik parameetrid. Funktsiooni saate helistada, nagu on näidatud allolevas näites:

Näide:

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

Noolefunktsioonid

Noolefunktsioon on üks olulisi ES6-s välja antud funktsioone ja see on saadaval TypeScript samuti. Noolefunktsiooni süntaksis on paks nool, mille tõttu funktsiooni nimetatakse noolefunktsiooniks.

Noolefunktsiooni süntaks:

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

Milleks noolefunktsiooni kasu on?

Vaatame näidet, et mõista funktsiooni Arrow kasutusjuhtu:

Näide:

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

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

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

Olete loonud anonüümse funktsiooni, millel on see omadus. Skoor lähtestatakse väärtusele 0 ja meetod getScore, millel on sisemiselt setTimeout ja mis 1 sekundiga konsoolib this.score'i. Konsooliväärtus annab undefined, kuigi see.score on määratletud ja lähtestatud. Siin on probleem this märksõna. Funktsioonil setTimeout sees on oma see ja see üritab skoori sisemiselt viidata ja kuna see pole defineeritud, annab see määramata.

Sama saab teha noolefunktsiooni abil, nagu allpool näidatud:

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

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

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

Olete muutnud funktsiooni setTimeout sees noolefunktsiooniks, nagu allpool näidatud:

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

Noolefunktsioonil ei ole oma see määratletud ja see jagab oma vanemat see, nii et väljaspool deklareeritud muutujad on hõlpsasti juurdepääsetavad, kasutades seda noolefunktsiooni sees. Need on kasulikud nii lühema süntaksi kui ka tagasihelistamiste, sündmuste käitlejate, sisemiste ajastusfunktsioonide jms jaoks.

TypeScript Enums

TypeScript Enum on objekt, millel on koos salvestatud seotud väärtuste kogu. Javascript ei toeta enum. Enamik programmeerimiskeel nagu Java, C, C++ toetab TypeScript Enum ja see on saadaval ka koos TypeScript samuti. Enumid määratakse märksõna enum abil.

Kuidas kuulutada enum?

süntaksit:

enum NameofEnum {
   value1,
   value2,
    ..
}

Näide: Enum

enum Directions {
North,
South,
East,
West
}

Ülaltoodud näites olete määratlenud loendi nimega Juhised. Antud väärtus on North, South, East, West. Väärtused nummerdatakse loendi esimese väärtuse puhul 0-st ja seejärel suurendatakse järgmise väärtuse jaoks 1 võrra.

Deklareerige arvväärtusega enum

Vaikimisi, kui loendile ei anta väärtust, loeb see seda arvuks, mis algab 0-st. Järgmises näites on toodud arvväärtusega enum.

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

Saate määrata loendile ka algusväärtuse ja järgmised loendi väärtused saavad suurendatud väärtused. Näiteks:

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

Nüüd algab loendi väärtus põhjaga 5, nii et lõuna saab väärtuseks 6, ida = 7 ja lääs = 8.

Vaikeväärtuste asemel võite määrata ka enda valitud väärtused. Näiteks:

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

Kuidas Enumile juurde pääseda?

Järgmine näide näitab, kuidas koodis Enumi kasutada:

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

JavaScripti kompileeritud kood on järgmine:

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

Alates Javascript ei toeta enumeid, see teisendab enumi ise kutsutavateks funktsioonideks, nagu ülal näidatud.

Deklareerige Enum stringiväärtusega

Saate määrata oma valitud stringiväärtused, nagu on näidatud allolevas näites:

Näide:

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

JavaScripti kompileeritud kood on järgmine:

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

Milles on moodulid TypeScript?

aastal loodud failid TypeScript neil on globaalne juurdepääs, mis tähendab, et ühes failis deklareeritud muutujatele pääseb hõlpsasti juurde teises failis. See globaalne olemus võib põhjustada koodikonflikte ja käivitamise ajal probleeme. Teil on ekspordi- ja impordimooduli funktsionaalsus, mida saab kasutada globaalsete muutujate ja funktsioonide konfliktide vältimiseks. See funktsioon on saadaval riigis JavaSkript koos ES6 väljalaskega ja samuti toetatud TypeScript.

Miks on vaja mooduleid? TypeScript?

Järgmine näide näitab probleemi ilma mooduliteta:

Näide test1.ts

let age : number = 25;

Olete defineerinud failis test1.ts tüübinumbri muutuja vanuse.

Näide test2.ts

Failis test2.ts pääsete muutujale hõlpsasti juurde vanus määratletud test1.ts ja muutke seda ka allpool näidatud viisil:

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

Seega võib ülaltoodud juhtum tekitada palju probleeme, kuna muutujad on ülemaailmselt saadaval ja neid saab muuta.

koos Moodulid, jääb kirjutatud kood faili lokaadiks ja sellele ei pääse juurde väljaspool seda. Failist millelegi juurdepääsu saamiseks tuleb see eksportida, kasutades ekspordi märksõna. It kasutatakse siis, kui soovite, et muutujat, klassi, funktsiooni või liidest kasutataks mõnes teises failis. Import kasutatakse siis, kui soovite juurde pääseda ka eksporditud muutujale, klassile või liidesele või funktsioonile. Seda tehes jääb kirjutatud kood failis puutumatuks ja isegi kui määrate samad muutujate nimed, ei lähe need segamini ja käituvad failis, kus need on deklareeritud, lokaalselt.

Ekspordi ja impordi kasutamine

Ekspordiks ja importimiseks on palju võimalusi. Nii arutleme siin süntaksi üle, mida enamasti kasutatakse.

Impordi ja ekspordi süntaks 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"

Siin on toimiv näide ekspordi ja impordi kasutamisest.

Näide:

test1.ts

export let age: number = 25;

Ekspordi märksõna kasutatakse vanusemuutuja jagamiseks teises failis.

test2.ts

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

Impordi märksõna kasutatakse juurdepääsuks vanus muutuja ja peate määrama faili asukoha, nagu ülal näidatud.

2. impordi ja ekspordi süntaks:

Eksportimiseks ja importimiseks on veel üks viis ning selle süntaks on järgmine:

export = classname;

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

Kui kasutate eksport = mooduli eksportimiseks peab import kasutama selle importimiseks nõuet (“mooduli nime failitee”).

Siin on toimiv näide, mis näitab ülaltoodud juhtumit:

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

Mooduli laadija

Moodulid ei saa iseseisvalt töötada, seega on impordisõltuvuste leidmiseks vaja mooduli laadijat, nagu olete näinud TypeScript ülaltoodud näited. Saadaval on mooduli laadija CommonJS nodejs ja Require.js brauseris käitamiseks.

Koodi kompileerimiseks CommonJS mooduli abil kasutage järgmist käsku:

tsc --module commonjs testCustomer.ts

Koodi koostamiseks mooduli Requirejs abil kasutage järgmist käsku:

tsc --module amd testCustomer.ts

Sõltuvad failid teisendatakse ülaltoodud käsuga js-failiks.

Näide testCustomer.ts failist testCustomer.js kasutades Requirejs

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

Klient.ts näide Customer.js-ks, kasutades 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;
});

Selle testimiseks faili request.js abil peate looma faili nimega main.js, millel on viide näidatud sõltuvustele.

Siin on kausta struktuur:

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

main.js

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

test.html

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

Nimeruumid sisse TypeScript

Nimeruum sisaldab põhimõtteliselt klasside, liideste, muutujate ja funktsioonide kogumit ühes failis.

Nimeruumi süntaks

namespace name{

export class {
}

export interface {
}

export const constname;

}

Seotud kood on saadaval ühe nimeruumi all.

Nimeruumi töönäide: 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;
        }
    }
}

Nimeruumi nimi on Õpilase seadistus, olete lisanud liidese StudDetails , funktsiooni addSpace ja klassi nimega Student.

Juurdepääs nimeruumile

Järgmine on kood, kus te nimeruumi kasutate Õpilase seadistus.

testStudentSetup.ts

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

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

Nimeruumis saadaolevale klassile, liidesele, funktsioonile tuleb viidata nimeruumi näite nime kasutades StudentSetup.addSpace funktsioonile juurdepääsuks, StudentSetup.Student klassi pääsemiseks.

Mõlemad failid saate kompileerida üheks js-ks, nagu allpool näidatud:

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

Kontrollige väljundit käsureal, kasutades allolevat käsku:

node namespace.js

See kuvab väljundi järgmiselt:

The name is: H a r r y

Ümbritseva keskkonna deklaratsioonid TypeScript

TypeScript võimaldab kasutada kolmanda osapoole javascripti faile ümbritseva deklaratsiooni abil. Selle funktsiooni eeliseks on see, et te ei pea ümber kirjutama ja siiski kasutama kõiki teegi funktsioone TypeScript.

Ümbritsev süntaks

Keskkonnamooduli deklareerimiseks tehke järgmist.

declare module moduleName {
   //code here
}

Ümbritsev fail tuleb salvestada järgmiselt:

filename.d.ts

Faili kasutamiseks failinimi.d.ts oma .ts-is peate sellele viitama järgmiselt:

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

Ümbritseva õhu tüübi deklaratsioon TypeScript sisaldab viidet kolmanda osapoole teegile ja deklareerib vajalikud funktsioonid uuesti oma tüübiga. Oletame näiteks, et teil on väike JavaScripti teek, nagu allpool näidatud:

Kolmas osapool JavaSkriptifail: testString.js

Näide: 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();
    }
};

Teil on objekt nimega StringChecks, millel on sellised funktsioonid nagu isString, convertToUpperCase, convertToLowerCase ja converToStringBold.

Ambient mooduli loomine TypeScript

Nüüd loob keskkonnamoodul, mis viitab ülaltoodud js-i funktsioonidele ja lisab ka tüübikontrolli vastavalt meie nõuetele.

Failinimi: 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;

Peate määrama mooduli nimeks TestString ja eksportima liidese StringsFunc.

isString(str: string): tõeväärtus

=> See võtab parameetri stringina ja tagastamise tüüp on tõeväärtus. Kui kasutate .ts-failis parameetrit numbrina või millegi muuna peale stringi, annab see teile kompileerimise tüübi vea.

convertToUpperCase(str:string): string

=> See võtab argumendi stringina ja tagastab stringi. Sama kehtib ka convertToLowerCase(str: string)
: string; ja convertToStringBold(str: string): string
;

Kuna javascripti failis on objekti nimi StringChecks, peame lõpuks viitama samale failis .d.ts, mida tehakse järgmiselt:

declare var StringChecks: TestString.StringsFunc;

Ambient-mooduli kasutamine TypeScript

Siin on fail test.ts, kus kasutatakse ümbritsevat faili tstring.d.ts

Näide: 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);

Koosta TypeScript tsc test.ts kuni test.js

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

Nüüd saate kasutada test.js-i html-failis ja ka teegifaili testString.js

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

See on konsoolis nähtav väljund:

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

TypeScript ajalugu

Vaatame olulisi vaatamisväärsusi ajaloost TypeScript:

Pärast kaheaastast sisemist arengut kl Microsoft. TypeScript 0.9, välja antud 2013. aastal
Täiendav tugi geneeriliste ravimite jaoks TypeScript 1.0 ilmus versioonis Build 2014
Juulis 2014 uus TypeScript tuli kompilaator, mis on viis korda kiirem kui eelmine versioon.
2015. aasta juulis toetati ES6 mooduleid, nimeruumi märksõna, for, of support, dekoraatorid.
2016. aasta novembris lisandus funktsioon, nagu kaardistatud tüüpide võtme- ja otsingutüübid ning puhkus.
27. märtsil 2018 lisati tingimustüübid täiustatud võti koos ristmikutüüpide tugedega. TypeScript.

Miks kasutada TypeScript?

Siin on kasutamise olulised plussid/kasud TypeScript

Suur ja keeruline projekt JavaSkripte on raske kodeerida ja hooldada.
TypeScript aitab palju koodi organiseerimisel ja siiski vabaneb enamikust kompileerimise käigus esinevatest vigadest.
TypeScript toetab JS-i teeke ja API dokumentatsiooni
See on valikuliselt trükitav skriptikeel
TypeScript Koodi saab teisendada tavaliseks JavaSkripti kood
Parem koodi struktureerimise ja objektorienteeritud programmeerimise tehnikad
Võimaldab paremat arendusaja tööriista tuge
See võib laiendada keelt standardsetest dekoraatoritest kaugemale, asünkroonida/oota

Kes kasutab TypeScript?

Siin on mõned levinumad rakendused TypeScript:

Nurgameeskond kasutab TypeScript.
NodeJS ja NPM installimine
TypeScript paigaldamine
Koosta TypeScript koodi Javascript
Käivitage kood kasutades Nodejs
Täitma Javascript brauseris
Koosta TypeScript koodi Javascript kasutades EcmaScripti versiooni
Sisse kirjutatud koodi saate hõlpsalt kompileerida TypeScript et JavaSkript, kasutades NodeJS-i.
Nii et töötama TypeScript peate esmalt alla laadima ja installima NodeJS-i.

kokkuvõte

TypeScript on superkomplekt JavaSkript. TypeScript on puhas objektorienteeritud programmeerimiskeel, mis toetab klasse, liideseid jne.
TypeScript toetab kõiki välja antud Ecmascripti funktsioone ja arendajad saavad neid kodeerimisel kasutada.
Väärtuste salvestamiseks kasutatakse muutujaid ja väärtus võib olla string, arv, tõeväärtus või avaldis.
In TypeScript, määratakse muutuja tüüp ainult alguses ja täitmise ajal peab see säilitama sama tüübi, kuna kõik selles tehtavad muudatused põhjustavad javascripti kompileerimisel kompileerimisaja tõrke.
Massiivi sisse TypeScript on andmetüüp, kuhu saab salvestada mitu väärtust.
Klass on uus funktsioon, mis on lisatud alates ES6-st, seega varem JavaSkripti klassitüüpi funktsiooni prooviti, kasutades koodi taaskasutamiseks prototüübi funktsiooniga funktsiooni.
TypeScript toetab teie meetodite ja omaduste avalikke, privaatseid ja kaitstud juurdepääsu modifikaatoreid.
Üks peamisi omadusi TypeScript on liidesed. Liides on määratletud reeglite kogum, mida seda kasutav olem peab rakendama.
Funktsioonid on juhiste kogum, mida täidetakse ülesande täitmiseks.
TypeScript Enum on objekt, millel on koos salvestatud seotud väärtuste kogu.

Mis on TypeScript?

Kuidas alla laadida ja installida TypeScript

Koosta TypeScript koodi Javascript

Täitma Javascript kasutades Nodejs

Koosta TypeScript koodi Javascript kasutades EcmaScripti versiooni

SEOTUD ARTIKLID

Muutujad sisse TypeScript

Muutujate deklareerimine kasutades var

Muutujate deklareerimine letiga

Muutujate deklareerimine kasutades const

Sisestab sisse TypeScript

Number

nöör

Boolean

mistahes

Kehtetu

TypeScript Array

Massiivi deklareerimine ja initsialiseerimine

Erinevad viisid massiivi elementidele juurde pääsemiseks

Kasutamine TypeScript silmuse jaoks

For-in ahela kasutamine

For-of-silmuse kasutamine

Foreach-silmuse kasutamine

TypeScript Massiivimeetodid

pikkuse omadus

Reverse meetod

Sorteerimismeetod

Pop meetod

Shift meetod

Push meetod

concat meetod

Näide pikkuse omaduse kohta

Pöördmeetodi näide

Sorteerimismeetodi näide

Näide popmeetodi kohta

Näide nihkemeetodi kohta

Tõukemeetodi näide

Concat meetodi näide

Klass TypeScript

Klassi määratlemine TypeScript

Näide: klassi töönäide

Konstruktor a TypeScript klass

Meetodid sees a TypeScript klass

Klassi eksemplari loomine TypeScript

Kompileerimine TypeScript Klass kuni JavaScript

Klassipärand

Klassi pärimise süntaks:

Juurdepääs modifikaatoritele TypeScript

Liides sisse TypeScript

Liidese süntaks TypeScript

Funktsiooni liidese kasutamine tagastustüübina

Liides funktsiooni parameetrina

Klassi rakendusliides

Funktsioonid sees TypeScript

Funktsioonile helistamine: lisa

Funktsiooni valikulised parameetrid

Määrake parameetritele vaikeväärtused

Puhke parameetrid

Noolefunktsioonid

Milleks noolefunktsiooni kasu on?

TypeScript Enums

Kuidas kuulutada enum?

Deklareerige arvväärtusega enum

Kuidas Enumile juurde pääseda?

Deklareerige Enum stringiväärtusega

Milles on moodulid TypeScript?

Miks on vaja mooduleid? TypeScript?

Ekspordi ja impordi kasutamine

Impordi ja ekspordi süntaks 1:

2. impordi ja ekspordi süntaks:

Mooduli laadija

Näide testCustomer.ts failist testCustomer.js kasutades Requirejs

Klient.ts näide Customer.js-ks, kasutades Requirejs

Nimeruumid sisse TypeScript

Nimeruumi süntaks

Juurdepääs nimeruumile

Ümbritseva keskkonna deklaratsioonid TypeScript

Ümbritsev süntaks

Keskkonnamooduli deklareerimiseks tehke järgmist.

Ümbritsev fail tuleb salvestada järgmiselt: