TypeScript Vejledning: Hvad er, Grænseflade, Enum, Array

Hvad er TypeScript?

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

Alle de seneste funktioner frigivet til ECMAScript understøttes i TypeScript, og derudover TypeScript har sine egne objektorienterede funktioner såsom grænseflader, ambient-deklarationer og klassearv, som hjælper med udviklingping en stor applikation, der ellers ville være vanskelig at bygge ind JavaScript.

Forholdet er ensrettet. Hver gyldighed JavaScriptfilen er allerede gyldig TypeScript, men det omvendte er ikke tilfældet, fordi typeannotationer kun findes i TypeScript og slettes under kompilering.

Hvorfor bruge TypeScript?

Her er de vigtige fordele ved at bruge TypeScript:

• Store og komplekse projekter i JavaScript er vanskeligt at kode og vedligeholde.
• TypeScript hjælper meget med kodeorganisering og fjerner de fleste fejl under kompilering i stedet for under kørsel.
• TypeScript understøtter JS-biblioteker og API-dokumentation.
• Det er et valgfrit typebestemt scriptsprog, så typer kan implementeres gradvist.
• TypeScript kode kan konverteres til almindelig JavaScriptkode til ethvert browsermål.
• Det giver bedre kodestrukturering og objektorienterede programmeringsteknikker.
• Det giver bedre understøttelse af udviklingsværktøjer, herunder autofuldførelse og sikker refactoring.
• Det kan udvide sproget ud over standarden med funktioner som dekoratører.

Den største praktiske gevinst er editor-understøttelse. Fordi compileren kender formen på hver værdi, kan en editor omdøbe en egenskab på tværs af et helt projekt og rapportere hvert sted, der ikke længere matcher.

TypeScript Historie

Lad os se på de vigtige milepæle fra historien om TypeScript:

• Efter to års intern udvikling kl Microsoft, TypeScript 0.9 blev udgivet i 2013.
• TypeScript 1.0, med yderligere understøttelse af generiske lægemidler, blev udgivet ved Build 2014.
• I juli 2014 kom en ny TypeScript compileren ankom, som var fem gange hurtigere end den tidligere version.
• I juli 2015 blev der tilføjet understøttelse af ES6-moduler, navneområdets nøgleord, for…of og decorators.
• I november 2016 blev kortlagte typer, nøgle- og opslagstyper samt objektrest og -spredning tilføjet.
• Den 27. marts 2018 blev betingede typer og forbedret keyof med krydsningstyper tilføjet.
• TypeScript 5.0, udgivet i marts 2023, moderniserede designere og reducerede pakkestørrelsen.
• TypeScript 6.0 ankom i marts 2026 som den endelige udgivelse bygget på JavaScriptkodebase.
• TypeScript 7.0 flytter compileren til en native Go-implementering, hvilket Microsoft rapporteres som cirka ti gange hurtigere end 6.0.

Hvem bruger TypeScript?

TypeScript er ikke længere et nichevalg. Det understøtter flere af de mest anvendte frontend- og backend-værktøjer, og listen nedenfor viser, hvor en nybegynder er mest tilbøjelig til at støde på det.

• Vinkel: Angular-frameworket er skrevet i TypeScript, og det forventes også, at der skrives applikationskode i den.
• React- og Vue-projekter: Begge økosystemer sender officielle TypeScript skabeloner, og de fleste moderne startere aktiverer det som standard.
• Node.js backends: Serverframeworks som NestJS er bygget op omkring TypeScript klasser og dekoratører.
• Redigeringsværktøjer: Visual Studio Code er i sig selv en stor TypeScript kodebase, hvilket er grunden til dens sprogunderstøttelse er så komplet.
• Store virksomheds front-ends: Teams, der arbejder med mange bidragydere, anvender det for at opdage integrationsfejl før implementering.

Sådan downloades og installeres TypeScript

Her er den trinvise proces til download og installation TypeScript:

Trin 1) Download og installer Nodejs

Gå til Nodejs' officielle hjemmeside, https://nodejs.org/en/download/, og download og installer Nodejs til dit operativsystem. Detaljerede instruktioner er tilgængelige i vejledningen på hvordan man downloader og installerer Node.js.

Trin 2) Tjek Nodejs og npm version

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

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

D:\typeproject>npm --version
10.9.2

Enhver nuværende Node LTS-udgivelse fungerer. TypeScript kræver i sig selv kun en understøttet Node-version for at køre compileren.

Trin 3) TypeScript Installation

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

