TypeScript Tutorial: Hvad er, Interface, Enum, Array med eksempel

Hvad er TypeScript?

TypeScript er et supersæt af JavaManuskript. TypeScript er rent objektorienteret programmeringssprog, der understøtter klasser, interfaces osv. Det er et open source sprog udviklet af Microsoft som statisk kompilerer koden til JavaManuskript. Det kan nemt køre i en browser eller Nodejs.

Alle de seneste funktioner frigivet til ECMAScript understøttes i TypeScript og derudover TypeScript har sine egne objektorienterede funktioner som grænseflader, ambient-deklaration, klassearv osv., som hjælper med at udvikle en stor applikation, som ellers ville være svær at lave i JavaScript.

Sådan downloades og installeres TypeScript

Her er den trinvise proces til download og installation TypeScript:

Trin 1) Download og installer Nodejs

Gå til det officielle websted for nodejs: https://nodejs.org/en/download/ og download og installer nodejs i henhold til dit operativsystem. Den detaljerede instruktion om, hvordan du downloader nodejs er tilgængelig her: https://www.guru99.com/download-install-node-js.html

Trin 2) Tjek Nodejs og npm version

For at kontrollere, om nodejs og npm er installeret, skal du bare tjekke versionen i din kommandoprompt.

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

D:\typeproject>npm --version
6.4.1

Så du har nodejs v10 og npm 6 installeret.

Trin 3) TypeScript Installation

Opret din projektmappe typeproject/ og kør npm init, som vist i kommandoen nedenfor:

npm init

Trin 4) Start installationen

Nu vil vi oprette pakken .json, som gemmer afhængighederne for vores projekt.

Når installationen er færdig TypeScript som følger:

npm -g install typescript

Ovenstående kommando tager sig af installationen TypeScript. Tilføjelse af "-g" til npm install vil installere TypeScript globalt. Fordelen ved at bruge -g er, at du vil være i stand til at bruge TypeScript TSC kommando fra enhver mappe, som den er installeret globalt. Hvis du ikke ønsker at installere TypeScript globalt brug nedenstående kommando:

npm --save install typescript

Opret src/-mappe i din projektmappe og i src/-mappe opret TypeScript fil test.ts og skriv din kode.

Eksempel : test.ts

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

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

Kompiler TypeScript kode til Javascript

For at kompilere ovenstående kode, brug følgende kommando:

If TypeScript er installeret globalt, brug nedenstående kommando:

tsc test.ts

If TypeScript er installeret lokalt til dit projekt, du skal bruge stien til TypeScript fra node_modules som vist:

node_modules/typescript/bin/tsc test.ts

Ovenstående kommando vil oprette en test.js-fil og få kode kompileret til javascript.

Eksempel : test.js

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

Udfør Javascript ved hjælp af Nodejs

I denne TypeScript tutorial, vil vi udføre test.js i nodejs som følger:

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

Værdien trøstet vises ved udførelse af test.js

Udfør JavaScript i browser

Eksempel:

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

Kompiler TypeScript kode til Javascript ved hjælp af EcmaScript-version

TypeScript understøtter alle de frigivne Ecmascript-funktioner, og udviklere kan bruge det samme, mens de koder. Men ikke alle de nye funktioner understøtter ældre browsere, hvorfor du skal kompilere javascript til en ældre version af Ecmascript. TypeScript giver kompileringsmuligheder, der kan gøre det.

Eksempel : test.ts

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

addnumbers(10, 20);

For at kompilere til ES-versionen efter eget valg, kan du bruge indstillingen target eller t i din kommando som følger:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Som standard er målet ES3. Hvis du vil ændre det, kan du bruge ovenstående kommando.

På nuværende tidspunkt vil vi bruge ES6 i dette TypeScript tutorial som mål:

tsc --target ES6  test.ts

test.ts til test.js

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

addnumbers(10, 20);

Koden forbliver som den er, da pilefunktionen du har brugt er en ES6-funktion og det samme når den kompileres til ES6 ændres ikke.

Som standard er målet ES3, så uden mål får du test.js som:

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

Så herovre er den fede pil ændret til en normal anonym funktion.

Variabler i TypeScript

Variabler bruges til at gemme værdier, og værdien kan være en streng, tal, boolesk eller et udtryk. Når det kommer til variabler i TypeScript, de ligner JavaScript. Så lad os lære at erklære og tildele værdi til variabler i TypeScript.

Variabler kan ikke bruges i kode uden at definere. For at erklære en variabel kan du bruge

var søgeord,

lad søgeord

const søgeord

Arbejde med variabler i TypeScript ligner javascript, og brugere, der er fortrolige med javascript, vil finde det meget nemt. Kun variabler som lad og const er ikke meget brugt i forhold til var.

