TypeScript Tutorial: Wat is, Interface, Enum, Array met voorbeeld

Wat is TypeScript?

TypeScript is een superset van JavaScript. TypeScript is een pure objectgeoriënteerde programmeertaal die klassen, interfaces, enz. ondersteunt. Het is een open-sourcetaal ontwikkeld door Microsoft waarmee de code statisch wordt gecompileerd JavaScript. Het kan eenvoudig worden uitgevoerd in een browser of Nodejs.

Alle nieuwste functies die voor ECMAScript zijn uitgebracht, worden ondersteund in TypeScript en daarnaast TypeScript heeft zijn eigen objectgeoriënteerde functies zoals interfaces, omgevingsdeclaratie, klasse-erfenis, enz. die helpen bij het ontwikkelen van een grote applicatie die anders moeilijk te doen zou zijn JavaScript.

Hoe te downloaden en installeren TypeScript

Hier vindt u het stapsgewijze proces om te downloaden en te installeren TypeScript:

Stap 1) Download en installeer Nodejs

Ga naar de officiële site van nodejs: https://nodejs.org/en/download/ en download en installeer nodejs volgens uw besturingssysteem. De gedetailleerde instructies over hoe u nodejs downloadt, zijn hier beschikbaar: https://www.guru99.com/download-install-node-js.html

Stap 2) Controleer de Nodejs- en npm-versie

Om te controleren of nodejs en npm zijn geïnstalleerd, controleert u gewoon de versie in uw opdrachtprompt.

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

D:\typeproject>npm --version
6.4.1

Dus je hebt nodejs v10 en npm 6 geïnstalleerd.

Stap 3) TypeScript Installatie

Maak uw projectmap typeproject/ en voer npm init uit, zoals weergegeven in de onderstaande opdracht:

npm init

Stap 4) Start de installatie

Nu gaan we pakket .json maken waarin de afhankelijkheden voor ons project worden opgeslagen.

Eenmaal klaar met installeren TypeScript als volgt:

npm -g install typescript

Het bovenstaande commando zorgt voor de installatie TypeScriptDoor "-g" toe te voegen aan npm install wordt de installatie uitgevoerd TypeScript wereldwijd. Het voordeel van het gebruik van -g is dat je TypeScript tsc opdracht vanuit elke map, aangezien deze wereldwijd is geïnstalleerd. Voor het geval u niet wilt installeren TypeScript gebruik globaal onderstaande opdracht:

npm --save install typescript

Maak de map src/ aan in uw projectmap en maak deze in de map src/ TypeScript bestand test.ts en schrijf uw code.

Voorbeeld: test.ts

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

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

Compileren TypeScript code aan Javascript

Om bovenstaande code te compileren, gebruikt u de volgende opdracht:

If TypeScript is wereldwijd geïnstalleerd, gebruik onderstaande opdracht:

tsc test.ts

If TypeScript wordt lokaal geïnstalleerd voor uw project waarvan u het pad moet gebruiken TypeScript van node_modules zoals getoond:

node_modules/typescript/bin/tsc test.ts

Met de bovenstaande opdracht wordt een test.js-bestand gemaakt en wordt de code gecompileerd naar JavaScript.

Voorbeeld: test.js

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

Uitvoeren Javascript met behulp van Nodejs

In deze TypeScript tutorial, zullen we test.js als volgt in nodejs uitvoeren:

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

De waarde consoled wordt weergegeven bij de uitvoering van test.js

Uitvoeren JavaScript in browser

Voorbeeld:

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

Compileren TypeScript code aan Javascript met behulp van de EcmaScript-versie

TypeScript ondersteunt alle Ecmascript-functies die zijn uitgebracht, en ontwikkelaars kunnen deze gebruiken tijdens het coderen. Maar niet alle nieuwe functies worden ondersteund op oudere browsers, waardoor u javascript moet compileren naar een oudere versie van Ecmascript. TypeScript biedt compileropties die dit kunnen doen.

Voorbeeld: test.ts

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

addnumbers(10, 20);

Om te compileren naar de ES-versie van uw keuze, kunt u de target- of t-optie in uw opdracht als volgt gebruiken:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Standaard is het doel ES3. Als u dit wilt wijzigen, kunt u de bovenstaande opdracht gebruiken.

Momenteel gebruiken we ES6 hierbij TypeScript tutorial als doel:

tsc --target ES6  test.ts

test.ts naar test.js

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

addnumbers(10, 20);

De code blijft zoals hij is, aangezien de pijlfunctie die u hebt gebruikt een ES6-functie is en dezelfde bij het compileren naar ES6 niet wordt gewijzigd.

Standaard is het doel ES3, dus zonder doel krijg je test.js als:

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

Dus hier is de dikke pijl veranderd in een normale anonieme functie.

Variabelen in TypeScript

Variabelen worden gebruikt om waarden op te slaan, en de waarde kan een tekenreeks, getal, Booleaanse waarde of een expressie zijn. Als het gaat om variabelen in TypeScript, ze zijn vergelijkbaar met JavaScript. Laten we dus leren waarden te declareren en toe te wijzen aan variabelen in TypeScript.

Variabelen kunnen niet in code worden gebruikt zonder te definiëren. Om een variabele te declareren die u kunt gebruiken

