TypeScript Opetusohjelma: Mikä on, käyttöliittymä, enum, taulukko esimerkin kanssa

Mikä on TypeScript?

TypeScript on superjoukko JavaSkripti. TypeScript on puhdas olio-ohjelmointikieli, joka tukee luokkia, rajapintoja jne. Se on avoimen lähdekoodin kieli, jonka on kehittänyt Microsoft joka staattisesti kokoaa koodin JavaKäsikirjoitus. Se toimii helposti selaimessa tai Nodejsissa.

Kaikki uusimmat ECMAScriptille julkaistut ominaisuudet ovat tuettuja TypeScript ja sen lisäksi TypeScript sillä on omat oliopohjaiset ominaisuudet, kuten rajapinnat, ympäristön määritys, luokan periytyminen jne., jotka auttavat kehittämään suuria sovelluksia, joita muuten olisi vaikea tehdä JavaKäsikirjoitus.

Kuinka ladata ja asentaa TypeScript

Tässä on vaiheittaiset lataus- ja asennusprosessit TypeScript:

Vaihe 1) Lataa ja asenna Nodejs

Siirry nodejsin viralliselle sivustolle: https://nodejs.org/en/download/ ja lataa ja asenna nodejs käyttöjärjestelmäsi mukaan. Yksityiskohtaiset ohjeet nodejien lataamiseen ovat saatavilla täältä: https://www.guru99.com/download-install-node-js.html

Vaihe 2) Tarkista Nodejs- ja npm-versio

Tarkistaaksesi, onko nodejs ja npm asennettu, tarkista vain versio komentokehotteesta.

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

D:\typeproject>npm --version
6.4.1

Joten sinulla on asennettuna nodejs v10 ja npm 6.

Vaihe 3) TypeScript Asennus

Luo projektihakemisto typeproject/ ja suorita npm init alla olevan komennon mukaisesti:

npm init

Vaihe 4) Aloita asennus

Nyt luomme .json-paketin, joka tallentaa projektimme riippuvuudet.

Kun asennus on valmis TypeScript seuraavasti:

npm -g install typescript

Yllä oleva komento huolehtii asennuksesta TypeScript. "-g":n lisääminen npm-asennukseen asentuu TypeScript maailmanlaajuisesti. -g:n etuna on, että osaat käyttää TypeScript TSC -komento mistä tahansa hakemistosta sellaisena kuin se on asennettuna maailmanlaajuisesti. Jos et halua asentaa TypeScript globaalisti käytä alla olevaa komentoa:

npm --save install typescript

Luo src/-kansio projektihakemistoon ja src/-kansioon luo TypeScript tiedosto test.t ja kirjoita koodisi.

Esimerkki: test.ts

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

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

Koota TypeScript koodia Javascript

Kääntääksesi yllä olevan koodin käytä seuraavaa komentoa:

If TypeScript on asennettu maailmanlaajuisesti, käytä alla olevaa komentoa:

tsc test.ts

If TypeScript on asennettu paikallisesti projektiisi, jota sinun on käytettävä polkua TypeScript node_modulesista kuvan mukaisesti:

node_modules/typescript/bin/tsc test.ts

Yllä oleva komento luo test.js-tiedoston, jonka koodi on käännetty javascriptiin.

Esimerkki: test.js

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

Suorittaa Javascript käyttäen Nodejs

Tässä TypeScript opetusohjelmassa, suoritamme test.js:n nodejsissa seuraavasti:

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

Lohdutettu arvo näytetään test.js:n suorituksen yhteydessä

Suorittaa JavaKomentosarja selaimessa

Esimerkiksi:

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

Suorittaa Javascript käyttäen Nodejs

Koota TypeScript koodia Javascript käyttämällä EcmaScript-versiota

TypeScript tukee kaikkia julkaistuja Ecmascript-ominaisuuksia, ja kehittäjät voivat käyttää niitä koodauksen aikana. Mutta kaikki uudet ominaisuudet eivät tue vanhempia selaimia, minkä vuoksi sinun on käännettävä javascript Ecmascriptin vanhempaan versioon. TypeScript tarjoaa kääntäjävaihtoehtoja, jotka voivat tehdä niin.

Esimerkki: test.ts

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

addnumbers(10, 20);

Kääntääksesi valitsemaasi ES-versioon, voit käyttää komennon kohde- tai t-vaihtoehtoa seuraavasti:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Oletusarvoisesti kohde on ES3. Jos haluat muuttaa sitä, voit käyttää yllä olevaa komentoa.

Tällä hetkellä käytämme tässä ES6:ta TypeScript opetusohjelma kohteena:

tsc --target ES6  test.ts

test.t test.js

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

addnumbers(10, 20);

Koodi pysyy ennallaan, koska käyttämäsi nuolitoiminto on ES6-ominaisuus ja sama ei muutu ES6:ksi käännettäessä.

Oletuksena kohde on ES3, joten ilman kohdetta saat test.js:n muodossa:

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

Joten täällä rasvanuoli on muutettu normaaliksi anonyymiksi toiminnoksi.

Muuttujat sisään TypeScript

Muuttujat käytetään arvojen tallentamiseen, ja arvo voi olla merkkijono, numero, Boolen arvo tai lauseke. Mitä tulee muuttujiin TypeScript, ne ovat samanlaisia JavaKäsikirjoitus. Joten opetellaan ilmoittamaan ja antamaan arvoa muuttujille TypeScript.