Erklæring af variable ved hjælp af var

Syntaks:

var firstname = "Roy";

Lad os tage et kig på nogle få TypeScript eksempler for at forstå, hvordan var nøgleord fungerer, og også omfanget af variabler, der er erklæret ved hjælp af var nøgleord.

Eksempel 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

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

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

Erklære variabler ved hjælp af let

TypeScript syntaks for let er som angivet nedenfor:

Syntaks:

let name="Roy";

Arbejdet med lad variabel er næsten den samme som var, men med en lille forskel og vil forstå det samme ved at bruge en TypeScript eksempel.

Eksempel:

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

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

Over TypeScript eksempel kaster en fejl, men det samme ville have fungeret fint, hvis det var med var søgeord. Variabler ved hjælp af lad er tilgængelige inden for det deklarerede blokomfang, f.eks. er variablen t kun tilgængelig i if-blokken og ikke for hele funktionen.

Også hvis du tilfældigvis erklærer en variabel inde i en funktion, eller for-loop, while-loop, TypeScript skifte blok, vil den kun være tilgængelig for dig inden for den blok og ingen reference til den uden for blokken, og den vil give en fejl, hvis variablen bruges uden for blokken. Dette er hovedforskellen mellem var og let nøgleordserklærede variabler.

Erklæring af variable ved hjælp af const

Const betyder konstante variable. De ligner ladevariabler, med den eneste forskel er, at når først en værdi er tildelt, kan den ikke ændres.

Syntaks:

const name;

Eksempel:

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

Så brugere kan kun bruge const-variabler i tilfælde, hvor de ved, at de ikke behøver at ændre de tildelte værdier.

Taster ind TypeScript

TypeScript er et stærkt maskinskrevet sprog, hvorimod javascript ikke er det. En variabel, der har en værdi defineret som en streng, kan ændres til et tal uden problemer i Javascript. Det samme tolereres ikke i TypeScript. I TypeScript, er typen til en variabel kun defineret i starten, og gennem udførelsen skal den bibeholde den samme type, enhver ændring af den vil føre til en kompileringsfejl under kompilering til javascript.

Følgende er typerne:

nummer
String
Boolesk
Enhver
Void

nummer

Tager kun heltal, flydende, brøker osv.

Syntaks:

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

Her er nogle vigtige metoder, som kan bruges på taltyper:

toFixed() – det vil konvertere tallet til en streng og vil beholde decimaler givet til metoden.

toString () – denne metode vil konvertere tal til en streng.

Værdi af() – denne metode vil give tallets primitive værdi tilbage.

til præcision() – denne metode vil formatere tallet til en specificeret længde.

Eksempel: med alle strengmetoder

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

String

String: kun strengværdier

Syntaks:

let str :string = "hello world";

Her er nogle vigtige metoder, som kan bruges på strengtyper:

delt() – denne metode vil opdele strengen i et array.
tegnAt() – denne metode vil give det første tegn for det angivne indeks.
indeks af() – denne metode vil give positionen for den første forekomst for den værdi, der er givet til den.
udskifte () – denne metode tager 2 strenge, først den værdi, der skal søges i strengen, og hvis den er til stede vil den erstatte den anden og vil give en ny streng tilbage.
Trimme () – denne metode fjerner hvide mellemrum fra begge sider af strengen.
substr() – denne metode vil give en del af strengen, som vil afhænge af positionen angivet som start og slut.
understreng() – denne metode vil give en del af strengen, som vil afhænge af positionen angivet som start og slut. Tegnet i slutpositionen vil blive udelukket.
til Store bogstaver() - vil konvertere strengen til store bogstaver
til LowerCase() – vil konvertere strengen til små bogstaver.

Eksempel:

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"

Boolesk

Vil acceptere logiske værdier som sand, falsk, 0 og 1.

Syntaks:

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

Enhver

Syntaks:

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

Variabler erklæret vha enhver type kan tage variablen som en streng, tal, matrix, boolean eller void. TypeScript vil ikke kaste nogen kompileringsfejl; dette svarer til de variabler, der er deklareret i JavaManuskript. Brug kun en hvilken som helst type variabel, når du ikke er sikker på, hvilken type værdi, der vil blive knyttet til den pågældende variabel.

Void

Void type bruges mest som en returtype på en funktion, der ikke har noget at returnere.

Syntaks:

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

TypeScript Array

An Array in TypeScript er en datatype, hvor du kan gemme flere værdier. Lad os lære, hvordan du deklarerer og tildeler værdier for Array-operationer i TypeScript.