var zoekwoord,

laten trefwoord

const trefwoord

Werken met variabelen in TypeScript is vergelijkbaar met javascript, en gebruikers die bekend zijn met javascript zullen het erg makkelijk vinden. Alleen variabelen zoals laten en const worden niet veel gebruikt in vergelijking met var.

Variabelen declareren met var

Syntax:

var firstname = "Roy";

Laten we er een paar bekijken TypeScript voorbeelden om de werking van het trefwoord var te begrijpen en ook de reikwijdte van de variabelen die zijn gedeclareerd met behulp van var trefwoord.

Voorbeeld 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

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

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

Variabelen declareren met let

De TypeScript syntaxis voor let is zoals hieronder weergegeven:

Syntax:

let name="Roy";

De werking van laten variabele is bijna hetzelfde als var, maar met een klein verschil en zullen hetzelfde begrijpen met behulp van een TypeScript voorbeeld.

Voorbeeld:

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

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

Boven TypeScript voorbeeld genereert een fout, maar hetzelfde zou prima hebben gewerkt als het met de var trefwoord. Variabelen gebruiken laten zijn beschikbaar binnen het gedeclareerde blokbereik, de variabele t is bijvoorbeeld alleen beschikbaar binnen het if-blok en niet voor de gehele functie.

Ook als je toevallig een variabele declareert binnen een functie, of for-loop, while-loop, TypeScript schakelblok, zal het alleen voor u beschikbaar zijn binnen dat blok en geen verwijzing ernaar buiten het blok, en zal het een fout genereren als de variabele buiten het blok wordt gebruikt. Dit is het belangrijkste verschil tussen door het trefwoord gedeclareerde variabelen var en let.

Variabelen declareren met const

Const betekent constante variabelen. Ze lijken op let-variabelen, met het enige verschil dat als er eenmaal een waarde aan is toegewezen, deze niet meer kan worden gewijzigd.

Syntax:

const name;

Voorbeeld:

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

Gebruikers kunnen const-variabelen dus alleen gebruiken in gevallen waarin ze weten dat ze de eraan toegewezen waarden niet hoeven te wijzigen.

Typt in TypeScript

TypeScript is een sterk getypeerde taal, terwijl javascript dat niet is. Een variabele waarvan de waarde is gedefinieerd als een string kan zonder problemen worden gewijzigd in een getal in Javascript. Hetzelfde wordt niet getolereerd TypeScript. in TypeScript, het type van een variabele wordt alleen aan het begin gedefinieerd en tijdens de uitvoering moet het hetzelfde type behouden. Wijzigingen hierin zullen leiden tot een compile-time error tijdens de compilatie naar javascript.

Hieronder volgen de typen:

Telefoon Nummer
Draad
Boolean
Elke
Leegte

Telefoon Nummer

Neemt alleen gehele getallen, floats, breuken, enz.

Syntax:

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

Hier zijn enkele belangrijke methoden die kunnen worden gebruikt voor nummertypen:

naar Vast() – het converteert het getal naar een string en behoudt de decimalen die aan de methode zijn gegeven.

toString () – deze methode converteert het getal naar een string.

waarde van() – deze methode geeft de primitieve waarde van het getal terug.

naarPrecisie() – deze methode formatteert het getal tot een opgegeven lengte.

Voorbeeld: met alle String-methoden

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

Draad

String: alleen stringwaarden

Syntax:

let str :string = "hello world";

Hier zijn enkele belangrijke methoden die kunnen worden gebruikt voor String-typen:

spleet() – deze methode splitst de string in een array.
karakter() – deze methode geeft het eerste teken voor de opgegeven index.
index van() – deze methode geeft de positie van het eerste exemplaar voor de waarde die eraan is gegeven.
vervangen () – deze methode heeft 2 strings nodig, eerst de waarde die in de string moet worden gezocht en indien aanwezig zal deze de tweede string vervangen en een nieuwe string teruggeven.
trimmen () – deze methode verwijdert witte spaties aan beide zijden van de string.
substr() – deze methode geeft een deel van de string dat afhangt van de positie die als begin en einde is opgegeven.
deelstring() – deze methode geeft een deel van de string dat afhangt van de positie die als begin en einde is opgegeven. Het karakter op de eindpositie wordt uitgesloten.
naarHoofdletters() - converteert de tekenreeks naar hoofdletters
naarLowerCase() – converteert de tekenreeks naar kleine letters.

Voorbeeld:

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

Accepteert logische waarden zoals waar, onwaar, 0 en 1.

Syntax:

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

Elke

Syntax:

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

Variabelen gedeclareerd met elke type kan de variabele aannemen als een string, getal, array, boolean of void. TypeScript zal geen compileerfout veroorzaken; dit is vergelijkbaar met de variabelen die zijn gedeclareerd in JavaScript. Gebruik een type variabele alleen als u niet zeker weet welk type waarde aan die variabele gekoppeld zal worden.

Leegte

Het ongeldige type wordt meestal gebruikt als retourtype voor een functie die niets te retourneren heeft.

Syntax:

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

TypeScript reeks