Muuttujia ei voida käyttää koodissa ilman määrittelyä. Voit käyttää muuttujan ilmoittamiseen

oli avainsana,

antaa avainsana

const avainsana

Työskentely muuttujien kanssa TypeScript on samanlainen kuin javascript, ja javascriptin tuntevien käyttäjien mielestä se on erittäin helppoa. Vain muuttujat, kuten antaa ja const niitä ei juurikaan käytetä verrattuna oli.

Muuttujien ilmoittaminen käyttämällä var

Syntaksi:

var firstname = "Roy";

Katsotaanpa muutamaa TypeScript esimerkkejä avainsanan var toiminnan ymmärtämiseksi ja myös käyttämällä ilmoitettujen muuttujien laajuutta oli avainsana.

Esimerkki 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

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

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

Muuttujien ilmoittaminen letillä

- TypeScript Let-syntaksi on seuraavanlainen:

Syntaksi:

let name="Roy";

Toiminta antaa muuttuja on melkein sama kuin oli, mutta pienellä erolla ja ymmärtää saman käyttämällä an TypeScript esimerkki.

Esimerkiksi:

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

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

Edellä TypeScript esimerkki antaa virheen, mutta sama olisi toiminut hyvin, jos se olisi oli avainsana. Muuttujat käytössä antaa ovat saatavilla ilmoitetun lohkoalueen sisällä, esimerkiksi muuttuja t on käytettävissä vain if-lohkon sisällä, ei koko funktiossa.

Myös jos satut ilmoittamaan muuttujan minkä tahansa funktion sisällä, tai for-silmukan, while-silmukan, TypeScript kytkinlohko, se on käytettävissäsi vain kyseisen lohkon sisällä, eikä siihen viitata lohkon ulkopuolella, ja se antaa virheen, jos muuttujaa käytetään lohkon ulkopuolella. Tämä on tärkein ero var- ja let-avainsanamuuttujien välillä.

Muuttujien ilmoittaminen käyttämällä const

Const tarkoittaa vakiomuuttujia. Ne ovat samanlaisia ​​kuin let-muuttujat, mutta ainoa ero on, että kun arvo on määritetty, sitä ei voi muuttaa.

Syntaksi:

const name;

Esimerkiksi:

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

Käyttäjät voivat siis käyttää const-muuttujia vain silloin, kun he tietävät, ettei heidän tarvitse muuttaa sille määritettyjä arvoja.

Kirjoittaa sisään TypeScript

TypeScript on vahvasti kirjoitettu kieli, kun taas javascript ei ole. Muuttuja, jonka arvo on määritelty merkkijonoksi, voidaan muuttaa numeroksi ilman ongelmia Javascript. Samaa ei suvaita sisällä TypeScript. sisään TypeScript, muuttujan tyyppi määritellään vain alussa ja suorituksen aikana, sen on säilytettävä sama tyyppi, koska kaikki muutokset siihen johtavat käännösaikavirheeseen JavaScriptiin käännettäessä.

Seuraavat ovat tyypit:

  • numero
  • jono
  • boolean
  • mitään
  • mitätön

numero

Ottaa vain kokonaislukuja, kellukkeita, murtolukuja jne.

Syntaksi:

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

Tässä on joitain tärkeitä menetelmiä, joita voidaan käyttää numerotyypeissä:

tofixed() – se muuntaa luvun merkkijonoksi ja säilyttää menetelmälle annetut desimaalit.

toString () – Tämä menetelmä muuntaa luvun merkkijonoksi.

jonkin arvo() – Tämä menetelmä palauttaa luvun primitiivisen arvon.

tarkkuus() – Tämä menetelmä muotoilee numeron tietyn pituiseksi.

Esimerkki: kaikilla merkkijonomenetelmillä

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

jono

Merkkijono: vain merkkijonoarvot

Syntaksi:

let str :string = "hello world";

Tässä on joitain tärkeitä menetelmiä, joita voidaan käyttää merkkijonotyypeissä:

  • jakaa() – tämä menetelmä jakaa merkkijonon taulukkoon.
  • charAt() – tämä menetelmä antaa annetun indeksin ensimmäisen merkin.
  • sisällysluettelo() – tämä menetelmä antaa sille annetun arvon ensimmäisen esiintymän sijainnin.
  • korvata () – tämä menetelmä vaatii 2 merkkijonoa, ensin merkkijonosta etsittävä arvo ja jos se on olemassa, se korvaa toisen ja antaa uuden merkkijonon takaisin.
  • Trimmata () – tämä menetelmä poistaa tyhjät välit merkkijonon molemmilta puolilta.
  • substr() – tämä menetelmä antaa osan merkkijonosta, joka riippuu alku- ja loppupaikasta.
  • alimerkkijono() – tämä menetelmä antaa osan merkkijonosta, joka riippuu alku- ja loppupaikasta. Loppuasemassa oleva hahmo suljetaan pois.
  • Isoin kirjaimeen() -muuntaa merkkijonon isoiksi kirjaimiksi
  • pienellä kirjaimella() – muuntaa merkkijonon pieniksi kirjaimiksi.

Esimerkiksi:

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

