TypeScript Handleiding: Wat zijn interfaces, enums en arrays?

Wat is TypeScript?

TypeScript is een superset van JavaScript. TypeScript is een objectgeoriënteerde programmeertaal die klassen, interfaces en meer ondersteunt. Het is een open-source taal ontwikkeld door Microsoft waarmee de code statisch wordt gecompileerd JavaScript. Het kan eenvoudig in een browser of in Node.js worden uitgevoerd.

Alle nieuwste functies die voor ECMAScript zijn uitgebracht, worden ondersteund in TypeScripten bovendien TypeScript Het beschikt over eigen objectgeoriënteerde kenmerken zoals interfaces, omgevingsdeclaraties en klasse-overerving, die helpen bij de ontwikkeling.ping een grote applicatie die anders moeilijk te bouwen zou zijn in JavaScript.

De relatie is eenzijdig. Elke geldige JavaHet scriptbestand is al geldig. TypeScript, maar het omgekeerde is niet waar, omdat type-annotaties alleen bestaan ​​in TypeScript en worden tijdens de compilatie verwijderd.

Waarom gebruik maken van TypeScript?

Hieronder volgen de belangrijkste voordelen van het gebruik van TypeScript:

• Grote en complexe projecten in JavaScripts zijn moeilijk te coderen en te onderhouden.
• TypeScript Het helpt enorm bij het organiseren van de code en verwijdert de meeste fouten tijdens het compileren in plaats van tijdens de uitvoering.
• TypeScript Biedt ondersteuning voor JavaScript-bibliotheken en API-documentatie.
• Het is een scripttaal met optionele typering, waardoor typen geleidelijk kunnen worden ingevoerd.
• TypeScript code kan worden omgezet in platte tekst JavaScriptcode voor elk browserdoel.
• Het zorgt voor een betere codestructuur en objectgeoriënteerde programmeertechnieken.
• Het biedt betere ondersteuning voor ontwikkeltools, waaronder automatische aanvulling en veilige refactoring.
• Het kan de taal uitbreiden tot voorbij de standaard, met functies zoals decorators.

Het grootste praktische voordeel is de ondersteuning door editors. Omdat de compiler de structuur van elke waarde kent, kan een editor een eigenschap in een heel project hernoemen en elke plek melden waar de naam niet meer overeenkomt.

TypeScript Geschiedenis

Laten we eens kijken naar de belangrijke mijlpalen uit de geschiedenis van TypeScript:

• Na twee jaar interne ontwikkeling bij Microsoft, TypeScript Versie 0.9 werd uitgebracht in 2013.
• TypeScript Versie 1.0, met extra ondersteuning voor generieke typen, werd uitgebracht tijdens Build 2014.
• In juli 2014 verscheen een nieuwe TypeScript Er is een compiler gearriveerd die vijf keer sneller is dan de vorige versie.
• In juli 2015 werd ondersteuning toegevoegd voor ES6-modules, het namespace-keyword, for…of en decorators.
• In november 2016 werden gemapte typen, sleutel- en opzoektypen, en objectrest en -spreiding toegevoegd.
• Op 27 maart 2018 werden voorwaardelijke typen en een verbeterde keyof met intersectietypen toegevoegd.
• TypeScript Versie 5.0, uitgebracht in maart 2023, moderniseerde de decoratiesoftware en verkleinde de pakketgrootte.
• TypeScript Versie 6.0 verscheen in maart 2026 als de laatste release die voortbouwde op de JavaScriptcodebasis.
• TypeScript Versie 7.0 verplaatst de compiler naar een native Go-implementatie, die Microsoft Volgens berichten is het ongeveer tien keer sneller dan versie 6.0.

Wie gebruikt TypeScript?

TypeScript is niet langer een nichekeuze. Het vormt de basis van diverse veelgebruikte front-end- en back-endtools, en de onderstaande lijst laat zien waar een beginner het het meest waarschijnlijk tegenkomt.