Siden TypeScript er et stærkt indtastet sprog, skal du fortælle, hvad der vil være datatypen for værdierne i et array. Ellers vil den betragte den som en hvilken som helst type.

Erklær og initialiser et array

Syntaks:

let nameofthearray : Array<typehere>

Eksempel

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.

Forskellige måder at få adgang til elementer fra et array

For at få elementerne fra et array starter værdierne fra indeks 0 til længden af arrayet.

Eksempel:

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

Du kan også hente elementerne fra et array vha TypeScript forum loop som vist nedenfor:

Ved brug af TypeScript til løkke

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

Brug af for-in loop

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

Output:
2016
2017
2018
2019

Brug af for-of-løkke

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

Brug for hver sløjfe

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

TypeScript Array-metoder

TypeScript Array-objekt har mange egenskaber og metoder, som hjælper udviklere med at håndtere arrays nemt og effektivt. Du kan få værdien af en egenskab ved at angive arrayname.property og outputtet af en metode ved at angive array name.method().

længde ejendom

=> Hvis du vil vide antallet af elementer i et array, kan du bruge egenskaben length.

Reverse metode

=> Du kan vende rækkefølgen af elementer i et array ved at bruge en omvendt metode.

Sorteringsmetode

=> Du kan sortere elementerne i et array ved hjælp af sorteringsmetoden.

Pop metode

=> Du kan fjerne det sidste element i et array ved hjælp af en pop-metode.

Shift metode

=> Du kan fjerne det første element i et array ved hjælp af shift-metoden.

Push-metode

=> Du kan tilføje værdi som det sidste element i arrayet.

concat metode

=> Du kan forbinde to arrays til et array-element.

Eksempel på længdeegenskab

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

Eksempel på omvendt metode

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

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

Eksempel på sorteringsmetode

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

Eksempel på pop-metoden

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

Eksempel på skiftemetode

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

Eksempel på push-metode

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

Eksempel på konkat metode

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 i TypeScript

TypeScript er et supersæt af JavaScript, så hvad der er muligt at gøre i JavaScript er også muligt i TypeScript. Klasse er en ny funktion tilføjet fra ES6 og frem, så tidligere JavaScriptet klassetypefunktionaliteten blev prøvet ved hjælp af en funktion med prototypefunktionalitet til at genbruge kode. Ved at bruge klasse kan du have vores kode næsten tæt på sprog som java, c#, python osv., hvor koden kan genbruges. Med funktionen af klasse i TypeScript/JavaScript, det gør sproget meget kraftfuldt.

Definer en klasse i TypeScript

Her er en grundlæggende klassesyntaks i TypeScript:

class nameofclass {
     //define your properties here

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

Eksempel: Et fungerende eksempel på 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;
    }
}

I ovenstående eksempel har du en klasse kaldet Elever. Det har egenskaber alder, navn og roll_no.

Konstruktør i en TypeScript Klasse

Klassestuderende-eksemplet, vi har defineret ovenfor, det har en konstruktør som vist nedenfor:

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

Konstruktørmetoden har parametrene alder, navn og roll_no. Konstruktøren sørger for at initialisere egenskaberne, når klassen kaldes. Ejendommene tilgås vha denne søgeord. Eksempel this.age for at få adgang til egenskaben alder, this.roll_no for at få adgang til roll_no osv. Du kan også have en standardkonstruktør, som vist nedenfor:

constructor () {}

Metoder inde i en TypeScript Klasse

Eksemplet på klassen Elever er definerede metoder for eksempel getRollNo(), getName(), getAge(), som bruges til at give detaljer om egenskaber roll_no, navn og alder.

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

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

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

Oprettelse af forekomst af klasse i TypeScript

Eksempel:

In TypeScript for at oprette en forekomst af en klasse skal du bruge den nye operator. Når vi opretter en forekomst af en klasse ved hjælp af ny operator, får vi objektet, som kan få adgang til klassens egenskaber og metoder som vist nedenfor:

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

kompilering TypeScript Klasse til JavaScript

Du kan bruge tsc-kommandoen som vist nedenfor til at kompilere til Javascript.

Command: tsc  Students.ts

Udgangen af Javascript kode på kompilering er som vist nedenfor:

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, konverteres klassen til en selvpåkaldt funktion.

Klasse Arv

Klasser kan nedarves ved hjælp af udvide søgeord i TypeScript.

Klasse arvesyntaks:

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 vil kunne dele klasse A metoder og egenskaber.

Her er et fungerende eksempel på en klasse, der bruger arv

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

Du har to klasser, Person og Student. Elevklasse udvider Person, og objektet, der er oprettet på Student, kan få adgang til sine egne metoder og egenskaber samt den klasse, det har udvidet.