Hyväksyy loogiset arvot, kuten tosi, false, 0 ja 1.

Syntaksi:

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

mitään

Syntaksi:

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

Muuttujat on ilmoitettu käyttämällä Kaikki tyyppi voi ottaa muuttujan merkkijonona, numerona, taulukkona, loogisena arvona tai tyhjänä. TypeScript ei aiheuta käännösaikavirhettä; tämä on samanlainen kuin muuttujat, jotka on ilmoitettu kohdassa JavaKäsikirjoitus. Käytä mitä tahansa tyyppimuuttujaa vain, jos et ole varma kyseiseen muuttujaan liitettävän arvon tyypistä.

mitätön

Void-tyyppiä käytetään useimmiten palautustyyppinä funktiolle, jolla ei ole mitään palautettavaa.

Syntaksi:

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

TypeScript Ryhmä

An Ryhmä in TypeScript on tietotyyppi, johon voit tallentaa useita arvoja. Opitaan kuinka ilmoittaa ja määrittää arvot Array-operaatioille TypeScript.

Koska TypeScript on vahvasti kirjoitettu kieli, sinun on kerrottava, mikä on taulukon arvojen tietotyyppi. Muussa tapauksessa se pitää sitä minkä tahansa tyyppisenä.

Ilmoita ja alusta taulukko

Syntaksi:

let nameofthearray : Array<typehere>

esimerkki

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.

Eri tapoja käyttää elementtejä taulukosta

Jotta elementit saadaan taulukosta, arvot alkavat indeksistä 0 taulukon pituuteen.

Esimerkiksi:

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

Voit myös saada elementit taulukosta käyttämällä TypeScript varten silmukka kuten alla:

Käyttäminen TypeScript silmukalle

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 -silmukan käyttäminen

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

Output:
2016
2017
2018
2019

For-of-silmukan käyttö

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

Foreach-silmukan käyttäminen

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

TypeScript Matriisimenetelmät

TypeScript Array-objektilla on monia ominaisuuksia ja menetelmiä, jotka auttavat kehittäjiä käsittelemään taulukoita helposti ja tehokkaasti. Voit saada ominaisuuden arvon määrittämällä taulukonnimi.ominaisuus ja menetelmän tulosteen määrittämällä taulukon nimi.method().

pituus omaisuutta

=> Jos haluat tietää taulukon elementtien lukumäärän, voit käyttää pituusominaisuutta.

Reverse menetelmä

=> Voit kääntää kohteiden järjestyksen taulukossa käyttämällä käänteistä menetelmää.

Lajittelutapa

=> Voit lajitella kohteet taulukossa lajittelumenetelmällä.

Pop menetelmä

=> Voit poistaa taulukon viimeisen kohteen pop-menetelmällä.

Shift menetelmä

=> Voit poistaa taulukon ensimmäisen kohteen siirtomenetelmällä.

Push-menetelmä

=> Voit lisätä arvon taulukon viimeisenä kohteena.

concat-menetelmä

=> Voit yhdistää kaksi taulukkoa yhdeksi taulukkoelementiksi.

Esimerkki pituusominaisuudesta

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

Esimerkki käänteisestä menetelmästä

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

Esimerkki lajittelumenetelmästä

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

Esimerkki pop-menetelmästä

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

Esimerkki siirtomenetelmästä

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

Esimerkki työntömenetelmästä

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

Esimerkki concat-menetelmästä

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]

Luokka TypeScript

TypeScript on superjoukko JavaKäsikirjoitus, joten kaikkea mahdollista JavaKäsikirjoitus on myös mahdollista TypeScript. Class on uusi ominaisuus, joka on lisätty ES6:sta eteenpäin, joten aiemmin JavaKomentosarjan luokkatyyppistä toimintoa kokeiltiin prototyyppitoiminnolla varustetulla funktiolla koodin uudelleenkäyttöön. Luokan avulla koodimme voi olla lähes lähellä kieliä, kuten java, c#, python jne., joissa koodia voidaan käyttää uudelleen. Luokan ominaisuudella TypeScript/JavaScript, se tekee kielestä erittäin voimakkaan.

Luokan määrittäminen TypeScript

Tässä on perusluokan syntaksi TypeScript:

class nameofclass {
     //define your properties here

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

Esimerkki: Toimiva esimerkki luokasta

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

Yllä olevassa esimerkissä sinulla on luokka nimeltä Opiskelijat. Sillä on ominaisuudet age, name ja roll_no.

Rakentaja paikassa a TypeScript luokka

Edellä määrittämämme luokan Opiskelijat -esimerkillä on alla näkyvä konstruktori:

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

Konstruktorimenetelmässä on parametrit ikä, nimi ja roll_no. Konstruktori huolehtii ominaisuuksien alustamisesta luokkaa kutsuttaessa. Kiinteistöihin päästään käyttämällä tätä avainsana. Esimerkki this.age käyttääksesi ikä-ominaisuutta, this.roll_no käyttääksesi roll_no-ominaisuutta jne. Sinulla voi myös olla oletuskonstruktori, kuten alla on esitetty:

constructor () {}

Menetelmät sisällä a TypeScript luokka

Opiskelijoiden luokan esimerkissä on määriteltyjä menetelmiä esimerkiksi getRollNo(), getName(), getAge(), joita käytetään antamaan tietoja ominaisuuksista roll_no, nimi ja ikä.

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

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

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

Luokan esiintymän luominen TypeScript

Esimerkiksi:

In TypeScript Luodaksesi luokan esiintymän sinun on käytettävä uutta operaattoria. Kun luomme luokan esiintymän uudella operaattorilla, saamme objektin, joka voi käyttää luokan ominaisuuksia ja menetelmiä alla esitetyllä tavalla:

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

Kääntäminen TypeScript Luokka kohteeseen JavaKäsikirjoitus

Voit käyttää tsc-komentoa alla kuvatulla tavalla kääntämiseen Javascript.

Command: tsc  Students.ts

Tuotos Javascript käännöskoodi on seuraavanlainen:

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, luokka muunnetaan itse kutsuvaksi funktioksi.

Luokkaperintö

Luokat voidaan periä käyttämällä laajentaa avainsana sisään TypeScript.

Luokkaperinnön syntaksi:

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

}