• Hoekig: Het Angular-framework is geschreven in TypeScriptEn er wordt ook verwacht dat de applicatiecode erin geschreven wordt.
• React- en Vue-projecten: Beide ecosystemen verzenden officieel TypeScript sjablonen, en de meeste moderne starters schakelen dit standaard in.
• Node.js-backends: Serverframeworks zoals NestJS zijn gebouwd rondom TypeScript lessen en decorateurs.
• Editortools: Visual Studio Code is zelf een grote TypeScript codebase, vandaar dat de taalondersteuning zo compleet is.
• Front-ends voor grote bedrijven: Teams die met veel bijdragers werken, gebruiken het om integratiefouten op te sporen vóór de implementatie.

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 website van Node.js. https://nodejs.org/en/download/Download en installeer Node.js voor je besturingssysteem. Gedetailleerde instructies vind je in de handleiding op [link]. Hoe download en installeer je Node.js?.

Stap 2) Controleer de Nodejs- en npm-versie

Om te controleren of Node.js en npm geïnstalleerd zijn, kunt u de versie in uw opdrachtprompt bekijken.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Elke huidige Node LTS-release werkt. TypeScript De compiler zelf vereist alleen een ondersteunde Node-versie om te kunnen draaien.

Stap 3) TypeScript Montage