An reeks in TypeScript is een gegevenstype waarin u meerdere waarden kunt opslaan. Laten we leren hoe u waarden voor Array-bewerkingen kunt declareren en toewijzen in TypeScript.

Sinds TypeScript is een sterk getypeerde taal, je moet vertellen wat het datatype van de waarden in een array zal zijn. Anders zal het het beschouwen als van type any.

Een array declareren en initialiseren

Syntax:

let nameofthearray : Array<typehere>

Voorbeeld

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.

Verschillende manieren om toegang te krijgen tot elementen uit een array

Om de elementen uit een array te halen, beginnen de waarden vanaf index 0 tot de lengte van de array.

Voorbeeld:

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

Je kunt de elementen ook uit een array halen met behulp van TypeScript voor lus zoals hieronder aangegeven:

gebruik TypeScript for loop

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-lus gebruiken

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

Output:
2016
2017
2018
2019

For-of-lus gebruiken

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

Foreach-lus gebruiken

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

TypeScript Array-methoden

TypeScript Array-object heeft veel eigenschappen en methoden waarmee ontwikkelaars arrays eenvoudig en efficiënt kunnen verwerken. U kunt de waarde van een eigenschap verkrijgen door arrayname.property op te geven, en de uitvoer van een methode door array name.method() op te geven.

lengte eigenschap

=> Als u het aantal elementen in een array wilt weten, kunt u de eigenschap length gebruiken.

Reverse methode

=> U kunt de volgorde van items in een array omkeren met behulp van een omgekeerde methode.

Sorteer methode

=> U kunt de items in een array sorteren met behulp van de sorteermethode.

Pop-methode

=> U kunt het laatste item van een array verwijderen met behulp van een pop-methode.

Shift methode

=> U kunt het eerste item van een array verwijderen met de shift-methode.

Push-methode

=> U kunt waarde toevoegen als het laatste item van de array.

concat methode

=> U kunt twee arrays samenvoegen tot één arrayelement.

Voorbeeld voor lengte-eigenschap

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

Voorbeeld voor omgekeerde methode

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

Voorbeeld voor sorteermethode

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

Voorbeeld voor pop-methode

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

Voorbeeld voor shift-methode

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

Voorbeeld voor push-methode

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

Voorbeeld voor concat-methode

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]

Klasse binnen TypeScript

TypeScript is een superset van JavaScript, dus wat er ook mogelijk is om te doen in JavaScript is ook mogelijk in TypeScript. Klasse is een nieuwe functie die vanaf ES6 is toegevoegd, dus eerder JavaScript de klasse type functionaliteit werd geprobeerd met behulp van een functie met prototype functionaliteit om code te hergebruiken. Met behulp van klasse, kunt u onze code bijna dicht bij talen zoals Java, C#, Python, etc. hebben, waar de code kan worden hergebruikt. Met de functie van klasse in TypeScript/JavaScript maakt de taal heel krachtig.

Een klasse definiëren in TypeScript

Hier is een basisklassesyntaxis TypeScript:

class nameofclass {
     //define your properties here

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

Voorbeeld: een werkend voorbeeld op Class

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

In het bovenstaande voorbeeld heb je een klas met de naam Studenten. Het heeft de eigenschappen leeftijd, naam en rolnummer.

Constructeur in een TypeScript Klasse

Het voorbeeld van de klasse Studenten dat we hierboven hebben gedefinieerd, heeft een constructor zoals hieronder weergegeven:

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

De constructormethode heeft parameters age, name en roll_no. De constructor zorgt voor het initialiseren van de eigenschappen wanneer de klasse wordt aangeroepen. De eigenschappen zijn toegankelijk via dit trefwoord. Voorbeeld this.age om toegang te krijgen tot de age-eigenschap, this.roll_no om toegang te krijgen tot roll_no, enz. U kunt ook een standaardconstructor hebben, zoals hieronder weergegeven:

constructor () {}

Methoden binnen een TypeScript Klasse

In het voorbeeld van de klasse Studenten zijn methoden gedefinieerd zoals getRollNo(), getName(), getAge() die worden gebruikt om details te geven over de eigenschappen roll_no, name en age.

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

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

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

Instantie van klasse maken in TypeScript

Voorbeeld:

In TypeScript om een instantie van een klasse te maken moet u de operator new gebruiken. Wanneer we een instantie van een klasse maken met behulp van de operator new krijgen we het object dat toegang heeft tot de eigenschappen en methoden van de klasse zoals hieronder weergegeven:

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

Het compileren TypeScript Klasse naar JavaScript

U kunt de opdracht tsc gebruiken, zoals hieronder weergegeven, om naar te compileren Javascript.

Command: tsc  Students.ts

De uitvoer van Javascript code bij het compileren is zoals hieronder weergegeven:

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, wordt de klasse omgezet in een zelfaangeroepen functie.

Klasse Overerving

Klassen kunnen worden overgenomen met behulp van de verlengen trefwoord in TypeScript.

Syntaxis van klasse-overerving:

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

}

klasse B zal kunnen delen klasse A, eerste klasse methoden en eigenschappen.

Hier is een werkend voorbeeld van een klasse die overerving gebruikt

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