luokka B voi jakaa luokka A menetelmät ja ominaisuudet.

Tässä on toimiva esimerkki luokasta, joka käyttää periytymistä

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

Sinulla on kaksi luokkaa, henkilö ja opiskelija. Opiskelijaluokka laajentaa Persoonaa, ja Studentille luotu objekti pääsee käsiksi omiin menetelmiinsä ja ominaisuuksiinsa sekä laajentamaansa luokkaan.

Tehkäämme nyt joitain muutoksia yllä olevaan luokkaan.

Esimerkiksi:

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

Muutokset, jotka olet lisännyt edelliseen esimerkkiin verrattuna, on luokassa Student määritetty konstruktori. Rakentajan on otettava samat parametrit kuin perusluokka ja lisättävä mahdolliset omat lisäparametrinsa.

In TypeScript sinun täytyy soittaa Super Will kaikki parametrit kuin tukikohdat paramet siinä. Tämän on oltava ensimmäinen asia, joka tehdään rakentajan sisällä. Super suorittaa laajennetun luokan rakentajan.

Pääsy muokkaajiin sisään TypeScript

TypeScript tukee julkisia, yksityisiä ja suojattuja käyttöoikeusmuutoksia menetelmiisi ja ominaisuuksiisi. Oletusarvoisesti, jos pääsymääritteitä ei anneta, menetelmää tai ominaisuutta pidetään julkisena, ja ne ovat helposti saatavilla luokan objektista.

Yksityisten käyttöoikeuksien määrittäjien tapauksessa niitä ei voi käyttää luokan objektista, ja ne on tarkoitettu käytettäväksi vain luokassa. Niitä ei ole saatavilla peritylle luokalle.

Suojattujen pääsymuutosten tapauksessa ne on tarkoitettu käytettäväksi luokan ja perityn luokan sisällä, eivätkä ne ole käytettävissä luokan objektista.

Esimerkiksi:

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
  • yksityinen: Ominaisuuksiin tai menetelmiin ei pääse käsiksi luokan objektilla eikä myöskään johdetulla luokalla, ne on tarkoitettu käytettäväksi luokan sisällä.
  • Suojattu: luodut objektit eivät myöskään voi käyttää ominaisuuksia ja menetelmiä. Ne ovat saatavilla luokan sisältä ja sitä laajentavan luokan käytettävissä.
  • Julkinen: ominaisuudet ja menetelmät ilmoitetaan ilman avainsanaa. Niihin pääsee helposti käsiksi luokan objektin avulla ulkopuolelta.

Käyttöliittymä sisään TypeScript

Yksi perusominaisuuksista TypeScript on rajapintoja. Rajapinta on joukko määriteltyjä sääntöjä, jotka sitä käyttävän entiteetin on toteutettava. Entiteetti voi olla luokka, funktio tai muuttuja. Käyttöliittymä voi koostua ominaisuuksista ja menetelmistä. Voit määrittää ominaisuudet valinnaisiksi käyttämällä "?" ominaisuuden tai menetelmän syntaksi. Käyttöliittymä lisää vahvan tyyppitarkistuksen mille tahansa funktiolle, muuttujalle tai luokalle, joka toteuttaa käyttöliittymän.

Käyttöliittymän syntaksi sisään TypeScript

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

Olet määrittänyt Dimension-nimisen käyttöliittymän, jolla on ominaisuudet leveys ja korkeus, ja molemmilla on tyyppi merkkijonona.

Nyt tämä käyttöliittymä voidaan toteuttaa muuttujan, funktion tai luokan avulla. Tässä on esimerkki muuttujasta, joka toteuttaa käyttöliittymän Dimension.

Esimerkiksi:

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

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

Käyttöliittymän Dimension allekirjoituksella on leveys ja korkeus, ja molemmat ovat pakollisia. Jos käyttöliittymää toteutettaessa jokin ominaisuuksista puuttuu tai tyyppiä muutetaan, se antaa käännösaikavirheen käännettäessä koodia javascriptiin.

Yllä oleva koodi, kun se on käännetty javascriptiin, näyttää seuraavalta:

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

Katsotaanpa nyt, kuinka käyttöliittymää käytetään funktion kanssa.

Käyttöliittymän käyttö funktiossa palautustyyppinä

Esimerkiksi:

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

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