Lad os nu tilføje nogle flere ændringer til ovenstående klasse.

Eksempel:

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 ændringer, du har tilføjet i forhold til det foregående eksempel, er, at der er en konstruktør defineret i klassen Student. Konstruktøren skal tage de samme parametre som basisklassen og tilføje eventuelle yderligere parametre.

In TypeScript du er nødt til at kalde super vil alle params som baserne params i den. Dette skal være det første, der skal gøres inde i konstruktøren. Super vil udføre konstruktøren af den udvidede klasse.

Få adgang til modifikatorer i TypeScript

TypeScript understøtter offentlige, private og beskyttede adgangsmodifikatorer til dine metoder og egenskaber. Som standard, hvis adgangsmodifikatorer ikke er givet, betragtes metoden eller egenskaben som offentlig, og de vil være let tilgængelige fra klassens objekt.

I tilfælde af private adgangsmodifikatorer er de ikke tilgængelige fra klassens objekt og kun beregnet til at blive brugt i klassen. De er ikke tilgængelige for den nedarvede klasse.

I tilfælde af beskyttede adgangsmodifikatorer er de beregnet til at blive brugt inde i klassen og den nedarvede klasse og vil ikke være tilgængelige fra klassens objekt.

Eksempel:

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

Privat: egenskaber eller metoder kan ikke tilgås af klassens objekt og også den afledte klasse, de er beregnet til at blive brugt internt i klassen.
Beskyttet: egenskaber og metoder kan heller ikke tilgås af det oprettede objekt. De er tilgængelige inde fra klassen og tilgængelige for den klasse, der forlænger den.
Offentlig: egenskaber og metoder erklæres uden nøgleord. De er let tilgængelige ved hjælp af klassens objekt udefra.

Interface i TypeScript

En af kerneegenskaberne ved TypeScript er grænseflader. Grænsefladen er et sæt af en defineret regel, som skal implementeres af den enhed, der bruger den. Entiteten kan være en klasse, funktion eller variabel. En grænseflade kan bestå af egenskaber og metoder. Du kan definere egenskaber som valgfri ved at bruge "?" syntaks for den pågældende egenskab eller metode. Interfacet tilføjer en stærk typekontrol for enhver funktion, variabel eller klasse, der implementerer grænsefladen.

Syntaks for en grænseflade i TypeScript

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

Du har defineret en grænseflade med navnet Dimension, som har egenskaber bredde og højde, og begge har type som en streng.

Nu kan denne grænseflade implementeres af en variabel, en funktion eller en klasse. Her er eksemplet på variabel implementering af grænsefladen Dimension.

Eksempel:

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

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

Signaturen for grænsefladen Dimension har bredde og højde, og begge er obligatoriske. I tilfælde af, at der under implementering af grænsefladen går glip af nogen af egenskaberne, eller typen ændres, vil det give en kompileringstidsfejl, mens koden kompileres til javascript.

Ovenstående kode, når den er kompileret til javascript, ser ud som følger:

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

Lad os nu se, hvordan man bruger en grænseflade med en funktion.

Brug af grænseflade på en funktion som returtype

Eksempel:

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

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

I ovenstående eksempel er grænsefladen Dimension implementeret på funktionen getDimension() som returtype. Returtypen af getDimension() skal matche med egenskaberne og typen nævnt for Interface Dimension.

Den kompilerede kode til Javascript bliver som følger:

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

Under kompilering, hvis returtypen ikke stemmer overens med grænsefladen, vil den give en fejl.

Interface som funktionsparameter

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"

Så ovenstående eksempel har du brugt Interface Dimension som en parameter til funktionen getDimension(). Når du kalder funktionen, skal du sikre dig, at parameteren, der sendes til den, stemmer overens med den definerede grænsefladeregel.

Den kompilerede kode til Javascript bliver som følger:

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

Klasseimplementeringsgrænseflade

For at gøre brug af interface med en klasse, skal du bruge nøgleordet redskaber.

Syntaks for klasse, der implementerer en grænseflade:

class NameofClass implements InterfaceName {
}

Følgende eksempel viser arbejdet med grænsefladen med klassen.

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

I ovenstående eksempel har du defineret grænseflade Dimension med egenskaber bredde og højde både af typen streng og en metode kaldet getWidth() som har returværdi som en streng.

Den kompilerede kode til Javascript bliver som følger:

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

Fungerer i TypeScript

Funktioner er et sæt instruktioner, der udføres for at udføre en opgave. I Javascript, det meste af koden er skrevet i form af funktioner og spiller en stor rolle. I TypeScript, du har klasse, grænseflader, moduler, navnerum til rådighed, men stadig spiller funktioner en vigtig rolle. Forskellen mellem funktionen i javascript og TypeScript funktion er returtypen tilgængelig med TypeScript funktion.