npm init

Trin 4) Start installationen

Dette opretter package.json, som gemmer afhængighederne for vores projekt.

Når det er gjort, skal du installere 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 kunne bruge TypeScript TSC kommando fra enhver mappe, da den er installeret globalt. Hvis du ikke vil installere TypeScript globalt, brug kommandoen nedenfor:

npm install --save-dev typescript

Opret en src\-mappe i din projektmappe, og inde i src\ skal du oprette 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 skal du bruge følgende kommando.

If TypeScript er installeret globalt, brug kommandoen nedenfor:

tsc test.ts

If TypeScript er installeret lokalt i dit projekt, skal du bruge stien til TypeScript fra node_modules, som vist, eller kør det gennem npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Ovenstående kommando opretter en test.js-fil, hvor koden kompileres til JavaManuskript.

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

Nu vil vi udføre test.js i Nodejs som følger:

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

Den værdi, der sendes til console.log, vises, når test.js kører.

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 udgivede ECMAScript-funktioner, og udviklere kan bruge dem under kodning. Men ikke alle nye funktioner understøttes af ældre browsere, så du skal muligvis kompilere til en ældre version af ECMAScript. TypeScript tilbyder compiler-muligheder, der gør præcis 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 for den klassiske compiler. Hvis du vil ændre det, kan du bruge kommandoen ovenfor.

I øjeblikket bruger vi ES6 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, fordi den pilefunktion, du har brugt, er en ES6-funktion og forbliver uændret, når den kompileres til ES6.

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

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

Så her er den tykke 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 JavaScriptSå lad os lære at deklarere og tildele en værdi til variabler i TypeScript.

Variabler kan ikke bruges i kode uden at være defineret. For at deklarere en variabel kan du bruge

var søgeord,

lad søgeord

const søgeord

Arbejde med variabler i TypeScript svarer til JavaScript og brugere, der er bekendt med JavaScriptet vil finde det meget nemt. I moderne kode, lad og const foretrækkes frem for var, fordi deres blokomfang forhindrer en hel klasse af fejl.

Erklæring af variable ved hjælp af var

Syntaks:

var firstname = "Roy";

Lad os tage et kig på et par stykker TypeScript eksempler til at forstå, hvordan nøgleordet var fungerer, og også omfanget af variabler, der erklæres 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 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

Eksempel 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

Eksempel 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

Erklære variabler ved hjælp af let

TypeScript syntaks for let er som angivet nedenfor:

Syntaks:

let name = "Roy";

Arbejdet med lad variablen er næsten den samme som var, men med én vigtig forskel, som eksemplet nedenfor viser.

Eksempel:

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

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

Ovenstående TypeScript eksemplet kaster en fejl, men den samme kode ville have virket med var nøgleord. Variabler deklareret ved hjælp af lad er kun tilgængelige inden for den blok, hvor de er deklareret. I dette eksempel findes t kun inden for if-blokken, ikke i hele funktionen.

Det samme gælder inden for enhver funktion, for loop, while loop eller switch-blok. En let-variabel er kun tilgængelig inden for den blok, og reference til den uden for blokken giver en fejl. Dette er den primære forskel mellem var og let.

Erklæring af variable ved hjælp af const

Const betyder konstante variabler. De ligner let-variabler, med den forskel, at når en værdi først er tildelt, kan den ikke ændres. En const-deklaration skal derfor initialiseres på samme linje.

Syntaks:

const name = "Roy";

Eksempel:

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

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

Så brug const, når du ved, at den tildelte værdi ikke vil blive gentildelt. Bemærk, at const forhindrer gentildeling af bindingen, ikke ændring af et objekt, den peger på.

Taster ind TypeScript

TypeScript er et stærkt typesprog, hvorimod JavaScriptet er ikke. En variabel, hvis værdi er defineret som en streng, kan uden problemer ændres til et tal i JavaScript. Det samme tolereres ikke i TypeScript. I TypeScript, er typen af ​​en variabel defineret i starten, og under hele udførelsen skal den beholde denne type. Enhver ændring fører til en kompileringsfejl under kompileringen til JavaManuskript.

Følgende er de grundlæggende typer:

nummer

Tager kun heltal, flydende tal, brøker og lignende numeriske værdier.

Syntaks:

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

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

toFixed() – den konverterer tallet til en streng og beholder de decimaler, der er givet til metoden.

toString () – denne metode konverterer tallet 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 talmetoder

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

String

Streng: kun strengværdier.

Syntaks:

let str :string = "hello world";

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

• delt() – denne metode vil opdele strengen i et array.
• tegnAt() – denne metode vil give tegnet ved det givne indeks.
• indeks af() – denne metode vil angive positionen for den første forekomst af den givne værdi.
• erstatte() – denne metode tager 2 strenge. Den søger efter den første værdi i strengen, og hvis den er til stede, erstatter den den med den anden, hvilket giver en ny streng tilbage.
• trimme() – denne metode fjerner mellemrum fra begge sider af strengen.
• substr() – denne metode vil give en del af strengen, afhængigt af startpositionen og den givne længde.
• understreng() – denne metode vil give en del af strengen, afhængigt af start- og slutpositionen. Tegnet ved slutpositionen er udeladt.
• til Store bogstaver() – konverterer 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 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"

Boolesk

En boolsk værdi accepterer kun de logiske værdier sand og falsk. I modsætning til almindelig værdi. JavaScript, tallene 0 og 1 accepteres ikke, fordi de er af typen nummer.

Syntaks:

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

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

Enhver

Syntaks:

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

Variabler deklareret ved hjælp af enhver Typen kan indeholde en streng, et tal, et array, en boolsk værdi eller et void-værdi. TypeScript vil ikke give nogen kompileringstidsfejl, hvilket svarer til variabler i JavaScript. Brug kun typen any, når du er usikker på den type værdi, der vil blive knyttet til den pågældende variabel, fordi den deaktiverer enhver kontrol af den pågældende værdi.

Void

Void-typen bruges mest som returtype for en funktion, der ikke returnerer noget.

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 man deklarerer og tildeler værdier til array-operationer i TypeScript.

Siden TypeScript er et stærkt typebestemt sprog, skal du angive datatypen for værdierne i et array. Ellers vil det blive behandlet som af typen any.

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

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

For at hente elementerne fra et array starter værdierne fra indeks 0 og op til arrayets længde minus é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

Du kan også hente elementerne fra et array ved hjælp af en 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 af forEach-løkken

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-objekter har mange egenskaber og metoder, der 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 arrayname.method().

Eksempel på længdeegenskab

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

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

Eksempel på omvendt metode

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

Eksempel på sorteringsmetode

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

Eksempel på pop-metoden

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

Eksempel på skiftemetode

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

Eksempel på push-metode

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

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 som helst er muligt i JavaScript er også muligt i TypeScriptKlasse er en funktion tilføjet fra ES6 og fremefter. Tidligere i JavaScript-, klasselignende funktionalitet blev opnået ved hjælp af en funktion med prototypemetoder til at genbruge kode. Ved hjælp af klasse kan din kode komme tæt på sprog som f.eks. Java, C# og Python, hvor kode nemt kan genbruges.

Definer en klasse i TypeScript

Her er den 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 Students. Den har egenskaberne alder, navn og roll_no.

Konstruktør i en TypeScript Klasse

Klassen Students, der er defineret ovenfor, 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 tager sig af initialiseringen af ​​egenskaberne, når klassen instantieres. Egenskaberne tilgås ved hjælp af denne nøgleord, for eksempel this.age for at få adgang til alder og this.roll_no for at få adgang til roll_no. Du kan også have en standardkonstruktør, som vist nedenfor:

constructor () {}

Metoder inde i en TypeScript Klasse

I klassen Students er der defineret metoder, for eksempel getRollNo(), getName() og getAge(), som returnerer værdierne for egenskaberne roll_no, name og age.

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

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

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

Oprettelse af en instans af en klasse i TypeScript

In TypeScript, for at oprette en instans af en klasse bruger du new-operatoren. Når du opretter en instans med new, får du et objekt, der kan tilgå 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 af en TypeScript Klasse til JavaScript

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

Command: tsc  Students.ts

Output fra JavaScriptkoden ved kompilering er 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 JavaScriptet, klassen konverteres til en selvkaldt funktion.

Klasse Arv

Klasser kan nedarves ved hjælp af udvider 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. Student udvider Person, og objektet oprettet fra Student kan tilgå sine egne metoder og egenskaber såvel som dem for den klasse, det udvider.

Lad os nu tilføje nogle æ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);
        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

Ændringen i forhold til det foregående eksempel er en konstruktør defineret i klassen Student. Konstruktøren tager de samme parametre som basisklassen plus eventuelle yderligere parametre.