Yllä olevassa esimerkissä käyttöliittymä Dimension on toteutettu funktiolla getDimension() palautustyyppinä. GetDimension()-palautustyypin on vastattava Interface Dimension -kohdassa mainittuja ominaisuuksia ja tyyppiä.

Käännetty koodi Javascript tulee olemaan seuraava:

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

Käännöksen aikana, jos palautustyyppi ei täsmää käyttöliittymän kanssa, se antaa virheilmoituksen.

Käyttöliittymä toimintoparametrina

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"

Joten yllä olevassa esimerkissä olet käyttänyt Interface Dimension -funktiota parametrina getDimension(). Kun kutsut funktiota, sinun on varmistettava, että sille välitetty parametri vastaa määritettyä käyttöliittymäsääntöä.

Käännetty koodi Javascript tulee olemaan seuraava:

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

Luokan toteuttava käyttöliittymä

Jotta voit käyttää käyttöliittymää luokan kanssa, sinun on käytettävä avainsanaa työkoneet.

Käyttöliittymän toteuttavan luokan syntaksi:

class NameofClass implements InterfaceName {
}

Seuraava esimerkki näyttää käyttöliittymän käytön luokan kanssa.

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

Yllä olevassa esimerkissä olet määrittänyt käyttöliittymän Dimension ominaisuuksilla leveys ja korkeus sekä tyyppiä string että menetelmän nimeltä getWidth(), jolla on palautusarvo merkkijonona.

Käännetty koodi Javascript tulee olemaan seuraava:

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

Toiminnot TypeScript

Toiminnot ovat joukko ohjeita, jotka suoritetaan tehtävän suorittamiseksi. sisään Javascript, suurin osa koodista on kirjoitettu funktioiden muodossa ja sillä on tärkeä rooli. sisään TypeScript, sinulla on luokka, rajapinnat, moduulit, nimitilat käytettävissä, mutta silti funktioilla on tärkeä rooli. Ero funktion välillä javascript ja TypeScript funktio on käytettävissä oleva palautustyyppi TypeScript toiminto.

JavaSkriptitoiminto:

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

TypeScript toiminto:

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

Yllä oleviin funktioihin lisätään funktion nimi, parametrit ovat a1ja b1 molemmilla on tyyppi numerona, ja palautustyyppi on myös numero. Jos satut välittämään merkkijonon funktiolle, se antaa käännösaikavirheen kääntäessään sitä JavaSkripti.

Kutsun soittaminen toimintoon: 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'.

Parametrit a1 ja b1 ovat pakollisia parametreja ja aiheuttavat virheen, jos niitä ei vastaanoteta tällä tavalla. Myös parametrin tyyppi ja palautustyyppi ovat erittäin tärkeitä, eivätkä ne voi muuttua määrityksen jälkeen.

Valinnaiset parametrit funktiolle

JavaScriptissä kaikki funktioiden parametrit ovat valinnaisia ​​ja niitä pidetään määrittelemättöminä, jos niitä ei ole hyväksytty. Mutta sama ei pidä paikkaansa TypeScript, kun olet määrittänyt parametrit, sinun on lähetettävä ne myös, mutta jos haluat pitää minkä tahansa parametrin valinnaisena, voit tehdä sen käyttämällä ? parametrin nimeä vastaan ​​alla olevan kuvan mukaisesti:

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.

Huomaa, että valinnaiset parametrit on määritettävä funktiossa vain viimeisessä, et voi pitää ensimmäistä parametria valinnaisena ja toista parametria pakollisena. Kun kutsut funktiota yhdellä parametrin kääntäjällä, se antaa virheen. Joten on tarpeen säilyttää valinnaiset parametrit lopussa.

Määritä oletusarvot parametreille

Voit määrittää oletusarvot parametreille alla olevan kuvan mukaisesti:

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

Kuten valinnaiset parametrit, myös tässä oletusalustetut parametrit on säilytettävä funktion lopussa.

Lepoparametrit

Olet nähnyt kuinka TypeScript käsittelee pakolliset parametrit, valinnaiset parametrit ja oletusarvoiset alustetut parametrit. Nyt tarkastellaan lepoparametreja. Lepoparametrit ovat joukko valinnaisia ​​parametreja, jotka on määritelty yhdessä, ja ne määritellään käyttämällä kolmea pisteitä (…) jota seuraa parametrin nimi, joka on taulukko.

Lepo-parametrien syntaksi:

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

Kuten yllä näkyy, loput parametrit määritellään käyttämällä (…param-nimi); loput param on taulukko, jonka etuliitteenä on kolme pistettä. Taulukon kaikki parametrit välitetään sille. Voit kutsua funktiota alla olevan esimerkin mukaisesti:

Esimerkiksi:

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

Nuolitoiminnot

Nuolitoiminto on yksi tärkeimmistä ES6:ssa julkaistuista ominaisuuksista, ja se on saatavilla TypeScript liian. Nuolifunktion syntaksissa on paksu nuoli, jonka vuoksi funktiota kutsutaan nuolifunktioksi.

Nuolifunktion syntaksi:

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

Mitä Arrow Functionia käytetään?

Katsotaanpa esimerkkiä ymmärtääksesi Arrow-funktion käyttötapauksen:

Esimerkiksi:

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

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

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