JavaScript funktion:

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

TypeScript fungere:

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

I ovenstående funktioner tilføjes navnet på funktionen, parametrene er a1og b1 begge har en type som et tal, og returtypen er også et tal. Hvis du tilfældigvis sender en streng til funktionen, vil den give en kompileringsfejl, mens den kompileres til JavaManuskript.

Ring til funktionen: tilføj

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

Paramerne a1 og b1 er obligatoriske parametre og vil give en fejl, hvis den ikke modtages på den måde. Param-typen og returtypen er også meget vigtig og kan ikke ændres, når den først er defineret.

Valgfri parametre til en funktion

I javascript er alle parametrene til funktionerne valgfrie og betragtes som udefinerede, hvis de ikke er bestået. Men det samme er ikke tilfældet med TypeScript, når du først har defineret parametrene, skal du også sende dem, men i tilfælde af at du vil beholde en param valgfri, kan du gøre det ved at bruge? mod paramnavnet som vist nedenfor:

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.

Bemærk venligst, at de valgfrie parametre kun skal defineres i en funktion til sidst, du kan ikke have den første parameter som valgfri og anden parameter som obligatorisk. Når du kalder funktionen med en parameter, vil compileren give en fejl. Så det er nødvendigt at beholde de valgfrie parametre til sidst.

Tildel standardværdier til parametre

Du kan tildele standardværdier til parametre som vist nedenfor:

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

I lighed med valgfrie parametre skal standard initialiserede parametre også her holdes i slutningen i en funktion.

Hvileparametre

Du har set hvordan TypeScript håndterer obligatoriske parametre, valgfri parametre og standardværdien initialiserede parametre. Vil nu tage et kig på hvileparameter. Hvileparametre er en gruppe af valgfrie parametre, der er defineret sammen, og de er defineret ved hjælp af tre prikker (…) efterfulgt af navnet på param, som er en matrix.

Syntaks for hvileparametre:

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

Som vist ovenfor defineres hvileparametrene ved hjælp af (...param-navn); resten param er et array med tre prikker foran. Arrayet vil have alle parametrene videregivet til sig. Du kan kalde funktionen, som vist i eksemplet nedenfor:

Eksempel:

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

Pilfunktioner

En pilefunktion er en af de vigtige funktioner frigivet i ES6, og den er tilgængelig i TypeScript også. Pilfunktions syntaks har en fed pil i sig, på grund af hvilken funktionen kaldes en pilefunktion.

Pilefunktion Syntaks:

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

Hvad er brugen af pilefunktionen?

Lad os tage et kig på eksemplet for at forstå brugen af pil-funktionen:

Eksempel:

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

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

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

Du har oprettet en anonym funktion, som har en egenskab denne. Score initialisere til 0 og en metode getScore som internt har en setTimeout, og på 1 sekund trøster den denne.score. Den trøstede værdi giver undefined selvom du har this.score defineret og initialiseret. Spørgsmålet her er med this søgeord. Funktionen inde i setTimeout har sin egen dette, og den forsøger at referere scoren internt, og da den ikke er defineret, giver den udefineret.

Det samme kan gøres ved at bruge pilefunktionen som vist nedenfor:

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

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

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

Du har ændret funktionen i setTimeout til en pilefunktion som vist nedenfor:

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

En pilefunktion har ikke sin egen denne defineret, og den deler sin forælder denne, så variabler erklæret udenfor er let tilgængelige ved hjælp af denne inde i en pilefunktion. De er nyttige på grund af den kortere syntaks såvel som til tilbagekald, hændelseshandlere, indvendige timingfunktioner osv.

TypeScript Enums

TypeScript Enum er et objekt, som har en samling af relaterede værdier gemt sammen. Javascript understøtter ikke enums. Det meste af programmeringssprog ligesom Java, C, C++ understøtninger TypeScript Enum og den fås også med TypeScript også. Enums er defineret ved hjælp af nøgleordet enum.

Hvordan erklærer man en Enum?

Syntaks:

enum NameofEnum {
   value1,
   value2,
    ..
}

Eksempel: Enum

enum Directions {
North,
South,
East,
West
}

I ovenstående eksempel har du defineret en enum kaldet retninger. Den angivne værdi er nord, syd, øst, vest. Værdierne er nummereret fra 0 for den første værdi i enummet og øges efterfølgende med 1 for den næste værdi.

Erklær en Enum med en numerisk værdi