Je hebt twee klassen: Persoon en Student. De Student-klasse breidt Person uit, en het object dat op Student is gemaakt, heeft toegang tot zijn eigen methoden en eigenschappen, evenals tot de klasse die het heeft uitgebreid.

Laten we nu nog wat wijzigingen toevoegen aan de bovenstaande klasse.

Voorbeeld:

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

De wijzigingen die u hebt toegevoegd in vergelijking met het vorige voorbeeld, zijn dat er een constructor is gedefinieerd in de klasse Student. De constructor moet dezelfde parameters nemen als de basisklasse en eventuele extra parameters toevoegen.

In TypeScript je moet super alle params aanroepen als de bases params erin. Dit moet het eerste zijn dat binnen de constructor moet worden gedaan. De super zal de constructor van de uitgebreide klasse uitvoeren.

Toegang tot modificatoren in TypeScript

TypeScript ondersteunt publieke, private en beschermde toegangsmodificatoren voor uw methoden en eigenschappen. Als toegangsmodificatoren niet worden gegeven, wordt de methode of eigenschap standaard als openbaar beschouwd en zijn ze gemakkelijk toegankelijk vanaf het object van de klasse.

In het geval van privétoegangsmodificatoren zijn deze niet beschikbaar voor toegang vanaf het object van de klasse en zijn ze alleen bedoeld om binnen de klasse te worden gebruikt. Ze zijn niet beschikbaar voor de overgeërfde klasse.

In het geval van beschermde toegangsmodificatoren zijn ze bedoeld om binnen de klasse en de overgeërfde klasse te worden gebruikt en zijn ze niet toegankelijk vanaf het object van de klasse.

Voorbeeld:

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: eigenschappen of methoden zijn niet toegankelijk voor het object van de klasse en ook niet voor de afgeleide klasse; ze zijn bedoeld om intern binnen de klasse te worden gebruikt.
beveiligd: eigenschappen en methoden zijn ook niet toegankelijk voor het gemaakte object. Ze zijn toegankelijk vanuit de klas en beschikbaar voor de klas die deze uitbreidt.
Openbaar: eigenschappen en methoden worden zonder trefwoord gedeclareerd. Ze zijn gemakkelijk toegankelijk via het object van de klasse van buitenaf.

Interface-in TypeScript

Een van de belangrijkste kenmerken van TypeScript is interfaces. De interface is een set van een gedefinieerde regel die moet worden geïmplementeerd door de entiteit die deze gebruikt. De entiteit kan een klasse, functie of variabele zijn. Een interface kan bestaan uit eigenschappen en methoden. U kunt eigenschappen definiëren als optioneel met behulp van de syntaxis “?” voor die eigenschap of methode. De interface voegt een sterke typecontrole toe voor elke functie, variabele of klasse die de interface implementeert.

Syntaxis van een interface in TypeScript

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

U hebt een interface gedefinieerd met de naam Dimension, die de eigenschappen breedte en hoogte heeft, en beide hebben het type als een tekenreeks.

Nu kan deze interface worden geïmplementeerd door een variabele, een functie of een klasse. Hier is het voorbeeld van een variabele die de interface Dimension implementeert.

Voorbeeld:

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

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

De handtekening van de interface-dimensie heeft breedte en hoogte, en beide zijn verplicht. In het geval dat tijdens het implementeren van de interface een eigenschap wordt gemist of het type wordt gewijzigd, zal dit een compileerfout opleveren tijdens het compileren van de code naar javascript.

De bovenstaande code ziet er, wanneer gecompileerd naar javascript, als volgt uit:

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

Laten we nu kijken hoe we een interface met een functie kunnen gebruiken.

Interface gebruiken voor een functie als retourtype

Voorbeeld:

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

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

In het bovenstaande voorbeeld is de interface Dimension geïmplementeerd op de functie getDimension() als retourtype. Het retourtype van getDimension() moet overeenkomen met de eigenschappen en het type vermeld voor Interface Dimension.

De gecompileerde code voor Javascript zal als volgt zijn:

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

Als het retourtype tijdens de compilatie niet overeenkomt met de interface, wordt er een fout gegenereerd.

Interface als functieparameter

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"

Dus in het bovenstaande voorbeeld hebt u Interface Dimension als parameter voor de functie getDimension() gebruikt. Wanneer u de functie aanroept, moet u ervoor zorgen dat de parameter die eraan wordt doorgegeven, overeenkomt met de gedefinieerde interfaceregel.

De gecompileerde code voor Javascript zal als volgt zijn:

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

Klasse-implementatie-interface

Om gebruik te maken van de interface met een klasse, moet u het trefwoord gebruiken gereedschap.

Syntaxis voor klasse die een interface implementeert:

class NameofClass implements InterfaceName {
}

Het volgende voorbeeld toont de werking van een interface met een klasse.

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

In het bovenstaande voorbeeld hebt u de interface Dimension gedefinieerd met de eigenschappen breedte en hoogte, beide van het type string en een methode genaamd getWidth() die de retourwaarde als een string heeft.

De gecompileerde code voor Javascript zal als volgt zijn:

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

Functies in TypeScript