Olet luonut anonyymin funktion, jolla on ominaisuus tämä. Pisteet alustetaan 0:ksi ja menetelmä getScore, jolla on sisäisesti setTimeout, ja 1 sekunnissa se vahvistaa tämän. Konsoloitu arvo antaa undefinedin, vaikka olet määrittänyt ja alustanut tämän. Ongelma tässä on this avainsana. SetTimeoutin sisällä olevalla funktiolla on oma tämä, ja se yrittää viitata tulokseen sisäisesti, ja koska sitä ei ole määritelty, antaa undefined.

Sama voidaan tehdä käyttämällä nuolitoimintoa alla kuvatulla tavalla:

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

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

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

Olet vaihtanut setTimeout-toiminnon nuolifunktioksi alla olevan kuvan mukaisesti:

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

Nuolifunktiolla ei ole omaa tätä määritelty ja se jakaa emonsa tätä, joten ulkopuolella ilmoitetut muuttujat ovat helposti käytettävissä käyttämällä tätä nuolifunktion sisällä. Ne ovat hyödyllisiä lyhyemmän syntaksin vuoksi sekä takaisinkutsuissa, tapahtumakäsittelijöissä, sisäisissä ajoitustoiminnoissa jne.

TypeScript Enums

TypeScript Enum on objekti, jossa on kokoelma toisiinsa tallennettuja arvoja. Javascript ei tue enumeita. Suurin osa ohjelmointikieli pitää Java, C, C++ tukee TypeScript Enum ja se saatavana myös TypeScript liian. Enumit määritellään avainsanan enum avulla.

Kuinka julistaa enum?

Syntaksi:

enum NameofEnum {
   value1,
   value2,
    ..
}

Esimerkki: Enum

enum Directions {
North,
South,
East,
West
}

Yllä olevassa esimerkissä olet määrittänyt luettelon nimeltä Suuntaviivat. Annettu arvo on pohjoinen, etelä, itä, länsi. Arvot numeroidaan 0:sta enumin ensimmäiselle arvolle ja sen jälkeen kasvavat 1:llä seuraavaa arvoa varten.

Ilmoita enum numeerisella arvolla

Oletusarvoisesti, jos enumille ei anneta mitään arvoa, se pitää sitä numerona, joka alkaa nollasta. Seuraavassa esimerkissä on enum, jossa on numeerinen arvo.

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

Voit myös määrittää enumille aloitusarvon ja seuraavat enum-arvot saavat lisätyt arvot. Esimerkiksi:

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

Nyt enum-arvo North alkaa viidellä, joten etelä saa arvon 5, itä = 6 ja länsi = 7.

Voit myös määrittää valitsemiasi arvoja oletusarvojen sijaan. Esimerkiksi:

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

Kuinka päästä Enumiin?

Seuraava esimerkki näyttää, kuinka käytät Enumia koodissasi:

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

JavaScriptiin käännetty koodi on seuraava:

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

Koska Javascript ei tue enumeita, se muuntaa enumin itse kutsutuiksi funktioiksi, kuten yllä on esitetty.

Ilmoita Enum merkkijonoarvolla

Voit määrittää haluamasi merkkijonoarvot alla olevan esimerkin mukaisesti:

Esimerkiksi:

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

JavaScriptiin käännetty koodi on seuraava:

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

Mitä moduulit sisältävät TypeScript?

Vuonna luodut tiedostot TypeScript on yleinen pääsy, mikä tarkoittaa, että yhdessä tiedostossa ilmoitettuja muuttujia on helppo käyttää toisessa tiedostossa. Tämä globaali luonne voi aiheuttaa koodiristiriitoja ja ongelmia suorituksessa ajon aikana. Sinulla on vienti- ja tuontimoduulitoiminnot, joita voidaan käyttää globaalien muuttujien ja funktioiden ristiriitojen välttämiseen. Tämä ominaisuus on käytettävissä JavaKäsikirjoitus ES6-julkaisulla ja myös tuettu TypeScript.

Miksi tarvitset moduuleja TypeScript?

Seuraava esimerkki näyttää ongelman ilman moduuleja:

Esimerkki testi1.ts

let age : number = 25;

Olet määrittänyt muuttuvan iän tyyppinumerolle test1.ts:ssä.

Esimerkki testi2.ts

Test2.ts-tiedostossa pääset helposti käsiksi muuttujaan ikä määritelty test1.t:ssä ja muokkaa sitä myös alla olevan kuvan mukaisesti:

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

Joten yllä oleva tapaus voi aiheuttaa paljon ongelmia, koska muuttujat ovat maailmanlaajuisesti saatavilla ja niitä voidaan muokata.

Kanssa Moduulit, kirjoitettu koodi pysyy tiedoston maa-asetuksena, eikä sitä voida käyttää sen ulkopuolella. Jos haluat käyttää mitä tahansa tiedostosta, se on vietävä vientiavainsanalla. It käytetään, kun haluat, että muuttujaa, luokkaa, funktiota tai käyttöliittymää käytetään toisessa tiedostossa. Tuo käytetään, kun haluat käyttää myös vietyä muuttujaa, luokkaa tai käyttöliittymää tai funktiota. Tällöin kirjoitettu koodi pysyy ennallaan tiedostossa, ja vaikka määrität samat muuttujien nimet, niitä ei sekoiteta ja ne toimivat paikallisesti siinä tiedostossa, jossa ne on ilmoitettu.