Som standard, hvis en enum ikke gives nogen værdi, betragter den det som et tal, der starter fra 0. Følgende eksempel viser en enum med en numerisk værdi.

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

Du kan også tildele en startværdi til enum, og de næste enum-værdier vil få de øgede værdier. For eksempel:

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

Nu starter enum-værdien nord med 5, så syd får værdien som 6, øst = 7 og vest = 8.

Du kan også tildele værdier efter eget valg i stedet for at tage standardværdierne. For eksempel:

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

Hvordan får man adgang til en Enum?

Følgende eksempel viser, hvordan du gør brug af Enum i din kode:

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

Den kompilerede kode til javascript er som følger:

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

Siden Javascript understøtter ikke enums, den konverterer enum til en selvpåkaldt funktion som vist ovenfor.

Erklær en Enum med en strengværdi

Du kan tildele strengværdier efter eget valg, som vist i eksemplet nedenfor:

Eksempel:

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

Den kompilerede kode til javascript er som følger:

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

Hvad er modulerne i TypeScript?

Filerne oprettet i TypeScript har global adgang, hvilket betyder, at variabler, der er deklareret i én fil, nemt kan tilgås i en anden fil. Denne globale karakter kan forårsage kodekonflikter og kan forårsage problemer med udførelse under kørsel. Du har eksport- og importmodulfunktionalitet, som kan bruges til at undgå globale variable funktionskonflikter. Denne funktion er tilgængelig i JavaScript med ES6-udgivelse og også understøttet i TypeScript.

Hvorfor har du brug for moduler i TypeScript?

Følgende eksempel viser problemet uden moduler:

Eksempel test1.ts

let age : number = 25;

Du har defineret en variabel alder af typenummer i test1.ts.

Eksempel test2.ts

I test2.ts-filen er du let i stand til at få adgang til variablen alder defineret i test1.ts og også ændre det som vist nedenfor:

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

Så ovenstående tilfælde kan skabe en masse problemer, da variablerne er globalt tilgængelige og kan ændres.

Med Moduler, forbliver koden skrevet for filen og kan ikke tilgås uden for den. For at få adgang til noget fra filen skal den eksporteres ved hjælp af eksportnøgleordet. It bruges, når du ønsker at variablen, klassen, funktionen eller grænsefladen skal bruges i en anden fil. Importere bruges, når du også vil have adgang til den eksporterede variabel, klasse eller grænseflade eller funktion. Hvis du gør det, forbliver koden skrevet intakt i filen, og selvom du definerer de samme variabelnavne, bliver de ikke blandet sammen og opfører sig lokalt i forhold til den fil, hvor de er deklareret.

Brug af eksport og import

Der er mange måder at eksportere og importere på. Så vil diskutere syntaks her, som er mest brugt.

Syntaksen for import og eksport 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"

Her er et fungerende eksempel ved hjælp af eksport og import.

Eksempel:

test1.ts

export let age: number = 25;

Eksporter nøgleord bruges til at dele aldersvariabel i en anden fil.

test2.ts

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

Import nøgleord bruges til at få adgang til alder variabel, og du skal angive filplaceringen som vist ovenfor.

Syntaks for import og eksport 2:

Der er en anden måde at eksportere på, og import og syntaks for det samme er som vist nedenfor:

export = classname;

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

Når du bruger eksport = for at eksportere dit modul, skal importen bruge require(“filsti til modulnavn”) for at importere det.

Her er et fungerende eksempel, der viser ovenstående tilfælde:

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

testKunde.ts

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

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

Modul Loader

Moduler kan ikke fungere alene, så du skal bruge modulindlæser for at lokalisere importafhængighederne, som du har set i TypeScript eksempler vist ovenfor. Den tilgængelige modulindlæser er CommonJS for nodejs og Require.js til at køre i browseren.

For at kompilere kode ved hjælp af CommonJS-modul, brug følgende kommando:

tsc --module commonjs testCustomer.ts

For at kompilere kode ved hjælp af Requirejs-modulet, brug følgende kommando:

tsc --module amd testCustomer.ts

De afhængige filer vil blive konverteret til js-fil med ovenstående kommando.

Eksempel testCustomer.ts til testCustomer.js ved hjælp af Requirejs

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

Eksempel Customer.ts til Customer.js ved hjælp af 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;
});

For at teste det ved at bruge require.js, skal du oprette en fil kaldet main.js, som har reference til afhængighederne som vist.

Her er mappestrukturen:

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

main.js

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

test.html

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

Navneområder i TypeScript

Namespace er dybest set har en samling af klasser, grænseflader, variabler, funktioner sammen i en fil.

Syntaks for navneområde

namespace name{

export class {
}

export interface {
}

export const constname;

}