Functies zijn een reeks instructies die worden uitgevoerd om een taak uit te voeren. In Javascript, het grootste deel van de code is geschreven in de vorm van functies en speelt een grote rol. In TypeScript, je hebt klasse, interfaces, modules en naamruimten beschikbaar, maar toch spelen functies een belangrijke rol. Het verschil tussen de functie in javascript en TypeScript functie is het retourtype dat beschikbaar is TypeScript functie.

JavaScriptfunctie:

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

TypeScript functie:

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

In de bovenstaande functies wordt de naam van de functie toegevoegd, de params zijn a1 en b1 beide hebben een type als getal, en het retourtype is ook een getal. Als u toevallig een string aan de functie doorgeeft, zal er een compileerfout optreden tijdens het compileren ervan JavaScript.

Aanroepen van de functie: 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'.

De params a1 en b1 zijn verplichte parameters en geven een foutmelding als ze niet op die manier worden ontvangen. Ook zijn het parametertype en het retourtype erg belangrijk en kunnen niet meer veranderen als ze eenmaal zijn gedefinieerd.

Optionele parameters voor een functie

In javascript zijn alle parameters van de functies optioneel en worden ze als ongedefinieerd beschouwd als ze niet worden doorgegeven. Maar hetzelfde is niet het geval met TypeScript, zodra u de params heeft gedefinieerd, moet u deze ook verzenden, maar als u een param optioneel wilt houden, kunt u dit doen met behulp van? tegen de parameternaam, zoals hieronder weergegeven:

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.

Houd er rekening mee dat de optionele parameters alleen op het laatst in een functie moeten worden gedefinieerd. U kunt de eerste parameter niet als optioneel en de tweede parameter als verplicht hebben. Wanneer u de functie met één param aanroept, zal de compiler een fout genereren. Het is dus noodzakelijk om de optionele parameters aan het einde te behouden.

Wijs standaardwaarden toe aan parameters

U kunt standaardwaarden aan parameters toewijzen, zoals hieronder weergegeven:

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

Net als bij optionele parameters moeten ook hier de standaard geïnitialiseerde parameters aan het einde van een functie worden bewaard.

Rustparameters

Je hebt gezien hoe TypeScript verwerkt verplichte params, optionele params en de geïnitialiseerde params met de standaardwaarde. We zullen nu eens kijken naar de rustparameters. Restparameters zijn een groep optionele parameters die samen zijn gedefinieerd, en ze worden gedefinieerd met behulp van drie stippen (…) gevolgd door de naam van de parameter, wat een array is.

Syntaxis voor restparameters:

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

Zoals hierboven weergegeven, worden de restparameters gedefinieerd met behulp van (…param-name); de rest parameter is een array voorafgegaan door drie punten. Aan de array worden alle parameters doorgegeven. U kunt de functie oproepen, zoals weergegeven in het onderstaande voorbeeld:

Voorbeeld:

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

Pijlfuncties

Een pijlfunctie is een van de belangrijke functies die in ES6 is uitgebracht en is beschikbaar in TypeScript te. De syntaxis van de pijlfunctie bevat een dikke pijl, waardoor de functie een pijlfunctie wordt genoemd.

Pijlfunctie Syntaxis:

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

Wat is het gebruik van de pijlfunctie?

Laten we het voorbeeld bekijken om het gebruik van de Arrow-functie te begrijpen:

Voorbeeld:

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

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

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

Je hebt een anonieme functie gemaakt die de eigenschap dit heeft. Score wordt geïnitialiseerd op 0 en een methode getScore die intern een setTimeout heeft en binnen 1 seconde deze.score troost. De getrooste waarde geeft ongedefinieerd aan, ook al heb je this.score gedefinieerd en geïnitialiseerd. Het probleem hier is met this trefwoord. De functie binnen setTimeout heeft zijn eigen functie en probeert de partituur intern te verwijzen, en aangezien deze niet gedefinieerd is, geeft deze ongedefinieerd.

Hetzelfde kan worden gedaan met behulp van de pijlfunctie, zoals hieronder weergegeven:

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

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

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

U hebt de functie binnen setTimeout gewijzigd in een pijlfunctie, zoals hieronder weergegeven:

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

Een pijlfunctie heeft geen eigen functie dit gedefinieerd en het deelt zijn ouder dit, dus variabelen die buiten zijn gedeclareerd, zijn gemakkelijk toegankelijk via deze binnen een pijlfunctie. Ze zijn nuttig vanwege de kortere syntaxis, maar ook voor callbacks, gebeurtenishandlers, interne timingfuncties, enz.

TypeScript enums

TypeScript Enum is een object waarin een verzameling gerelateerde waarden bij elkaar is opgeslagen. Javascript ondersteunt geen enums. De meeste van de programmeertaal als Java, C, C++ ondersteunt TypeScript Enum en het is ook verkrijgbaar met TypeScript te. Enums worden gedefinieerd met behulp van het trefwoord enum.

Hoe een Enum declareren?

Syntax:

enum NameofEnum {
   value1,
   value2,
    ..
}

Voorbeeld: Enum

enum Directions {
North,
South,
East,
West
}

In het bovenstaande voorbeeld hebt u een enum gedefinieerd met de naam Directions. De opgegeven waarde is Noord, Zuid, Oost, West. De waarden worden genummerd vanaf 0 voor de eerste waarde in de opsomming en worden vervolgens met 1 verhoogd voor de volgende waarde.