Maak de projectmap `typeproject\` aan en voer `npm init` uit, zoals in de onderstaande opdracht wordt weergegeven:

npm init

Stap 4) Start de installatie

Dit creëert het bestand package.json, waarin de afhankelijkheden voor ons project worden opgeslagen.

Als u klaar bent, installeert u 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 de TypeScript tsc Je kunt de opdracht vanuit elke map uitvoeren, omdat deze globaal is geïnstalleerd. Mocht je de software niet willen installeren, dan kan dat. TypeScript Gebruik wereldwijd de onderstaande opdracht:

npm install --save-dev typescript

Maak een map genaamd `src\` aan in de projectdirectory en maak daarin het volgende bestand aan: 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

Gebruik de volgende opdracht om de bovenstaande code te compileren.

If TypeScript Als het globaal geïnstalleerd wordt, gebruik dan de onderstaande opdracht:

tsc test.ts

If TypeScript Als het lokaal in je project is geïnstalleerd, moet je het pad gebruiken van TypeScript vanuit de map node_modules, zoals weergegeven, of voer het uit via npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Met bovenstaande opdracht wordt een bestand test.js aangemaakt, waarin de gecompileerde code wordt opgeslagen. 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

Nu gaan we test.js in Node.js als volgt uitvoeren:

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

De waarde die aan console.log wordt doorgegeven, wordt weergegeven wanneer test.js wordt uitgevoerd.

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 Het ondersteunt alle uitgebrachte ECMAScript-functies, die ontwikkelaars tijdens het programmeren kunnen gebruiken. Niet alle nieuwe functies worden echter ondersteund door oudere browsers, dus mogelijk moet u compileren naar een oudere versie van ECMAScript. TypeScript Biedt compileropties die precies dat 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 voor de klassieke compiler. Als je dit wilt wijzigen, kun je de bovenstaande opdracht gebruiken.

Momenteel gebruiken we ES6 als doelplatform:

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, omdat de pijlfunctie die je hebt gebruikt een ES6-functie is en niet verandert wanneer deze naar ES6 wordt gecompileerd.

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

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

Hier wordt de dikke pijl dus vervangen door 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 JavaScriptLaten we dus leren hoe we variabelen declareren en er een waarde aan toewijzen. TypeScript.

Variabelen kunnen niet in code worden gebruikt zonder te zijn gedefinieerd. Om een ​​variabele te declareren, kunt u het volgende gebruiken:

var zoekwoord,

laten trefwoord

const trefwoord

Werken met variabelen in TypeScript is gelijk aan JavaScript, en gebruikers die bekend zijn met JavaScripts zullen dit heel gemakkelijk vinden. In moderne code, laten en const hebben de voorkeur boven varOmdat hun blokbereik een hele reeks bugs voorkomt.

Variabelen declareren met var

Syntax:

var firstname = "Roy";

Laten we eens naar een paar voorbeelden kijken. TypeScript Voorbeelden om de werking van het sleutelwoord `var` te begrijpen, evenals de reikwijdte van variabelen die ermee zijn gedeclareerd. var trefwoord.

Voorbeeld 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Voorbeeld 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Voorbeeld 3:

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

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Variabelen declareren met let

De TypeScript syntaxis voor let is zoals hieronder weergegeven:

Syntax:

let name = "Roy";

De werking van de laten de variabele is vrijwel hetzelfde als varmaar met één belangrijk verschil, zoals het onderstaande voorbeeld aantoont.

Voorbeeld:

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

test(); // throws an error: Cannot find name 't'

Bovenstaande TypeScript Het voorbeeld geeft een foutmelding, maar dezelfde code zou wel gewerkt hebben met de var trefwoord. Variabelen gedeclareerd met laten zijn alleen beschikbaar binnen het blok waarin ze zijn gedeclareerd. In dit voorbeeld bestaat t alleen binnen het if-blok, niet in de hele functie.

Hetzelfde geldt binnen elke functie, for-lus, while-lus of switch-blok. Een variabele van het type `let` is alleen beschikbaar binnen dat blok, en ernaar verwijzen buiten dat blok geeft een foutmelding. Dit is het belangrijkste verschil tussen `var` en `let`.

Variabelen declareren met const

Const betekent constante variabelen. Ze zijn vergelijkbaar met let-variabelen, met als verschil dat een waarde die eraan is toegekend niet meer kan worden gewijzigd. Een const-declaratie moet daarom op dezelfde regel worden geïnitialiseerd.

Syntax:

const name = "Roy";

Voorbeeld:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Gebruik dus `const` wanneer je zeker weet dat de toegewezen waarde niet opnieuw zal worden toegewezen. Houd er rekening mee dat `const` voorkomt dat de binding opnieuw wordt toegewezen, niet dat het object waarnaar de binding verwijst, wordt gewijzigd.

Typt in TypeScript

TypeScript is een sterk getypeerde taal, terwijl JavaScript is dat niet. Een variabele waarvan de waarde is gedefinieerd als een tekenreeks, kan zonder problemen worden gewijzigd in een getal. JavaScript. Hetzelfde wordt niet getolereerd in TypeScript. in TypeScriptHet type van een variabele wordt aan het begin gedefinieerd en moet gedurende de hele uitvoering dat type behouden. Elke wijziging leidt tot een compileerfout tijdens de compilatie. JavaScript.

De volgende zijn de basistypen:

Telefoon Nummer

Accepteert alleen gehele getallen, drijvende-kommagetallen, breuken en vergelijkbare numerieke waarden.

Syntax:

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

Hieronder volgen enkele belangrijke methoden die op getallentypen kunnen worden toegepast:

naar Vast() – Het zal het getal omzetten naar een tekenreeks en het aantal decimalen behouden dat aan de methode is doorgegeven.

toString () Deze methode zet het getal om in een tekenreeks.

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 numerieke 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 tekenreekswaarden.

Syntax:

let str :string = "hello world";

Hieronder volgen enkele belangrijke methoden die op tekenreekstypen kunnen worden toegepast:

• spleet() – deze methode splitst de tekenreeks in een array.
• karakter() – deze methode geeft het teken op de opgegeven index.
• index van() – deze methode geeft de positie van de eerste keer dat de opgegeven waarde voorkomt.
• vervangen() – deze methode neemt twee strings als invoer. Het zoekt naar de eerste waarde in de string en, indien aanwezig, vervangt deze door de tweede waarde, waarna een nieuwe string wordt geretourneerd.
• trimmen() – deze methode verwijdert witruimte aan beide zijden van de tekenreeks.
• substr() – deze methode geeft een deel van de tekenreeks terug, afhankelijk van de startpositie en de opgegeven lengte.
• deelstring() – deze methode geeft een deel van de tekenreeks terug, afhankelijk van de begin- en eindpositie. Het teken op de eindpositie wordt weggelaten.
• naarHoofdletters() – zal de tekenreeks omzetten 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 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

Een boolean accepteert alleen de logische waarden waar en onwaar. In tegenstelling tot een gewone boolean. JavaIn het script worden de getallen 0 en 1 niet geaccepteerd, omdat ze van het type getal zijn.

Syntax:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Elke

Syntax:

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

Variabelen die zijn gedeclareerd met behulp van de elke Het type kan een tekenreeks, getal, array, boolean of void bevatten. TypeScript zal geen compileerfout veroorzaken, wat vergelijkbaar is met variabelen in JavaScript. Gebruik het type `any` alleen als je niet zeker bent van het type waarde dat aan die variabele wordt gekoppeld, omdat het alle controles op die waarde uitschakelt.

Leegte

Het type `void` wordt meestal gebruikt als retourtype voor een functie die niets retourneert.

Syntax:

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

TypeScript reeks

An reeks in TypeScript Een array is een gegevenstype waarin je meerdere waarden kunt opslaan. Laten we leren hoe je arrays declareert en waarden toewijst voor bewerkingen in een array. TypeScript.

Sinds TypeScript Omdat het een sterk getypeerde taal is, moet je het gegevenstype van de waarden in een array specificeren. Anders worden ze als van het type 'any' beschouwd.

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

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Verschillende manieren om toegang te krijgen tot elementen uit een array

Om de elementen uit een array te halen, beginnen de waarden bij index 0 en lopen ze door tot de lengte van de array min één.

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

Je kunt de elementen uit een array ook ophalen met behulp van een TypeScript besteld, lusZoals 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

Met behulp van een forEach-lus

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

Output:

2016
2017
2018
2019

TypeScript Array-methoden

De TypeScript Het array-object heeft veel eigenschappen en methoden die ontwikkelaars helpen om arrays gemakkelijk en efficiënt te beheren. Je kunt de waarde van een eigenschap opvragen door arraynaam.eigenschap te specificeren en de uitvoer van een methode door arraynaam.methode() te specificeren.

Voorbeeld voor lengte-eigenschap

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

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

Voorbeeld voor omgekeerde methode

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

Voorbeeld voor sorteermethode

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

Voorbeeld voor pop-methode

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

Voorbeeld voor shift-methode

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

Voorbeeld voor push-methode

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

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 alles wat mogelijk is in JavaScript is ook mogelijk in TypeScript.Class is een functie die vanaf ES6 is toegevoegd. Eerder in JavaScript- en klasse-achtige functionaliteit werd bereikt door gebruik te maken van een functie met prototype-methoden om code te hergebruiken. Door klassen te gebruiken, kan je code de functionaliteit van talen zoals ... benaderen. Java, C# en Python, waar code gemakkelijk hergebruikt kan worden.

Een klasse definiëren in TypeScript

Hieronder staat de basissyntaxis voor klassen in 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 klasse genaamd Students. Deze heeft de eigenschappen age, name en roll_no.

Constructeur in een TypeScript Klasse

De hierboven gedefinieerde klasse Students 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 de parameters leeftijd, naam en roll_no. De constructor zorgt voor de initialisatie van de eigenschappen wanneer de klasse wordt geïnstantieerd. De eigenschappen worden benaderd via de dit Je kunt een trefwoord gebruiken, bijvoorbeeld `this.age` om de leeftijd op te vragen en `this.roll_no` om het studentnummer op te vragen. Je kunt ook een standaardconstructor hebben, zoals hieronder weergegeven:

constructor () {}

Methoden binnen een TypeScript Klasse

In de klasse Students zijn methoden gedefinieerd, bijvoorbeeld getRollNo(), getName() en getAge(), die de waarden van de eigenschappen roll_no, name en age retourneren.

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

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

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

Een instantie van een klasse maken in TypeScript

In TypeScriptOm een ​​instantie van een klasse te creëren, gebruik je de operator `new`. Wanneer je een instantie creëert met `new`, krijg je een 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 samenstellen van een TypeScript Klasse naar JavaScript

Je kunt de tsc-opdracht gebruiken zoals hieronder weergegeven om te compileren naar JavaScript.

Command: tsc  Students.ts

De output van de JavaDe scriptcode die tijdens de compilatie wordt gegenereerd, ziet er als volgt uit:

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 JavaIn het script wordt de klasse omgezet in een zelfuitvoerende functie.

Klasse Overerving

Klassen kunnen worden overgenomen met behulp van de strekt 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 volgt een werkend voorbeeld van een klasse die gebruikmaakt van overerving:

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, Person en Student. Student erft van Person, en het object dat van Student wordt gemaakt, heeft toegang tot zijn eigen methoden en eigenschappen, evenals die van de klasse waarvan het erft.

Laten we nu enkele wijzigingen aanbrengen in 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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

De wijziging ten opzichte van het vorige voorbeeld is een constructor die is gedefinieerd in de klasse Student. De constructor accepteert dezelfde parameters als de basisklasse, plus eventuele extra parameters die hij zelf heeft toegevoegd.

In TypeScript Je moet `super` aanroepen met alle parameters van de basisklasse. Dit moet de eerste instructie in de constructor zijn, omdat `super` de constructor van de afgeleide klasse uitvoert. Elke eigenschap die door de afgeleide klasse is gedeclareerd, zoals `tmarks`, moet vervolgens expliciet worden toegewezen, anders retourneert `getMarks` `undefined`.

Toegang tot modificatoren in TypeScript

TypeScript Ondersteunt de toegangsmodifiers public, private en protected voor uw methoden en eigenschappen. Standaard wordt een methode of eigenschap als public beschouwd en is deze gemakkelijk toegankelijk vanuit het object van de klasse als er geen toegangsmodifier is opgegeven.

Bij private toegangsmodifiers zijn leden niet beschikbaar vanuit het object van de klasse en zijn ze uitsluitend bedoeld voor gebruik binnen de klasse. Ze zijn niet beschikbaar voor een overgeërfde klasse.

Bij beveiligde toegangsmodifiers zijn de leden bedoeld voor gebruik binnen de klasse en de overgeërfde klasse, en zijn ze niet toegankelijk vanuit 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

Interface-in TypeScript

Een van de belangrijkste kenmerken van TypeScript Interfaces zijn een set regels die moeten worden geïmplementeerd door de entiteit die ze gebruikt. Deze entiteit kan een klasse, functie of variabele zijn. Een interface kan bestaan ​​uit eigenschappen en methoden. Je kunt een eigenschap of methode als optioneel markeren met de syntax "?". De interface voegt een sterke typecontrole toe voor elke functie, variabele of klasse die deze implementeert.

Syntaxis van een interface in TypeScript

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

Je hebt een interface gedefinieerd met de naam Dimension, die de eigenschappen width en height heeft, beide van het type string.

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

Voorbeeld:

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

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

De interface Dimension heeft een breedte en hoogte, en beide zijn verplicht. Als een van deze eigenschappen ontbreekt of als een type wordt gewijzigd, zal dit een compileerfout opleveren tijdens het compileren van de code. JavaScript.

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

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

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

Een interface gebruiken op een functie als retourtype.

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

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

In het bovenstaande voorbeeld wordt de interface Dimension gebruikt als retourtype van de functie getDimension(). De retourwaarde moet overeenkomen met de eigenschappen en typen die in de interface zijn gedeclareerd.

de gecompileerde JavaDe scriptcode ziet er als volgt uit:

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 foutmelding 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"}); // "300px-250px"

In het bovenstaande voorbeeld hebt u de interface Dimension als parameter gebruikt voor de functie getDimension(). Wanneer u de functie aanroept, moet de parameter die eraan wordt doorgegeven voldoen aan de regels die door de interface zijn gedefinieerd.

de gecompileerde JavaDe scriptcode ziet er als volgt uit:

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

Klasse die een interface implementeert

Om een ​​interface met een klasse te kunnen gebruiken, moet je het trefwoord gebruiken. gereedschap.

Syntaxis voor een klasse die een interface implementeert:

class NameofClass implements InterfaceName {
}

Het volgende voorbeeld laat zien hoe een interface samenwerkt 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 heb je de interface Dimension gedefinieerd met de eigenschappen width en height, beide van het type string, en een methode genaamd getWidth() die een string retourneert.

de gecompileerde JavaDe scriptcode ziet er als volgt uit:

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 sets instructies die worden uitgevoerd om een ​​taak te volbrengen. JavaIn een script is het grootste deel van de code geschreven in de vorm van functies, en deze spelen een belangrijke rol. TypeScript Je hebt klassen, interfaces, modules en namespaces tot je beschikking, maar functies spelen nog steeds een belangrijke rol. Het verschil tussen een functie in JavaScriptie en TypeScript zijn de parameter- en retourtypen beschikbaar met een 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 functie is de naam van de functie 'add' en de parameters zijn... a1 en b1Beide zijn van het type getal, en het retourtype is ook een getal. Als je een tekenreeks aan de functie doorgeeft, krijg je een compileerfout tijdens het compileren. JavaScript.

Een aanroep naar de functie: toevoegen

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

De parameters a1 en b1 zijn verplicht en veroorzaken een foutmelding als ze niet worden opgegeven. De parametertypen en het retourtype zijn even belangrijk en kunnen niet meer worden gewijzigd nadat ze zijn gedefinieerd.

Optionele parameters voor een functie

In JavaIn een script zijn alle parameters voor functies optioneel en worden ze als ongedefinieerd beschouwd als ze niet worden doorgegeven. Dat is niet het geval in... TypeScriptZodra u de parameters hebt gedefinieerd, moet u deze opgeven. Als u een parameter optioneel wilt maken, voegt u een vraagteken toe achter de parameternaam, zoals hieronder weergegeven:

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

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

Let op: optionele parameters moeten als laatste worden gedefinieerd. Het is niet mogelijk om de eerste parameter optioneel en de tweede verplicht te maken, omdat de compiler dan niet weet welke waarde is opgegeven.

Wijs standaardwaarden toe aan parameters

U kunt standaardwaarden toewijzen aan parameters 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 optionele parameters moeten ook standaard geïnitialiseerde parameters aan het einde van de parameterlijst worden geplaatst.

Rustparameters

Je hebt gezien hoe TypeScript Het behandelt verplichte parameters, optionele parameters en parameters met een standaardwaarde. Nu kijken we naar restparameters. Restparameters zijn een groep optionele parameters die samen zijn gedefinieerd met behulp van drie stippen (…) gevolgd door de naam van de parameter, die een array is.

Syntaxis voor restparameters:

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

Zoals hierboven weergegeven, is de parameter 'rest' een array met drie puntjes ervoor. Deze array bevat alle resterende argumenten die aan de functie worden doorgegeven.

Voorbeeld:

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

Pijlfuncties

Een pijlfunctie is een van de belangrijke functies die in ES6 is uitgebracht en is beschikbaar in TypeScript Ook. De syntax bevat een dikke pijl, vandaar de naam.

Pijlfunctie Syntaxis:

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

Waarvoor dient een pijlfunctie?

Laten we een voorbeeld bekijken om het gebruik van een pijlfunctie 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 functie gemaakt met een eigenschap `score` die is geïnitialiseerd op 0, en een methode `getScore` die intern `setTimeout` gebruikt en na één seconde `this.score` logt. De gelogde waarde is echter ongedefinieerd, hoewel `this.score` wel gedefinieerd en geïnitialiseerd is. Het probleem zit hem in de dit trefwoord. De functie binnen setTimeout heeft zijn eigen `this`, en aangezien `score` daar niet gedefinieerd is, is het resultaat ongedefinieerd.

Hetzelfde kan worden afgehandeld met behulp van een pijlfunctie, zoals hieronder wordt getoond:

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

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

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

Een pijlfunctie heeft geen eigen functie ditEn in plaats daarvan deelt het de variabele uit de bovenliggende scope, waardoor variabelen die buiten de scope zijn gedeclareerd, toegankelijk zijn met `this` binnen een pijlfunctie. Ze zijn handig vanwege de kortere syntax, maar ook voor callbacks, eventhandlers en timingfuncties.

TypeScript enums

A TypeScript Een enum is een object dat een verzameling van gerelateerde waarden bevat die samen zijn opgeslagen. JavaScript biedt van nature geen ondersteuning voor enums. De meeste programmeertalen zoals Java, C, en C++ ondersteuning voor enumeraties, en TypeScript maakt ze ook beschikbaar. 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 met de waarden North, South, East en West. De waarden zijn genummerd van 0 voor de eerste waarde en worden met 1 verhoogd voor elke volgende waarde.

Declareer een Enum met een numerieke waarde.

Standaard krijgt een enum-lid, als er geen waarde aan is toegekend, een getal vanaf 0. Het volgende voorbeeld toont een enum met expliciete numerieke waarden.

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

U kunt ook een startwaarde toewijzen, waarna de volgende leden een oplopende waarde ontvangen. Bijvoorbeeld:

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

Het noorden begint bij 5, dus het zuiden is 6, het oosten is 7 en het westen is 8.

U kunt ook zelf waarden kiezen in plaats van de standaardwaarden. Bijvoorbeeld:

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

Hoe krijg ik toegang tot een Enum?

Het volgende voorbeeld laat zien hoe je een enum in je 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 JavaHet script 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 JavaHet script ondersteunt geen enumeraties; de compiler zet de enumeratie om in een zelfaangeroepen functie, zoals hierboven weergegeven. De dubbele toewijzing zorgt voor de omgekeerde map.ping van nummer terug naar naam.

Declareer een Enum met een tekenreekswaarde.

U kunt naar keuze tekenreekswaarden toewijzen, zoals in het onderstaande voorbeeld wordt getoond.

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 undefined

de gecompileerde JavaHet script 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?

Bestanden gemaakt in TypeScript Globale toegang betekent dat variabelen die in het ene bestand zijn gedeclareerd, in een ander bestand toegankelijk zijn. Dit globale karakter kan leiden tot conflicten in de code en problemen tijdens de uitvoering. De functionaliteit voor het exporteren en importeren van modules kan worden gebruikt om conflicten tussen globale variabelen en functies te voorkomen. Deze functie is geïntroduceerd in JavaScript met de ES6-release en wordt ook ondersteund in TypeScript.

Waarom heb je modules nodig? TypeScript?

Het volgende voorbeeld laat het probleem zien zonder modules.

Voorbeeld test1.ts

let age : number = 25;

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

Voorbeeld test2.ts

In test2.ts heb je toegang tot de variabele. leeftijd gedefinieerd in test1.ts en ook aangepast, zoals hieronder weergegeven:

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

Dit kan tot veel problemen leiden, omdat de variabelen wereldwijd beschikbaar zijn en overal kunnen worden gewijzigd.

Met modulesDe geschreven code blijft lokaal binnen het bestand en is niet toegankelijk van buitenaf. Om iets uit een bestand te delen, moet het worden geëxporteerd met het trefwoord `export`. Exporteren wordt gebruikt wanneer je een variabele, klasse, functie of interface in een ander bestand wilt gebruiken. import Deze functie wordt gebruikt wanneer je toegang wilt krijgen tot een geëxporteerd item. Hierdoor blijft de code intact binnen het bestand en worden variabelenamen niet door elkaar gehaald, zelfs als je dezelfde variabelenamen definieert.

Exporteren en importeren gebruiken

Er zijn veel manieren om te exporteren en importeren. We bespreken de meest gebruikte syntaxis.

De syntaxis voor import en export 1:

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

test1.ts

export let age: number = 25;

Het trefwoord `export` wordt gebruikt om de variabele `age` te delen met een ander bestand.

test2.ts

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

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

Syntaxis voor importeren en exporteren 2:

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

export = classname;

import classname = require("file path of modulename")

Wanneer u gebruikt exporteren = Om je module te exporteren, moet je bij het importeren require(“bestandspad van modulenaam”) gebruiken.

Hier volgt een werkend voorbeeld dat dit geval illustreert.

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 zelfstandig werken, dus je hebt een modulelader nodig om de importafhankelijkheden te vinden, zoals te zien is in de TypeScript Zie de bovenstaande voorbeelden. De beschikbare moduleladers zijn CommonJS voor Node.js en Require.js om in de browser te draaien.

Om code te compileren met behulp van het CommonJS-moduleformaat, gebruikt u de volgende opdracht:

tsc --module commonjs testCustomer.ts

Om code te compileren met behulp van het Requirejs-moduleformaat, gebruikt u de volgende opdracht:

tsc --module amd testCustomer.ts

De afhankelijke bestanden worden met bovenstaand commando naar JavaScript-bestanden geconverteerd.

Voorbeeld van het converteren van testCustomer.ts naar testCustomer.js met behulp van Requirejs

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

Voorbeeld: Customer.ts converteren 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 de afhankelijkheden zoals weergegeven bevat.

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

Een namespace bevat een verzameling klassen, interfaces, variabelen en functies die samen in één bestand zijn opgeslagen.

Syntaxis van naamruimte

namespace name{

export class {
}

export interface {
}

export const constname;

}

De bijbehorende 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 StudentenopstellingEn je hebt een interface StudDetails, een functie addSpace en een klasse genaamd Student toegevoegd.

Toegang tot een naamruimte

Hieronder staat de code waarin je de naamruimte gebruikt. Studentenopstelling.

testStudentSetup.ts

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

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

De klasse, interface of functie die beschikbaar is binnen een namespace moet worden aangeroepen met behulp van de naam van de namespace, bijvoorbeeld: StudentSetup.addSpace om toegang te krijgen tot de functie en StudentSetup.Student om toegang te krijgen tot de klas.

Je kunt beide bestanden samenvoegen tot één JavaScript-bestand, zoals hieronder wordt weergegeven:

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

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

node namespace.js

Output:

The name is :H a r r y

Omgevingsverklaringen in TypeScript

TypeScript hiermee kunt u gebruikmaken van derden JavaScriptbestanden die gebruikmaken van omgevingsdeclaraties. Het voordeel hiervan is dat u de bibliotheek niet hoeft te herschrijven, maar toch alle functies ervan kunt gebruiken, inclusief typecontrole. TypeScript.

Ambient-syntaxis

Om een ​​omgevingsmodule te 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-bestand moet je ernaar verwijzen als volgt:

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

De verklaring van het omgevingstype in TypeScript verwijst naar de bibliotheek van derden en declareert de benodigde functies opnieuw met hun eigen typen. Neem bijvoorbeeld het kleine JavaDe scriptbibliotheek wordt hieronder weergegeven.

Derden JavaScriptbestand: 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 de functies isString, convertToUpperCase, convertToLowerCase en convertToStringBold.

Een omgevingsmodule maken in TypeScript

Nu gaan we een omgevingsmodule maken die verwijst naar de JavaHet script voert bovenstaande functies uit en voegt waar nodig typecontroles toe.

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;

Je definieert een module met de naam TestString en exporteert de interface StringsFunc. Elke functiesignatuur geeft aan wat de functie accepteert en retourneert:

• isString(str: string): booleaanse waarde – neemt een tekenreeks als invoer en retourneert een boolean. Het doorgeven van een getal of een ander gegevenstype leidt tot een compileerfout.
• convertToUpperCase(str: string): string – neemt een tekenreeks als invoer en retourneert een tekenreeks.
• convertToLowerCase(str: string): string – neemt een tekenreeks als invoer en retourneert een tekenreeks.
• convertToStringBold(str: tekenreeks): tekenreeks – neemt een tekenreeks als invoer en retourneert een tekenreeks.

Aangezien de JavaHet scriptbestand geeft de objectnaam StringChecks weer; we verwijzen uiteindelijk naar dezelfde naam in het .d.ts-bestand:

declare var StringChecks: TestString.StringsFunc;

Het gebruik van een Ambient-module in TypeScript

Hier is het bestand test.ts, dat gebruikmaakt van het omgevingsbestand tstring.d.ts.

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

Compileer met tsc test.ts om test.js te genereren:

/// <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 kun je test.js in een HTML-bestand gebruiken in combinatie met het bibliotheekbestand testString.js.

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

Output:

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

Om verder te gaan, vergelijk de twee talen rechtstreeks in TypeScript vs JavaScript, opnieuw bezoeken JavaScript array-methoden voor de hier gebruikte niet-getypte equivalenten, en bestudeer lussen in JavaScript en intern en extern JavaScript De gecompileerde uitvoer is gebaseerd op de basisprincipes van de browser.

Veelgestelde vragen