In TypeScript Du skal kalde super med alle basisklasseparametrene. Dette skal være den første sætning i konstruktøren, fordi super udfører konstruktøren for den udvidede klasse. Enhver egenskab, der er deklareret af den afledte klasse, såsom tmarks, skal derefter tildeles eksplicit, ellers ville getMarks returnere udefineret.

Få adgang til modifikatorer i TypeScript

TypeScript understøtter adgangsmodifikatorerne public, private og protected på dine metoder og egenskaber. Som standard, hvis der ikke er angivet nogen adgangsmodifikator, betragtes metoden eller egenskaben som public og er let tilgængelig fra klassens objekt.

I tilfælde af private adgangsmodifikatorer er medlemmer ikke tilgængelige fra klassens objekt og er kun beregnet til at blive brugt inde i klassen. De er ikke tilgængelige for en nedarvet klasse.

I tilfælde af beskyttede adgangsmodifikatorer er medlemmer beregnet til at blive brugt i klassen og den nedarvede klasse, og er ikke 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

Interface i TypeScript

En af kerneegenskaberne ved TypeScript er grænseflader. En grænseflade er et sæt regler, der skal implementeres af den enhed, der bruger den. Enheden kan være en klasse, funktion eller variabel. En grænseflade kan bestå af egenskaber og metoder. Du kan markere en egenskab eller metode som valgfri ved hjælp af "?"-syntaksen. Grænsefladen tilføjer en stærk typekontrol for enhver funktion, variabel eller klasse, der implementerer den.

Syntaks for en grænseflade i TypeScript

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

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

Nu kan denne grænseflade implementeres af en variabel, en funktion eller en klasse. Her er et eksempel på en variabel, der implementerer grænsefladen Dimension.

Eksempel:

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

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

Grænsefladen Dimensions signatur har bredde og højde, og begge er obligatoriske. Hvis en egenskab mangler, eller en type ændres, vil det give en kompileringsfejl under kompilering af koden til JavaManuskript.

Ovenstående kode, når den kompileres til JavaScriptet ser således ud:

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

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

Brug af en grænseflade på en funktion som en returtype

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

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

I ovenstående eksempel bruges grænsefladen Dimension som returtype for funktionen getDimension(). Returværdien skal matche de egenskaber og typer, der er deklareret i grænsefladen.

Den kompilerede JavaScriptkoden vil være som følger:

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

Hvis returtypen under kompilering ikke matcher grænsefladen, vil der udløses en fejl.

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

I eksemplet ovenfor har du brugt grænsefladen Dimension som en parameter til funktionen getDimension(). Når du kalder funktionen, skal den parameter, der sendes til den, matche de regler, der er defineret af grænsefladen.

Den kompilerede JavaScriptkoden vil være som følger:

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

Klasse implementerer en grænseflade

For at bruge en grænseflade med en klasse, skal du bruge nøgleordet redskaber.

Syntaks for en klasse, der implementerer en grænseflade:

class NameofClass implements InterfaceName {
}

Følgende eksempel viser en grænseflade, der arbejder med en 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;
    }
}

I ovenstående eksempel har du defineret grænsefladen Dimension med egenskaberne width og height, begge af typen string, og en metode kaldet getWidth(), som returnerer en string.

Den kompilerede JavaScriptkoden vil være 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 sæt af instruktioner, der udføres for at udføre en opgave. JavaI et script er det meste af koden skrevet i form af funktioner, og de spiller en vigtig rolle. TypeScript Du har klasser, grænseflader, moduler og navnerum tilgængelige, men funktioner spiller stadig en vigtig rolle. Forskellen mellem en funktion i JavaManuskript og TypeScript er parameter- og returtyperne tilgængelige med en 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 funktion er funktionens navn add, parametrene er a1 og b1, begge af typen tal, og returtypen er også et tal. Hvis du sender en streng til funktionen, vil den give en kompileringsfejl under kompilering til JavaManuskript.

Foretager et kald til funktionen: add

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'

Parametrene a1 og b1 er obligatoriske og vil forårsage en fejl, hvis de ikke angives. Parametertyperne og returtypen er lige vigtige og kan ikke ændres, når de først er defineret.

Valgfri parametre til en funktion

In JavaScript, alle parametre til funktioner er valgfrie og betragtes som udefinerede, hvis de ikke sendes. Det samme gælder ikke i TypeScriptNår du har defineret parametrene, skal du angive dem. Hvis du ønsker, at en parameter skal være valgfri, skal du tilføje et spørgsmålstegn efter parameternavnet, som vist nedenfor:

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