Koden relateret er tilgængelig under ét navneområde.

Namespace arbejdseksempel: 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;
        }
    }
}

Navnet på navneområdet er Student Setup, du har tilføjet en grænseflade StudDetails , funktion addSpace og en klasse kaldet Student.

Adgang til navneområde

Følgende er koden, hvor du bruger navneområdet Studentopsætning.

testStudentSetup.ts

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

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

Klassen, grænsefladen, en funktion, der er tilgængelig i et navneområde, skal henvises ved hjælp af navnet på navneområdets eksempel StudentSetup.addSpace for at få adgang til funktionen, StudentSetup.Student for at få adgang til klassen.

Du kan kompilere begge filer til en js som vist nedenfor:

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

Kontroller outputtet i kommandoprompten ved hjælp af nedenstående kommando:

node namespace.js

Det vil vise output som:

The name is: H a r r y

Omgivende erklæringer i TypeScript

TypeScript giver dig mulighed for at bruge tredjeparts javascript-filer ved hjælp af ambient-deklaration. Fordelen ved denne funktion er, at du ikke behøver at omskrive og alligevel bruge alle bibliotekets funktioner i TypeScript.

Ambient syntaks

Sådan erklærer du omgivende modul:

declare module moduleName {
   //code here
}

Den omgivende fil skal gemmes som:

filename.d.ts

For at bruge filen filnavn.d.ts i din .ts skal du henvise til det som:

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

Omgivelsestypedeklarationen i TypeScript vil have en reference til tredjepartsbiblioteket og vil generklære de nødvendige funktioner med sin egen type. Overvej for eksempel, at du har et lille javascript-bibliotek, som vist nedenfor:

Third Party JavaScriptfil: testString.js

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

Du har et objekt kaldet StringChecks, som har funktioner som isString, convertToUpperCase, convertToLowerCase og converToStringBold.

Oprettelse af Ambient-modul i TypeScript

Nu vil der oprettes et ambient-modul, som vil have reference til ovenstående js-funktioner og også tilføje typekontrol i henhold til vores krav.

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

Du skal definere et modulnavn som TestString og have eksporteret grænseflade StringsFunc.

isString(str: streng): boolesk

=> Dette vil tage param som en streng, og returtypen vil være boolesk. Når du bruger i din .ts-fil, hvis du tilfældigvis sender param som et tal eller noget andet end streng, vil det give dig en kompileringsfejl.

convertToUpperCase(str:streng): streng

=> Dette vil tage argument som streng og returnere en streng. Det samme gælder convertToLowerCase(str: streng)
: streng; og convertToStringBold(str: streng): streng
;

Da du i javascript-filen har objektnavnet som StringChecks, skal vi endelig henvise til det samme i .d.ts-filen, hvilket gøres som:

declare var StringChecks: TestString.StringsFunc;

Brug af Ambient-modul i TypeScript

Nu her er test.ts-filen, hvor vil bruge ambient-filen tstring.d.ts

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

Kompiler TypeScript tsc test.ts til 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 kan du bruge test.js i html-filen og også biblioteksfilen testString.js

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

Dette er output set i konsollen:

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

TypeScript Historie

Lad se vigtige vartegn fra historien om TypeScript:

Efter to års intern udvikling kl Microsoft. TypeScript 0.9, udgivet i 2013
Yderligere support til generiske lægemidler TypeScript 1.0 blev udgivet på Build 2014
I juli 2014 kom en ny TypeScript kompileren kom, hvilket er fem gange hurtigere end den tidligere version.
I juli 2015, støtte til ES6-moduler, navneområde nøgleord, for, af support, dekoratører.
I november 2016, en tilføjet funktion som nøgle- og opslagstyper af kortlagte typer og hvile.
Den 27. marts 2018 understøtter betingede typer, den forbedrede nøgle med skæringstyper tilføjet i TypeScript.

Hvorfor bruge TypeScript?

Her er vigtige fordele/fordele ved at bruge TypeScript

Stort og komplekst projekt i JavaScript er vanskeligt at kode og vedligeholde.
TypeScript hjælper meget med kodeorganisering og slipper alligevel for de fleste fejl under kompilering.
TypeScript understøtter JS-biblioteker og API-dokumentation
Det er valgfrit skrevet scriptsprog
TypeScript Kode kan konverteres til almindelig JavaScript kode
Bedre kodestrukturering og objektorienterede programmeringsteknikker
Giver bedre støtte til udviklingstidsværktøj
Det kan udvide sproget ud over standard dekoratører, asynkron/afvent

Hvem bruger TypeScript?

Her er nogle af de mest almindelige anvendelser af TypeScript:

Vinkelholdet bruger TypeScript.
NodeJS og NPM installation
TypeScript Installation
Kompiler TypeScript kode til Javascript
Udfør kode ved hjælp af Nodejs
Udfør Javascript i browser
Kompiler TypeScript kode til Javascript ved hjælp af EcmaScript-version
Du kan nemt kompilere kode skrevet ind TypeScript til JavaScript ved hjælp af NodeJS.
Så til at arbejde med TypeScript du skal først downloade og installere NodeJS.

Resumé

TypeScript er et supersæt af JavaManuskript. TypeScript er rent objektorienteret programmeringssprog, der understøtter klasser, interfaces mv.
TypeScript understøtter alle de frigivne Ecmascript-funktioner, og udviklere kan bruge det samme, mens de koder.
Variabler bruges til at gemme værdier, og værdien kan være en streng, tal, boolesk eller et udtryk.
In TypeScript, er typen til en variabel kun defineret i starten, og gennem udførelsen skal den bibeholde den samme type, enhver ændring af den vil føre til en kompileringsfejl under kompilering til javascript.
Et array i TypeScript er en datatype, hvor du kan gemme flere værdier.
Klasse er en ny funktion tilføjet fra ES6 og frem, så tidligere JavaScriptet klassetypefunktionaliteten blev prøvet ved hjælp af en funktion med prototypefunktionalitet til at genbruge kode.
TypeScript understøtter offentlige, private og beskyttede adgangsmodifikatorer til dine metoder og egenskaber.
En af kerneegenskaberne ved TypeScript er grænseflader. Grænsefladen er et sæt af en defineret regel, som skal implementeres af den enhed, der bruger den.
Funktioner er et sæt instruktioner, der udføres for at udføre en opgave.
TypeScript Enum er et objekt, som har en samling af relaterede værdier gemt sammen.

Hvad er TypeScript?

Sådan downloades og installeres TypeScript

Kompiler TypeScript kode til Javascript

Udfør Javascript ved hjælp af Nodejs

Kompiler TypeScript kode til Javascript ved hjælp af EcmaScript-version

RELATEREDE ARTIKLER

Variabler i TypeScript

Erklæring af variable ved hjælp af var

Erklære variabler ved hjælp af let

Erklæring af variable ved hjælp af const

Taster ind TypeScript

nummer

String

Boolesk

Enhver

Void

TypeScript Array

Erklær og initialiser et array

Forskellige måder at få adgang til elementer fra et array

Ved brug af TypeScript til løkke

Brug af for-in loop

Brug af for-of-løkke

Brug for hver sløjfe

TypeScript Array-metoder

længde ejendom

Reverse metode

Sorteringsmetode

Pop metode

Shift metode

Push-metode

concat metode

Eksempel på længdeegenskab

Eksempel på omvendt metode

Eksempel på sorteringsmetode

Eksempel på pop-metoden

Eksempel på skiftemetode

Eksempel på push-metode

Eksempel på konkat metode

Klasse i TypeScript

Definer en klasse i TypeScript

Eksempel: Et fungerende eksempel på Class

Konstruktør i en TypeScript Klasse

Metoder inde i en TypeScript Klasse

Oprettelse af forekomst af klasse i TypeScript

kompilering TypeScript Klasse til JavaScript

Klasse Arv

Klasse arvesyntaks:

Få adgang til modifikatorer i TypeScript

Interface i TypeScript

Syntaks for en grænseflade i TypeScript

Brug af grænseflade på en funktion som returtype

Interface som funktionsparameter

Klasseimplementeringsgrænseflade

Fungerer i TypeScript

Ring til funktionen: tilføj

Valgfri parametre til en funktion

Tildel standardværdier til parametre

Hvileparametre

Pilfunktioner

Hvad er brugen af ​​pilefunktionen?

TypeScript Enums

Hvordan erklærer man en Enum?

Erklær en Enum med en numerisk værdi

Hvordan får man adgang til en Enum?

Erklær en Enum med en strengværdi

Hvad er modulerne i TypeScript?

Hvorfor har du brug for moduler i TypeScript?

Brug af eksport og import

Syntaksen for import og eksport 1:

Syntaks for import og eksport 2:

Modul Loader

Eksempel testCustomer.ts til testCustomer.js ved hjælp af Requirejs

Eksempel Customer.ts til Customer.js ved hjælp af Requirejs

Navneområder i TypeScript

Syntaks for navneområde

Adgang til navneområde

Omgivende erklæringer i TypeScript

Ambient syntaks

Sådan erklærer du omgivende modul:

Den omgivende fil skal gemmes som:

Hvad er brugen af pilefunktionen?