Vienti- ja tuontitoimintojen käyttö

On monia tapoja viedä ja tuoda. Joten keskustellaan tässä syntaksista, jota käytetään enimmäkseen.

Tuonnin ja viennin syntaksi 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"

Tässä on toimiva esimerkki viennistä ja tuonnista.

Esimerkiksi:

testi1.ts

export let age: number = 25;

Vie avainsanaa käytetään ikämuuttujan jakamiseen toisessa tiedostossa.

testi2.ts

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

Tuo avainsanaa käytetään pääsyyn ikä muuttuja, ja sinun on määritettävä tiedoston sijainti yllä olevan kuvan mukaisesti.

Syntaksi tuontia ja vientiä varten 2:

On toinenkin tapa viedä ja tuoda, ja sen syntaksi on seuraavanlainen:

export = classname;

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

Kun käytät vienti = moduulin viemiseksi tuonnissa on käytettävä vaatimaa ("moduulin nimen tiedostopolku") sen tuomiseen.

Tässä on toimiva esimerkki yllä olevasta tapauksesta:

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

Moduulilataaja

Moduulit eivät voi toimia yksinään, joten tarvitset moduulilataajaa tuontiriippuvuuksien paikallistamiseksi, kuten olet nähnyt TypeScript esimerkkejä yllä. Käytettävissä oleva moduulilataaja on CommonJS nodejsille ja Require.js toimimaan selaimessa.

Kääntääksesi koodin CommonJS-moduulilla käytä seuraavaa komentoa:

tsc --module commonjs testCustomer.ts

Kääntääksesi koodin Requirejs-moduulilla käytä seuraavaa komentoa:

tsc --module amd testCustomer.ts

Riippuvaiset tiedostot muunnetaan js-tiedostoksi yllä olevalla komennolla.

Esimerkki testCustomer.ts-tiedostosta testCustomer.js-tiedostoksi Requirejsin avulla

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

Esimerkki Customer.t:stä ​​Customer.js:ään käyttämällä Requirejs-komentoa

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

Testaaksesi sitä vaatimalla.js:lla, sinun on luotava tiedosto nimeltä main.js, jossa on viittaus riippuvuuksiin kuvan mukaisesti.

Tässä on kansiorakenne:

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

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

Moduulilataaja

Nimiavaruudet sisään TypeScript

Nimiavaruudessa on periaatteessa kokoelma luokkia, rajapintoja, muuttujia ja toimintoja yhdessä tiedostossa.

Nimiavaruuden syntaksi

namespace name{

export class {
}

export interface {
}

export const constname;

}

Tähän liittyvä koodi on saatavilla yhdessä nimiavaruudessa.

Nimitilan toimintaesimerkki: 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;
        }
    }
}

Nimiavaruuden nimi on Opiskelijaasetukset, olet lisännyt käyttöliittymän StudDetails , funktion addSpace ja luokan nimeltä Student.

Pääsy nimiavaruuteen

Seuraavassa on koodi, jossa käytät nimiavaruutta StudentSetup.

testStudentSetup.ts

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

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

Nimiavaruuden sisällä olevaan luokkaan, käyttöliittymään, funktioon on viitattava nimiavaruusesimerkin nimellä StudentSetup.addSpace päästäksesi toimintoon, StudentSetup.Student päästäksesi luokkaan.

Voit koota molemmat tiedostot yhdeksi js:ksi alla olevan kuvan mukaisesti:

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

Tarkista tulos komentokehotteessa käyttämällä alla olevaa komentoa:

node namespace.js

Se näyttää ulostulon muodossa:

The name is: H a r r y

Ambient-ilmoitukset sisään TypeScript

TypeScript antaa sinun käyttää kolmannen osapuolen javascript-tiedostoja käyttämällä ambient-ilmoitusta. Tämän ominaisuuden etuna on, että sinun ei tarvitse kirjoittaa uudelleen ja silti käyttää kaikkia kirjaston ominaisuuksia TypeScript.

Ambient-syntaksi

Ambient-moduulin ilmoittaminen:

declare module moduleName {
   //code here
}

Ambient-tiedosto on tallennettava muodossa:

filename.d.ts

Käyttääksesi tiedostoa tiedostonimi.d.ts .ts-tiedostossasi sinun on viitattava siihen seuraavasti:

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

Ympäristötyypin ilmoitus sisään TypeScript siinä on viittaus kolmannen osapuolen kirjastoon ja se ilmoittaa vaaditut toiminnot uudelleen omalla tyypillllään. Oletetaan esimerkiksi, että sinulla on pieni javascript-kirjasto, kuten alla näkyy:

Kolmannen osapuolen JavaKomentosarjatiedosto: testString.js

Esimerkki: 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();
    }
};

Sinulla on StringChecks-niminen objekti, jolla on toimintoja, kuten isString, convertToUpperCase, convertToLowerCase ja converToStringBold.

Ambient-moduulin luominen sisään TypeScript

Nyt luodaan ambient-moduuli, jossa on viittaus yllä oleviin js-toimintoihin ja lisätään myös tyyppitarkistus vaatimusten mukaisesti.

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

Sinun on määritettävä moduulin nimi TestStringiksi ja vietävä käyttöliittymä StringsFunc.

isString(str: merkkijono): looginen