Declareer een Enum met een numerieke waarde

Als een enum standaard geen waarde krijgt, wordt deze beschouwd als een getal dat begint bij 0. Het volgende voorbeeld toont een enum met een numerieke waarde.

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

U kunt ook een startwaarde aan de enum toewijzen, waarna de volgende enumwaarden de verhoogde waarden krijgen. Bijvoorbeeld:

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

Nu begint de opsomwaarde Noord met 5, dus Zuid krijgt de waarde 6, Oost = 7 en West = 8.

U kunt ook waarden naar keuze toewijzen in plaats van de standaardwaarden te gebruiken. Bijvoorbeeld:

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

Hoe krijg ik toegang tot een Enum?

Het volgende voorbeeld laat zien hoe u Enum in uw code kunt gebruiken:

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

De gecompileerde code voor JavaScript is als volgt:

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

Sinds Javascript ondersteunt geen enums, het zet de enum om in zelfaangeroepen functies, zoals hierboven weergegeven.

Declareer een Enum met een tekenreekswaarde

U kunt stringwaarden naar keuze toewijzen, zoals weergegeven in het onderstaande voorbeeld:

Voorbeeld:

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

De gecompileerde code voor JavaScript is als volgt:

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

Waar zitten de modules in TypeScript?

De bestanden die zijn gemaakt in TypeScript hebben globale toegang, wat betekent dat variabelen die in het ene bestand zijn gedeclareerd, gemakkelijk toegankelijk zijn in een ander bestand. Deze mondiale aard kan codeconflicten veroorzaken en problemen veroorzaken bij de uitvoering tijdens runtime. U beschikt over export- en importmodulefunctionaliteit die kan worden gebruikt om globale variabele- en functieconflicten te voorkomen. Deze functie is beschikbaar in JavaScript met ES6-release en ook ondersteund in TypeScript.

Waarom heb je modules nodig? TypeScript?

Het volgende voorbeeld toont het probleem zonder modules:

Voorbeeld test1.ts

let age : number = 25;

U hebt een variabele leeftijd van typenummer gedefinieerd in test1.ts.

Voorbeeld test2.ts

In het test2.ts-bestand heeft u eenvoudig toegang tot de variabele leeftijd gedefinieerd in test1.ts en wijzig het ook zoals hieronder weergegeven:

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

Het bovenstaande geval kan dus veel problemen veroorzaken, omdat de variabelen wereldwijd beschikbaar zijn en kunnen worden gewijzigd.

met Modules, blijft de geschreven code de locale van het bestand en is daarbuiten niet toegankelijk. Om toegang te krijgen tot iets uit het bestand, moet het worden geëxporteerd met behulp van het export-trefwoord. It wordt gebruikt wanneer u wilt dat de variabele, klasse, functie of interface in een ander bestand wordt gebruikt. import wordt gebruikt wanneer u ook toegang wilt tot de geëxporteerde variabele, klasse, interface of functie. Als u dit doet, blijft de geschreven code intact in het bestand, en zelfs als u dezelfde namen van variabelen definieert, worden ze niet door elkaar gehaald en gedragen ze zich lokaal ten opzichte van het bestand waarin ze worden gedeclareerd.

Exporteren en importeren gebruiken

Er zijn veel manieren om te exporteren en importeren. Dus zal hier de syntaxis bespreken die het meest wordt gebruikt.

De syntaxis voor import en export 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"

Hier is een werkend voorbeeld met behulp van exporteren en importeren.

Voorbeeld:

test1.ts

export let age: number = 25;

Het trefwoord Exporteren wordt gebruikt om de leeftijdsvariabele in een ander bestand te delen.

test2.ts

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

Het trefwoord Importeren wordt gebruikt om toegang te krijgen tot het leeftijd variabele, en u moet de bestandslocatie opgeven zoals hierboven weergegeven.

Syntaxis voor import en export 2:

Er is een andere manier om te exporteren en importeren, en de syntaxis hiervoor is zoals hieronder weergegeven:

export = classname;

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

Wanneer u gebruikt exporteren = Om uw module te exporteren, moet de import require(“file path of modulename”) gebruiken om deze te importeren.

Hier is een werkend voorbeeld van het bovenstaande geval:

Klant.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;

testKlant.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Modulelader

Modules kunnen niet op zichzelf werken, dus je hebt een modulelader nodig om de importafhankelijkheden te lokaliseren, zoals je hebt gezien TypeScript voorbeelden hierboven weergegeven. De beschikbare modulelader is CommonJS voor nodejs en Require.js om in de browser te draaien.

Gebruik de volgende opdracht om code te compileren met behulp van de CommonJS-module:

tsc --module commonjs testCustomer.ts

Gebruik de volgende opdracht om code te compileren met behulp van de Requirejs-module:

tsc --module amd testCustomer.ts

De afhankelijke bestanden worden met bovenstaande opdracht geconverteerd naar het js-bestand.

Voorbeeld van testCustomer.ts naar testCustomer.js met Requirejs

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

Voorbeeld van Customer.ts naar Customer.js met 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;
});