Bemærk venligst, at valgfrie parametre skal defineres sidst. Du kan ikke have den første parameter valgfri og den anden obligatorisk, da compileren ikke ville vide, hvilken værdi der blev angivet.

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

Ligesom valgfrie parametre skal standardinitialiserede parametre også gemmes i slutningen af ​​parameterlisten.

Hvileparametre

Du har set hvordan TypeScript håndterer obligatoriske parametre, valgfrie parametre og standardværdiparametre. Nu vil vi se på restparametre. Restparametre er en gruppe af valgfrie parametre, der er defineret sammen ved hjælp af tre prikker (…) efterfulgt af navnet på parameteren, som er et array.

Syntaks for hvileparametre:

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

Som vist ovenfor er rest-parameteren et array med tre prikker foran. Arrayet vil indeholde alle de resterende argumenter, der sendes til funktionen.

Eksempel:

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

Pilfunktioner

En pilefunktion er en af ​​de vigtige funktioner frigivet i ES6, og den er tilgængelig i TypeScript også. Syntaksen har en tyk pil i sig, hvilket er derfra navnet kommer.

Pilefunktion Syntaks:

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

Hvad er brugen af ​​en pilefunktion?

Lad os se på et eksempel for at forstå brugen af ​​en pilefunktion.

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 funktion med en egenskabsscore initialiseret til 0, og en metode getScore, der internt bruger setTimeout og efter et sekund logger this.score. Den loggede værdi er udefineret, selvom this.score er defineret og initialiseret. Problemet ligger i denne nøgleord. Funktionen i setTimeout har sit eget `thin`, og da scoren ikke er defineret på den, er resultatet udefineret.

Det samme kan håndteres ved hjælp af en pilefunktion, 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();

En pilefunktion har ikke sin egen denne, og deler i stedet den fra dens overordnede scope, så variabler, der er deklareret udenfor, er tilgængelige med denne inde i en pilefunktion. De er nyttige på grund af den kortere syntaks såvel som til callbacks, eventhandlere og timingfunktioner.

TypeScript Enums

A TypeScript enum er et objekt, der indeholder en samling af relaterede værdier gemt sammen. JavaScriptet understøtter ikke enums native. De fleste programmeringssprog som f.eks. Java, C og C++ supportopgørelser, og TypeScript gør dem også tilgængelige. Enums defineres ved hjælp af enum-nøgleordet.

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 med værdierne Nord, Syd, Øst og Vest. Værdierne er nummereret fra 0 for den første post og øges med 1 for hver efterfølgende post.

Deklarer en enum med en numerisk værdi

Som standard, hvis et enum-medlem ikke får en værdi, tager det et tal startende fra 0. Følgende eksempel viser en enum med eksplicitte numeriske værdier.

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

Du kan også tildele en startværdi, og følgende medlemmer modtager forøgede værdier. For eksempel:

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

Nu starter nord ved 5, så syd er 6, øst er 7, og vest er 8.

Du kan også tildele værdier efter eget valg i stedet for 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 bruger en 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 JavaScriptet 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 JavaScriptet understøtter ikke enums. Compileren konverterer enum'en til en selvkaldt funktion, som vist ovenfor. Den dobbelte tildeling er det, der skaber den omvendte afbildning.ping fra nummer tilbage til navn.

Deklarer 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 undefined

Den kompilerede JavaScriptet 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?

Filer oprettet i TypeScript har global adgang, hvilket betyder, at variabler, der er deklareret i én fil, kan tilgås i en anden fil. Denne globale natur kan forårsage kodekonflikter og runtime-problemer. Eksport- og importmodulfunktionalitet kan bruges til at undgå globale variabel- og funktionskonflikter. Denne funktion kom i JavaScriptet med ES6-udgivelsen og understøttes også 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 kan du tilgå variablen alder defineret i test1.ts og også ændre den, som vist nedenfor:

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

Dette kan skabe en masse problemer, da variablerne er globalt tilgængelige og kan ændres hvor som helst.

Med moduler, forbliver den skrevne kode lokal for filen og kan ikke tilgås uden for den. For at dele noget fra en fil skal den eksporteres ved hjælp af export-nøgleordet. eksport bruges når du ønsker at en variabel, klasse, funktion eller grænseflade skal bruges i en anden fil. Importere bruges, når du vil have adgang til et eksporteret element. Dette holder koden intakt i filen, og selvom du definerer de samme variabelnavne, blandes de ikke sammen.

Brug af eksport og import

Der er mange måder at eksportere og importere på. Vi vil diskutere den syntaks, der er mest almindeligt anvendt.

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

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

test1.ts

export let age: number = 25;

Nøgleordet `export` bruges til at dele aldersvariablen med en anden fil.

test2.ts

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

import-nøgleordet 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 og importere på, og syntaksen 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").

Her er et fungerende eksempel, der viser den sag.

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 har brug for en modulindlæser til at finde importafhængighederne, som vist i TypeScript eksemplerne ovenfor. De tilgængelige modulindlæsere er CommonJS til Nodejs og Require.js til kørsel i browseren.

For at kompilere kode ved hjælp af CommonJS-modulformatet skal du bruge følgende kommando:

tsc --module commonjs testCustomer.ts

For at kompilere kode ved hjælp af Requirejs-modulformatet skal du bruge følgende kommando:

tsc --module amd testCustomer.ts

De afhængige filer konverteres til js-filer med kommandoen ovenfor.

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 på 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 hjælp af require.js, skal du oprette en fil kaldet main.js, som refererer 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

Et navnerum indeholder en samling af klasser, grænseflader, variabler og funktioner samlet i én fil.

Syntaks for navneområde

namespace name{

export class {
}

export interface {
}

export const constname;

}

Den relaterede kode er tilgængelig under ét navnerum.

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 Studentopsætning, og du har tilføjet en grænseflade StudDetails, en funktion addSpace og en klasse kaldet Student.

Adgang til et navnerum

Følgende er koden, hvor du bruger navnerummet 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 eller funktionen, der er tilgængelig i et navnerum, skal refereres til ved hjælp af navnerumsnavnet, for eksempel StudentSetup.addSpace for at få adgang til funktionen og StudentSetup.Student for at få adgang til klassen.

Du kan kompilere begge filer til én js-fil som vist nedenfor:

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

Tjek outputtet i kommandoprompten ved hjælp af kommandoen nedenfor:

node namespace.js

Output:

The name is :H a r r y

Omgivende erklæringer i TypeScript

TypeScript giver dig mulighed for at bruge tredjeparts JavaScriptfiler, der bruger ambient-deklarationer. Fordelen ved denne funktion er, at du ikke behøver at omskrive biblioteket, og alligevel kan du bruge alle dets funktioner med typekontrol. TypeScript.

Ambient syntaks

Sådan deklarerer du et ambient-modul:

declare module moduleName {
   //code here
}

Ambient-filen skal gemmes som:

filename.d.ts

For at bruge filen filnavn.d.ts I din .ts-fil skal du referere til den som:

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

Omgivelsestypedeklarationen i TypeScript refererer til tredjepartsbiblioteket og gendeklarerer de nødvendige funktioner med deres egne typer. Overvej f.eks. den lille JavaScriptbibliotek vist nedenfor.

Third Party JavaScriptfil: 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 funktionerne isString, convertToUpperCase, convertToLowerCase og convertToStringBold.

Oprettelse af et Ambience-modul i TypeScript

Nu vil vi oprette et ambient-modul, der refererer til JavaScriptet fungerer ovenfor og tilføjer typekontroller efter behov.

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 definerer et modul med navnet TestString og eksporterer grænsefladen StringsFunc. Hver signatur angiver, hvad funktionen accepterer og returnerer:

• isString(str: streng): boolesk – tager en streng og returnerer en boolsk værdi. Hvis et tal eller en anden type overføres, produceres der en kompileringsfejl.
• konverterTilStoreBogstaver(str: streng): streng – tager en streng og returnerer en streng.
• konverterTilSmåBogstaver(str: streng): streng – tager en streng og returnerer en streng.
• convertToStringBold(str: streng): streng – tager en streng og returnerer en streng.

Eftersom JavaScriptfilen eksponerer objektnavnet StringChecks, vi refererer endelig til det samme navn i .d.ts-filen:

declare var StringChecks: TestString.StringsFunc;

Brug af et Ambient-modul i TypeScript

Her er test.ts-filen, som bruger ambient-filen 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);

Kompilér med tsc test.ts for at producere 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 en HTML-fil sammen med biblioteksfilen 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>

For at fortsætte, sammenlign de to sprog direkte i TypeScript vs JavaScript, genbesøg JavaScript array-metoder for de utypede ækvivalenter, der anvendes her, og undersøg sløjfer ind JavaScript og interne og eksterne JavaScript for de browsergrundlæggende elementer, som det kompilerede output er baseret på.

Ofte Stillede Spørgsmål