=> Tämä ottaa parametrin merkkijonona ja palautustyyppi on boolen. Kun käytät .ts-tiedostossasi, jos satut välittämään parametrin numerona tai muuna kuin merkkijonona, saat käännöstyyppivirheen.

convertToUpperCase(str:string): merkkijono

=> Tämä ottaa argumentin merkkijonona ja palauttaa merkkijonon. Sama pätee convertToLowerCase(str: merkkijono)
: merkkijono; ja convertToStringBold(str: string): merkkijono
;

Koska javascript-tiedostossa objektin nimi on StringChecks, meidän on lopuksi viitattava samaan .d.ts-tiedostossa, joka tehdään seuraavasti:

declare var StringChecks: TestString.StringsFunc;

Ambient-moduulin käyttö sisään TypeScript

Nyt tässä on test.ts-tiedosto, jossa käytetään ambient-tiedostoa tstring.d.ts

Esimerkki: 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);

Koota TypeScript tsc test.ts to 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);

Nyt voit käyttää test.js-tiedostoa html-tiedostossa ja myös kirjastotiedostoa testString.js

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

Tämä on konsolissa näkyvä tulos:

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

TypeScript Historia

Katso tärkeitä maamerkkejä historiasta TypeScript:

  • Kahden vuoden sisäisen kehityksen jälkeen klo Microsoft. TypeScript 0.9, julkaistu vuonna 2013
  • Lisätuki geneerisille lääkkeille TypeScript 1.0 julkaistiin Build 2014:ssä
  • Heinäkuussa 2014 uusi TypeScript Tuli kääntäjä, joka on viisi kertaa nopeampi kuin edellinen versio.
  • Heinäkuussa 2015 tuki ES6-moduuleille, nimiavaruuden avainsana, for, of support, sisustajille.
  • Marraskuussa 2016 lisätty ominaisuus, kuten avain- ja hakutyypit kartoitetut tyypit ja lepo.
  • 27. maaliskuuta 2018 ehdolliset tyypit, parannettu avain risteystyypeillä, jotka on lisätty TypeScript.

Miksi käyttää TypeScript?

Tässä on tärkeitä käytön etuja/hyötyjä TypeScript

  • Iso ja monimutkainen projekti mukana JavaSkriptejä on vaikea koodata ja ylläpitää.
  • TypeScript auttaa paljon koodin organisoinnissa ja kuitenkin päästää eroon suurimmasta osasta kääntämisen aikana ilmeneviä virheitä.
  • TypeScript tukee JS-kirjastoja ja API-dokumentaatiota
  • Se on valinnaisesti kirjoitettu skriptikieli
  • TypeScript Koodi voidaan muuntaa tavalliseksi JavaScript Code
  • Parempi koodin strukturointi ja olio-ohjelmointitekniikat
  • Mahdollistaa paremman kehitysaikatyökalutuen
  • Se voi laajentaa kielen tavallisten sisustajien ulkopuolelle, async/wait

Kuka käyttää TypeScript?

Tässä on joitain yleisimpiä sovelluksia TypeScript:

  • Kulmikas joukkue käyttää TypeScript.
  • NodeJS- ja NPM-asennus
  • TypeScript Asennus
  • Koota TypeScript koodia Javascript
  • Suorita koodi Nodejsilla
  • Suorittaa Javascript selaimessa
  • Koota TypeScript koodia Javascript käyttämällä EcmaScript-versiota
  • Voit helposti kääntää sisään kirjoitetun koodin TypeScript että JavaKomentosarja käyttäen NodeJS:ää.
  • Siis työskentelyyn TypeScript sinun on ensin ladattava ja asennettava NodeJS.

Yhteenveto

  • TypeScript on superjoukko JavaSkripti. TypeScript on puhdas olio-ohjelmointikieli, joka tukee luokkia, rajapintoja jne.
  • TypeScript tukee kaikkia julkaistuja Ecmascript-ominaisuuksia, ja kehittäjät voivat käyttää niitä koodauksen aikana.
  • Muuttujia käytetään arvojen tallentamiseen, ja arvo voi olla merkkijono, numero, Boolen arvo tai lauseke.
  • In TypeScript, muuttujan tyyppi määritellään vain alussa ja suorituksen aikana, sen on säilytettävä sama tyyppi, koska kaikki muutokset siihen johtavat käännösaikavirheeseen JavaScriptiin käännettäessä.
  • Joukko sisään TypeScript on tietotyyppi, johon voit tallentaa useita arvoja.
  • Class on uusi ominaisuus, joka on lisätty ES6:sta eteenpäin, joten aiemmin JavaKomentosarjan luokkatyyppistä toimintoa kokeiltiin prototyyppitoiminnolla varustetulla funktiolla koodin uudelleenkäyttöön.
  • TypeScript tukee julkisia, yksityisiä ja suojattuja käyttöoikeusmuutoksia menetelmiisi ja ominaisuuksiisi.
  • Yksi perusominaisuuksista TypeScript on rajapintoja. Rajapinta on joukko määriteltyjä sääntöjä, jotka sitä käyttävän entiteetin on toteutettava.
  • Toiminnot ovat joukko ohjeita, jotka suoritetaan tehtävän suorittamiseksi.
  • TypeScript Enum on objekti, jossa on kokoelma toisiinsa tallennettuja arvoja.