Om het te testen met require.js, moet je een bestand maken met de naam main.js, dat verwijst naar de afhankelijkheden zoals weergegeven.

Hier is de mapstructuur:

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

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

Naamruimten in TypeScript

Naamruimte is in feite een verzameling klassen, interfaces, variabelen en functies samen in één bestand.

Syntaxis van naamruimte

namespace name{

export class {
}

export interface {
}

export const constname;

}

De gerelateerde code is beschikbaar onder één naamruimte.

Werkvoorbeeld van naamruimte: 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;
        }
    }
}

De naam van de naamruimte is StudentOpstelling, Je hebt een interface StudDetails, functie addSpace en een klasse genaamd Student toegevoegd.

Toegang tot naamruimte

Hieronder staat de code waarin u de naamruimte gebruikt StudentInstelling.

testStudentSetup.ts

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

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

Er moet naar de klasse, interface en een functie die beschikbaar is binnen een naamruimte worden verwezen met behulp van de naam van het voorbeeld van de naamruimte StudentSetup.addSpace om toegang te krijgen tot de functie, StudentSetup.Student om toegang te krijgen tot de klas.

U kunt beide bestanden in één js compileren, zoals hieronder weergegeven:

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

Controleer de uitvoer in de opdrachtprompt met behulp van onderstaande opdracht:

node namespace.js

Het zal de uitvoer weergeven als:

The name is: H a r r y

Omgevingsverklaringen in TypeScript

TypeScript stelt u in staat om JavaScript-bestanden van derden te gebruiken met behulp van ambient declaration. Het voordeel van deze functie is dat u niet hoeft te herschrijven en toch alle functies van de bibliotheek in TypeScript.

Ambient-syntaxis

Omgevingsmodule declareren:

declare module moduleName {
   //code here
}

Het omgevingsbestand moet worden opgeslagen als:

filename.d.ts

Om het bestand te gebruiken bestandsnaam.d.ts in je .ts moet je ernaar verwijzen als:

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

De verklaring van het omgevingstype in TypeScript zal een verwijzing naar de externe bibliotheek hebben en de vereiste functies opnieuw declareren met een eigen type. Stel dat u een kleine javascript-bibliotheek hebt, zoals hieronder weergegeven:

Derden JavaScriptbestand: testString.js

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

Je hebt een object genaamd StringChecks met functies zoals isString, convertToUpperCase, convertToLowerCase en converToStringBold.

Creëren van Ambient Module in TypeScript

Er wordt nu een omgevingsmodule gemaakt die verwijst naar bovenstaande js-functies en die ook typecontrole toevoegt volgens onze vereisten.

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

U moet een modulenaam definiëren als TestString en de interface StringsFunc hebben geëxporteerd.

isString(str: string): booleaanse waarde

=> Dit zal param als een string gebruiken en het retourtype zal Boolean zijn. Als u in uw .ts-bestand de param als een getal of iets anders dan een string doorgeeft, krijgt u een compileerfout.

convertToUpperCase(str:string): tekenreeks

=> Dit neemt het argument als string en retourneert een string. Hetzelfde geldt voor convertToLowerCase(str: string)
: snaar; En convertToStringBold(str: tekenreeks): tekenreeks
;

Omdat je in het javascript-bestand de objectnaam StringChecks hebt, moeten we uiteindelijk hetzelfde verwijzen in het .d.ts-bestand, wat gebeurt als:

declare var StringChecks: TestString.StringsFunc;

Ambient-module gebruiken in TypeScript

Hier is nu het test.ts-bestand waarin het ambient-bestand tstring.d.ts zal worden gebruikt

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

Compileren TypeScript tsc test.ts naar 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);

Nu kunt u test.js gebruiken in het HTML-bestand en ook het bibliotheekbestand testString.js

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

Dit is de uitvoer die te zien is in de console:

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

TypeScript Geschiedenis

Laten we belangrijke bezienswaardigheden uit de geschiedenis van zien TypeScript:

Na twee jaar interne ontwikkeling bij Microsoft. TypeScript 0.9, uitgebracht in 2013
Extra ondersteuning voor generieke geneesmiddelen TypeScript 1.0 werd uitgebracht tijdens Build 2014
In juli 2014 verscheen een nieuwe TypeScript compiler kwam die vijf keer sneller is dan de vorige versie.
In juli 2015 ondersteuning voor ES6-modules, trefwoord naamruimte, voor ondersteuning, decorateurs.
In november 2016 is er een functie toegevoegd, zoals sleutel- en opzoektypen van toegewezen typen, en rest.
Op 27 maart 2018 zijn voorwaardelijke typen, de verbeterde sleutel met kruispunttypen, toegevoegd in de TypeScript.

Waarom gebruik maken van TypeScript?

Hier volgen belangrijke voordelen/voordelen van het gebruik TypeScript

Groot en complex project in JavaScripts zijn moeilijk te coderen en te onderhouden.
TypeScript helpt veel bij het organiseren van code en verwijdert toch de meeste fouten tijdens het compileren.
TypeScript ondersteunt JS-bibliotheken en API-documentatie
Het is optioneel een getypte scripttaal
TypeScript Code kan worden omgezet in gewoon JavaScriptcode
Betere codestructurering en objectgeoriënteerde programmeertechnieken
Maakt betere ondersteuning voor ontwikkelingstijdtools mogelijk
Het kan de taal uitbreiden voorbij de standaarddecorators, async/await

Wie gebruikt TypeScript?

Hier zijn enkele meest voorkomende toepassingen van TypeScript:

Het hoekige team gebruikt TypeScript.
NodeJS- en NPM-installatie
TypeScript Installatie
Compileren TypeScript code aan Javascript
Voer code uit met Nodejs
Uitvoeren Javascript in Browser
Compileren TypeScript code aan Javascript met behulp van de EcmaScript-versie
U kunt eenvoudig geschreven code compileren TypeScript naar JavaScript met behulp van NodeJS.
Dus om mee te werken TypeScript u moet eerst NodeJS downloaden en installeren.

Samenvatting

TypeScript is een superset van JavaScript. TypeScript is een pure objectgeoriënteerde programmeertaal die klassen, interfaces, enz. ondersteunt.
TypeScript ondersteunt alle vrijgegeven Ecmascript-functies, en ontwikkelaars kunnen deze gebruiken tijdens het coderen.
Variabelen worden gebruikt om waarden op te slaan, en de waarde kan een tekenreeks, getal, Booleaanse waarde of een expressie zijn.
In TypeScript, het type van een variabele wordt alleen aan het begin gedefinieerd en tijdens de uitvoering moet het hetzelfde type behouden. Wijzigingen hierin zullen leiden tot een compile-time error tijdens de compilatie naar javascript.
Een array-in TypeScript is een gegevenstype waarin u meerdere waarden kunt opslaan.
Klasse is een nieuwe functie die vanaf ES6 is toegevoegd, dus eerder JavaEr werd geprobeerd om de functionaliteit van het scripttype te testen met behulp van een functie met prototypefunctionaliteit om code te hergebruiken.
TypeScript ondersteunt publieke, private en beschermde toegangsmodificatoren voor uw methoden en eigenschappen.
Een van de belangrijkste kenmerken van TypeScript zijn interfaces. De interface is een set gedefinieerde regels die moet worden geïmplementeerd door de entiteit die er gebruik van maakt.
Functies zijn een reeks instructies die worden uitgevoerd om een taak uit te voeren.
TypeScript Enum is een object waarin een verzameling gerelateerde waarden bij elkaar is opgeslagen.

Je houdt misschien van:

Wat is TypeScript?

Hoe te downloaden en installeren TypeScript

Compileren TypeScript code aan Javascript

Uitvoeren Javascript met behulp van Nodejs

Compileren TypeScript code aan Javascript met behulp van de EcmaScript-versie

GERELATEERDE ARTIKELEN

Variabelen in TypeScript

Variabelen declareren met var

Variabelen declareren met let

Variabelen declareren met const

Typt in TypeScript

Telefoon Nummer

Draad

Boolean

Elke

Leegte

TypeScript reeks

Een array declareren en initialiseren

Verschillende manieren om toegang te krijgen tot elementen uit een array

gebruik TypeScript for loop

For-in-lus gebruiken

For-of-lus gebruiken

Foreach-lus gebruiken

TypeScript Array-methoden

lengte eigenschap

Reverse methode

Sorteer methode

Pop-methode

Shift methode

Push-methode

concat methode

Voorbeeld voor lengte-eigenschap

Voorbeeld voor omgekeerde methode

Voorbeeld voor sorteermethode

Voorbeeld voor pop-methode

Voorbeeld voor shift-methode

Voorbeeld voor push-methode

Voorbeeld voor concat-methode

Klasse binnen TypeScript

Een klasse definiëren in TypeScript

Voorbeeld: een werkend voorbeeld op Class

Constructeur in een TypeScript Klasse

Methoden binnen een TypeScript Klasse

Instantie van klasse maken in TypeScript

Het compileren TypeScript Klasse naar JavaScript

Klasse Overerving

Syntaxis van klasse-overerving:

Toegang tot modificatoren in TypeScript

Interface-in TypeScript

Syntaxis van een interface in TypeScript

Interface gebruiken voor een functie als retourtype

Interface als functieparameter

Klasse-implementatie-interface

Functies in TypeScript

Aanroepen van de functie: add

Optionele parameters voor een functie

Wijs standaardwaarden toe aan parameters

Rustparameters

Pijlfuncties

Wat is het gebruik van de pijlfunctie?

TypeScript enums

Hoe een Enum declareren?

Declareer een Enum met een numerieke waarde

Hoe krijg ik toegang tot een Enum?

Declareer een Enum met een tekenreekswaarde

Waar zitten de modules in TypeScript?

Waarom heb je modules nodig? TypeScript?

Exporteren en importeren gebruiken

De syntaxis voor import en export 1:

Syntaxis voor import en export 2:

Modulelader

Voorbeeld van testCustomer.ts naar testCustomer.js met Requirejs

Voorbeeld van Customer.ts naar Customer.js met Requirejs

Naamruimten in TypeScript

Syntaxis van naamruimte

Toegang tot naamruimte

Omgevingsverklaringen in TypeScript

Ambient-syntaxis

Omgevingsmodule declareren:

Het omgevingsbestand moet worden opgeslagen als: