TypeScript Handledning: Vad är, Gränssnitt, Enum, Array

Vad är TypeScript?

TypeScript är en superset av JavaManus. TypeScript är ett objektorienterat programmeringsspråk som stöder klasser, gränssnitt och mer. Det är ett språk med öppen källkod utvecklat av Microsoft som statiskt kompilerar koden till JavaSkript. Det kan enkelt köras i en webbläsare eller i Nodejs.

Alla de senaste funktionerna som släppts för ECMAScript stöds i TypeScript, och dessutom TypeScript har sina egna objektorienterade funktioner som gränssnitt, omgivande deklarationer och klassarv, vilket hjälper till vid utvecklingping en stor applikation som annars skulle vara svår att bygga in JavaScript.

Relationen är enkelriktad. Varje giltigt JavaSkriptfilen är redan giltig TypeScript, men det motsatta är inte sant, eftersom typannoteringar bara finns i TypeScript och raderas under kompileringen.

Varför användning TypeScript?

Här är de viktiga fördelarna med att använda TypeScript:

• Stora och komplexa projekt i JavaSkript är svåra att koda och underhålla.
• TypeScript hjälper mycket med kodorganisation och tar bort de flesta fel under kompilering snarare än vid körning.
• TypeScript stöder JS-bibliotek och API-dokumentation.
• Det är ett valfritt typat skriptspråk, så typer kan antas gradvis.
• TypeScript kod kan konverteras till vanlig JavaSkriptkod för valfritt webbläsarmål.
• Det ger bättre kodstrukturering och objektorienterade programmeringstekniker.
• Det möjliggör bättre stöd för utvecklingstider, inklusive autokomplettering och säker omstrukturering.
• Det kan utöka språket bortom standarden, med funktioner som dekoratörer.

Den enskilt största praktiska vinsten är editorstöd. Eftersom kompilatorn känner till formen på varje värde kan en editor byta namn på en egenskap över ett helt projekt och rapportera varje plats som inte längre matchar.

TypeScript Historik

Låt oss se de viktiga landmärkena från historien om TypeScript:

• Efter två år av intern utveckling kl Microsoft, TypeScript 0.9 släpptes 2013.
• TypeScript 1.0, med ytterligare stöd för generika, släpptes vid Build 2014.
• I juli 2014, en ny TypeScript kompilatorn anlände som var fem gånger snabbare än den tidigare versionen.
• I juli 2015 lades stöd till för ES6-moduler, namnrymdsnyckelordet for…of och decorators.
• I november 2016 lades mappade typer, nyckel- och söktyper samt objektrest och -spridning till.
• Den 27 mars 2018 lades villkorliga typer och förbättrad keyof med skärningspunktstyper till.
• TypeScript 5.0, släppt i mars 2023, moderniserade dekoratörer och minskade paketstorleken.
• TypeScript 6.0 kom i mars 2026 som den slutgiltiga utgåvan byggd på JavaSkriptkodbas.
• TypeScript 7.0 flyttar kompilatorn till en nativ Go-implementation, vilket Microsoft rapporteras som ungefär tio gånger snabbare än 6.0.

Vem använder TypeScript?

TypeScript är inte längre ett nischval. Det ligger till grund för flera av de mest använda front-end- och back-end-verktygen, och listan nedan visar var en nybörjare är mest benägen att stöta på det.

• Vinkel: Angular-ramverket är skrivet i TypeScript, och applikationskod förväntas också skrivas i den.
• React- och Vue-projekt: Båda ekosystemen levererar officiellt TypeScript mallar, och de flesta moderna startprogram aktiverar det som standard.
• Node.js-backends: Serverramverk som NestJS är byggda kring TypeScript klasser och dekoratörer.
• Redigerarverktyg: Visual Studio Code är i sig en stor TypeScript kodbas, vilket är anledningen till att dess språkstöd är så komplett.
• Stora företagsgränssnitt: Team som arbetar med många bidragsgivare använder det för att upptäcka integrationsfel före distribution.

Hur man laddar ner och installerar TypeScript

Här är steg-för-steg-processen för att ladda ner och installera TypeScript:

Steg 1) Ladda ner och installera Nodejs

Gå till Nodejs officiella webbplats, https://nodejs.org/en/download/och ladda ner och installera Nodejs för ditt operativsystem. Detaljerade instruktioner finns i guiden på hur man laddar ner och installerar Node.js.

Steg 2) Kontrollera Nodejs och npm-versionen

För att kontrollera om Nodejs och npm är installerade, kontrollera versionen i kommandotolken.

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

D:\typeproject>npm --version
10.9.2

Alla nuvarande Node LTS-versioner fungerar. TypeScript kräver i sig bara en stödd Node-version för att köra kompilatorn.

Steg 3) TypeScript Installation

Skapa din projektkatalog typeproject\ och kör npm init, som visas i kommandot nedan:

npm init

Steg 4) Starta installationen

Detta skapar package.json, som kommer att lagra beroenden för vårt projekt.

När det är klart, installera TypeScript enligt följande:

npm -g install typescript

Ovanstående kommando tar hand om installationen TypeScript. Att lägga till "-g" till npm install kommer att installeras TypeScript globalt. Fördelen med att använda -g är att du kommer att kunna använda TypeScript TSC kommandot från valfri katalog, eftersom det är installerat globalt. Om du inte vill installera TypeScript globalt, använd kommandot nedan:

npm install --save-dev typescript

Skapa en src\-mapp i din projektkatalog och inuti src\ skapar du TypeScript fil test.ts och skriv din kod.

Exempel: test.ts

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

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

Sammanställa TypeScript kod till Javascript

För att kompilera ovanstående kod, använd följande kommando.

If TypeScript installeras globalt, använd kommandot nedan:

tsc test.ts

If TypeScript är installerat lokalt i ditt projekt måste du använda sökvägen till TypeScript från node_modules, som visas, eller kör det via npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Kommandot ovan skapar en test.js-fil som kompilerar koden till JavaManus.

Exempel: test.js

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

Utförande Javascript använder Nodejs

Nu ska vi köra test.js i Nodejs enligt följande:

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

Värdet som skickas till console.log visas när test.js körs.

Utförande JavaSkript i webbläsaren

Exempel:

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

Sammanställa TypeScript kod till Javascript använder EcmaScript-versionen

TypeScript stöder alla släppta ECMAScript-funktioner, och utvecklare kan använda dem under kodning. Men alla nya funktioner stöds inte i äldre webbläsare, så du kan behöva kompilera till en äldre version av ECMAScript. TypeScript tillhandahåller kompilatoralternativ som gör just det.

Exempel: test.ts

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

addnumbers(10, 20);

För att kompilera till den ES-version du väljer kan du använda alternativet target eller t i ditt kommando enligt följande:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Som standard är målet ES3 för den klassiska kompilatorn. Om du vill ändra det kan du använda kommandot ovan.

För närvarande kommer vi att använda ES6 som mål:

tsc --target ES6  test.ts

test.ts till test.js

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

addnumbers(10, 20);

Koden förblir som den är, eftersom pilfunktionen du har använt är en ES6-funktion och är oförändrad när den kompileras till ES6.

Som standard är målet ES3, så utan ett mål får du test.js som:

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

Så här ändras den feta pilen till en vanlig anonym funktion.

Variabler i TypeScript

variabler används för att lagra värden, och värdet kan vara en sträng, tal, boolesk eller ett uttryck. När det gäller variabler i TypeScript, de liknar JavaScriptSå låt oss lära oss att deklarera och tilldela ett värde till variabler i TypeScript.

Variabler kan inte användas i kod utan att vara definierade. För att deklarera en variabel kan du använda

var nyckelord,

Låt sökord

const sökord

Arbeta med variabler i TypeScript liknar JavaSkript och användare som är bekanta med JavaSkriptet kommer att finna det väldigt enkelt. I modern kod, Låt och const är att föredra framför var, eftersom deras blockomfattning förhindrar en hel klass av buggar.

Deklarera variabler med var

Syntax:

var firstname = "Roy";

Låt oss ta en titt på några TypeScript exempel för att förstå hur nyckelordet var fungerar och även omfattningen av variabler som deklareras med hjälp av var nyckelord.

Exempel 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

Exempel 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

Exempel 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

Deklarera variabler med let

Ocuco-landskapet TypeScript syntax för let är enligt nedan:

Syntax:

let name = "Roy";

Arbetet med Låt variabeln är nästan densamma som var, men med en viktig skillnad, vilket exemplet nedan visar.

Exempel:

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

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

Ovanstående TypeScript exemplet ger ett fel, men samma kod skulle ha fungerat med var nyckelord. Variabler deklarerade med Låt är endast tillgängliga inom det block där de deklareras. I det här exemplet existerar t endast inom if-blocket, inte i hela funktionen.

Detsamma gäller inom alla funktioner, for loopar, while loopar eller switchblock. En let-variabel är endast tillgänglig inom det blocket, och att referera till den utanför genererar ett fel. Detta är den största skillnaden mellan var och let.

Deklarera variabler med hjälp av const

Const betyder konstanta variabler. De liknar let-variabler, med skillnaden att när ett värde väl har tilldelats kan det inte ändras. En const-deklaration måste därför initieras på samma rad.

Syntax:

const name = "Roy";

Exempel:

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

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

Så använd const när du vet att det tilldelade värdet inte kommer att tilldelas om. Observera att const förhindrar omtilldelning av bindningen, inte modifiering av ett objekt den pekar på.

Skriver in TypeScript

TypeScript är ett starkt typat språk, medan JavaSkriptet är inte det. En variabel vars värde definieras som en sträng kan ändras till ett tal utan problem i JavaManus. Detsamma tolereras inte i TypeScript. I TypeScript, variabelns typ definieras i början, och under hela körningen måste den behålla den typen. Varje ändring leder till ett kompileringsfel under kompileringen till JavaManus.

Följande är de grundläggande typerna:

Antal

Tar endast heltal, flyttal, bråk och liknande numeriska värden.

Syntax:

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

Här är några viktiga metoder som kan användas på taltyper:

toFixed() – den konverterar talet till en sträng och behåller decimaltecken som metoden har angett.

att stränga () – den här metoden konverterar talet till en sträng.

värdet av() – denna metod kommer att ge tillbaka det primitiva värdet av talet.

toPrecision() – denna metod kommer att formatera numret till en angiven längd.

Exempel: med alla numeriska metoder

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

Sträng

Sträng: endast strängvärden.

Syntax:

let str :string = "hello world";

Här är några viktiga metoder som kan användas på strängtyper:

• delas() – den här metoden delar upp strängen i en array.
• charAt() – den här metoden ger tecknet vid det angivna indexet.
• index för() – den här metoden anger positionen för den första förekomsten av det givna värdet.
• ersätta() – den här metoden tar två strängar. Den söker efter det första värdet i strängen och ersätter det, om det finns, med det andra, vilket ger en ny sträng tillbaka.
• trim() – den här metoden tar bort vitt utrymme från båda sidor av strängen.
• substr() – den här metoden ger en del av strängen, beroende på startpositionen och den angivna längden.
• delsträng() – den här metoden ger en del av strängen, beroende på start- och slutpositionen. Tecknet vid slutpositionen exkluderas.
• till versaler() – konverterar strängen till versaler.
• till LowerCase() – konverterar strängen till gemener.

Exempel:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

En boolesk variant accepterar endast de logiska värdena sant och falskt, till skillnad från vanlig variant. JavaSkript, siffrorna 0 och 1 accepteras inte, eftersom de är av typen nummer.

Syntax:

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

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

Vilken som helst

Syntax:

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

Variabler deklarerade med hjälp av vilken som helst typen kan innehålla en sträng, ett tal, en array, ett booleskt värde eller ett tomrum. TypeScript kommer inte att ge något kompileringsfel, vilket liknar variabler i JavaSkript. Använd bara typen valfri när du är osäker på vilken typ av värde som kommer att associeras med variabeln, eftersom den stänger av alla kontroller av det värdet.

Ogiltig

Void-typen används oftast som returtyp för en funktion som inte returnerar någonting.

Syntax:

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

TypeScript array

An array in TypeScript är en datatyp där du kan lagra flera värden. Låt oss lära oss hur man deklarerar och tilldelar värden för arrayoperationer i TypeScript.

Eftersom TypeScript är ett starkt typat språk, måste du ange datatypen för värdena i en array. Annars kommer den att behandlas som av typen valfri.

Deklarera och initiera en array

Syntax:

let nameofthearray : Array<typehere>

Exempelvis

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

Olika sätt att komma åt element från en array

För att hämta elementen från en array börjar värdena från index 0 upp till arrayens längd minus ett.

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 också hämta elementen från en array med hjälp av en TypeScript för slinga, enligt nedanstående.

Använda TypeScript för slinga

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

Produktion:

2016
2017
2018
2019

Använder for-in loop

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

Produktion:

2016
2017
2018
2019

Använder för-av loop

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

Produktion:

2016
2017
2018
2019

Använda forEach-loopen

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

Produktion:

2016
2017
2018
2019

TypeScript Array-metoder

Ocuco-landskapet TypeScript Array-objekt har många egenskaper och metoder som hjälper utvecklare att hantera arrayer enkelt och effektivt. Du kan få värdet på en egenskap genom att ange arrayname.property och utdata för en metod genom att ange arrayname.method().

Exempel på längdegenskap

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

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

Exempel på omvänd metod

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

Exempel på sorteringsmetod

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

Exempel på popmetod

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

Exempel på skiftmetod

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

Exempel på push-metod

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

Exempel på konkatmetod

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]

Klass i TypeScript

TypeScript är en superset av JavaManus, så vad som helst är möjligt i JavaSkript är också möjligt i TypeScriptKlass är en funktion som lagts till från och med ES6. Tidigare i JavaSkriptliknande funktionalitet uppnåddes med hjälp av en funktion med prototypmetoder för att återanvända kod. Med hjälp av klass kan din kod komma nära språk som Java, C# och Python, där kod enkelt kan återanvändas.

Definiera en klass i TypeScript

Här är den grundläggande klasssyntaxen i TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Exempel: Ett fungerande exempel 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 exemplet ovan har du en klass som heter Studenter. Den har egenskaperna ålder, namn och roll_no.

Konstruktör i en TypeScript Klass

Klassen Studenter som definierats ovan har en konstruktor som visas nedan:

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

Konstruktormetoden har parametrarna age, name och roll_no. Konstruktorn tar hand om att initiera egenskaperna när klassen instansieras. Egenskaperna nås med hjälp av detta nyckelord, till exempel this.age för att komma åt ålder och this.roll_no för att komma åt roll_no. Du kan också ha en standardkonstruktor, som visas nedan:

constructor () {}

Metoder inuti en TypeScript Klass

I klassen Studenter finns metoder definierade, till exempel getRollNo(), getName() och getAge(), som returnerar värdena för egenskaperna roll_no, name och age.

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

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

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

Skapa en instans av en klass i TypeScript

In TypeScript, för att skapa en instans av en klass använder du operatorn new. När du skapar en instans med new får du ett objekt som kan komma åt klassens egenskaper och metoder, som visas nedan:

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

Sammanställa en TypeScript Klass till JavaScript

Du kan använda tsc-kommandot som visas nedan för att kompilera till JavaManus.

Command: tsc  Students.ts

Resultatet av JavaSkriptkoden vid kompilering visas nedan:

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, klassen konverteras till en självanropad funktion.

Klass Arv

Klasser kan ärvas med hjälp av sträcker nyckelord i TypeScript.

Klassarvssyntax:

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

}

klass B kommer att kunna dela klass A metoder och egenskaper.

Här är ett fungerande exempel på en klass som använder 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 två klasser, Person och Student. Student utökar Person, och objektet som skapas från Student kan komma åt sina egna metoder och egenskaper såväl som de för den klass det utökar.

Nu ska vi lägga till några ändringar i klassen ovan.

Exempel:

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

Förändringen jämfört med föregående exempel är en konstruktor definierad i klassen Student. Konstruktorn tar samma parametrar som basklassen, plus eventuella egna ytterligare parametrar.

In TypeScript Du måste anropa super med alla basklassparametrar. Detta måste vara den första satsen i konstruktorn, eftersom super exekverar konstruktorn för den utökade klassen. Alla egenskaper som deklareras av den härledda klassen, såsom tmarks, måste sedan tilldelas explicit, annars skulle getMarks returnera odefinierad.

Åtkomstmodifierare i TypeScript

TypeScript stöder åtkomstmodifierarna publika, privata och skyddade på dina metoder och egenskaper. Som standard, om ingen åtkomstmodifierare anges, betraktas metoden eller egenskapen som publik och är lättåtkomlig från klassens objekt.

När det gäller privata åtkomstmodifierare är medlemmar inte tillgängliga från klassens objekt och är endast avsedda att användas inuti klassen. De är inte tillgängliga för en ärvd klass.

När det gäller modifierare av skyddade åtkomstvärden är medlemmar avsedda att användas inuti klassen och den ärvda klassen, och är inte åtkomliga från klassens objekt.

Exempel:

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

Gränssnitt i TypeScript

En av kärnfunktionerna i TypeScript är gränssnitt. Ett gränssnitt är en uppsättning regler som måste implementeras av den entitet som använder det. Entiteten kan vara en klass, funktion eller variabel. Ett gränssnitt kan bestå av egenskaper och metoder. Du kan markera en egenskap eller metod som valfri med hjälp av syntaxen "?". Gränssnittet lägger till en stark typkontroll för alla funktioner, variabler eller klasser som implementerar det.

Syntax för ett gränssnitt i TypeScript

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

Du har definierat ett gränssnitt med namnet Dimension som har egenskaperna width och height, båda av typen sträng.

Nu kan detta gränssnitt implementeras av en variabel, en funktion eller en klass. Här är ett exempel på en variabel som implementerar gränssnittet Dimension.

Exempel:

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

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

Gränssnittets signatur Dimension har bredd och höjd, och båda är obligatoriska. Om någon egenskap saknas, eller en typ ändras, kommer det att ge ett kompileringsfel vid kompilering av koden till JavaManus.

Ovanstående kod, när den kompileras till JavaManus, ser ut så här:

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

Låt oss nu se hur man använder ett gränssnitt med en funktion.

Använda ett gränssnitt på en funktion som en returtyp

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

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

I exemplet ovan används gränssnittet Dimension som returtyp för funktionen getDimension(). Returvärdet måste matcha de egenskaper och typer som deklarerats i gränssnittet.

Den sammanställda JavaSkriptkoden kommer att se ut som följer:

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

Om returtypen inte matchar gränssnittet under kompileringen kommer det att utlösa ett fel.

Gränssnitt 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 exemplet ovan har du använt gränssnittet Dimension som en parameter till funktionen getDimension(). När du anropar funktionen måste parametern som skickas till den matcha de regler som definieras av gränssnittet.

Den sammanställda JavaSkriptkoden kommer att se ut som följer:

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

Klass som implementerar ett gränssnitt

För att använda ett gränssnitt med en klass måste du använda nyckelordet redskap.

Syntax för en klass som implementerar ett gränssnitt:

class NameofClass implements InterfaceName {
}

Följande exempel visar ett gränssnitt som arbetar med en klass.

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 exemplet ovan har du definierat gränssnittet Dimension med egenskaperna width och height, båda av typen sträng, och en metod som heter getWidth() som returnerar en sträng.

Den sammanställda JavaSkriptkoden kommer att se ut som följer:

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

Fungerar i TypeScript

Funktioner är uppsättningar instruktioner som utförs för att utföra en uppgift. JavaSkript, det mesta av koden är skriven i form av funktioner och de spelar en viktig roll. I TypeScript du har klasser, gränssnitt, moduler och namnrymder tillgängliga, men funktioner spelar fortfarande en viktig roll. Skillnaden mellan en funktion i JavaManus och TypeScript är parameter- och returtyperna tillgängliga med en TypeScript funktion.

JavaSkriptfunktion:

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

TypeScript fungera:

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

I funktionen ovan är funktionens namn add, parametrarna är a1 och b1, båda av typen nummer, och returtypen är också ett nummer. Om du skickar en sträng till funktionen kommer den att utlösa ett kompileringsfel vid kompilering till JavaManus.

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

Parametrarna a1 och b1 är obligatoriska och orsakar ett fel om de inte anges. Parametertyperna och returtypen är lika viktiga och kan inte ändras när de väl har definierats.

Valfria parametrar till en funktion

In JavaSkript, alla parametrar till funktioner är valfria och anses vara odefinierade om de inte skickas. Detsamma gäller inte i TypeScriptNär du har definierat parametrarna måste du ange dem. Om du vill att en parameter ska vara valfri lägger du till ett frågetecken efter parameternamnet, som visas nedan:

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

Observera att valfria parametrar måste definieras sist. Du kan inte ha den första parametern valfri och den andra obligatorisk, eftersom kompilatorn inte skulle veta vilket värde som angavs.

Tilldela standardvärden till parametrar

Du kan tilldela standardvärden till parametrar enligt nedan:

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 likhet med valfria parametrar måste även standardinitierade parametrar sparas i slutet av parameterlistan.

Vila parametrar

Du har sett hur TypeScript hanterar obligatoriska parametrar, valfria parametrar och standardvärdesparametrar. Nu ska vi titta på viloparametrar. Viloparametrar är en grupp valfria parametrar som definieras tillsammans med hjälp av tre prickar (…) följt av namnet på parametern, som är en array.

Syntax för viloparametrar:

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

Som visas ovan är rest-parametern en array med tre punkter som prefix. Arrayen kommer att innehålla alla återstående argument som skickas till funktionen.

Exempel:

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

Pilfunktioner

En pilfunktion är en av de viktiga funktionerna som släpps i ES6, och den är tillgänglig i TypeScript också. Syntaxen har en tjock pil i sig, vilket är därifrån namnet kommer.

Pilfunktion Syntax:

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

Vad är användningen av en pilfunktion?

Låt oss titta på ett exempel för att förstå användningsfallet för en pilfunktion.

Exempel:

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 skapat en funktion med en egenskapspoäng initierad till 0, och en metod getScore som internt använder setTimeout och, efter en sekund, loggar this.score. Det loggade värdet är odefinierat trots att this.score är definierat och initierat. Problemet ligger i detta nyckelord. Funktionen inuti setTimeout har sitt eget `this`, och eftersom poäng inte är definierad för den är resultatet odefinierat.

Detsamma kan hanteras med en pilfunktion, som visas nedan:

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 pilfunktion har inte sin egen detta, och delar istället den från sitt överordnade scope, så variabler som deklareras utanför är tillgängliga med detta inuti en pilfunktion. De är användbara på grund av den kortare syntaxen såväl som för återanrop, händelsehanterare och tidsfunktioner.

TypeScript Enums

A TypeScript enum är ett objekt som innehåller en samling relaterade värden lagrade tillsammans. JavaSkriptet har inte stöd för enums direkt. De flesta programmeringsspråk som t.ex. Java, C och C++ stöduppräkningar, och TypeScript gör dem också tillgängliga. Enums definieras med hjälp av nyckelordet enum.

Hur deklarerar man en Enum?

Syntax:

enum NameofEnum {
   value1,
   value2,
    ..
}

Exempel: Enum

enum Directions {
    North,
    South,
    East,
    West
}

I exemplet ovan har du definierat en enum som heter Riktningar med värdena Nord, Syd, Öst och Väst. Värdena numreras från 0 för den första posten och ökar med 1 för varje efterföljande post.

Deklarera en Enum med ett numeriskt värde

Som standard, om en enum-medlem inte får ett värde, tar den ett tal som börjar från 0. Följande exempel visar en enum med explicita numeriska värden.

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

Du kan också tilldela ett startvärde, och följande medlemmar får ökade värden. Till exempel:

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

Nu börjar nord på 5, så syd är 6, öst är 7 och väst är 8.

Du kan också ange valfria värden istället för standardvärdena. Till exempel:

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

Hur får man tillgång till en Enum?

Följande exempel visar hur du använder en enum i din kod:

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 sammanställda JavaManuset är som följer:

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

Eftersom JavaSkriptet stöder inte enums, kompilatorn konverterar enum till en självanropad funktion, som visas ovan. Det är den dubbla tilldelningen som skapar den omvända mappningen.ping från nummer tillbaka till namn.

Deklarera en enum med ett strängvärde

Du kan tilldela strängvärden efter eget val, som visas i exemplet nedan.

Exempel:

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 sammanställda JavaManuset är som följer:

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

Vad är modulerna i TypeScript?

Filer skapade i TypeScript har global åtkomst, vilket innebär att variabler som deklareras i en fil kan nås i en annan fil. Denna globala natur kan orsaka kodkonflikter och problem vid körning. Export- och importmodulfunktioner kan användas för att undvika globala variabel- och funktionskonflikter. Den här funktionen kom i JavaSkriptet med ES6-utgåvan och stöds även i TypeScript.

Varför behöver du moduler i TypeScript?

Följande exempel visar problemet utan moduler.

Exempel test1.ts

let age : number = 25;

Du har definierat en variabel ålder av typnummer i test1.ts.

Exempel test2.ts

I test2.ts kan du komma åt variabeln ålder definierad i test1.ts och även modifiera den, enligt nedan:

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

Detta kan skapa många problem, eftersom variablerna är globalt tillgängliga och kan ändras varifrån som helst.

Med moduler, den skrivna koden förblir lokal för filen och kan inte nås utanför den. För att dela något från en fil måste den exporteras med hjälp av export-nyckelordet. Export används när du vill att en variabel, klass, funktion eller gränssnitt ska användas i en annan fil. Importera används när du vill komma åt ett exporterat objekt. Genom att göra detta behålls koden intakt i filen, och även om du definierar samma variabelnamn blandas de inte ihop.

Använda Export och Import

Det finns många sätt att exportera och importera. Vi kommer att diskutera den syntax som används oftast.

Syntaxen för import och export 1:

export  nameofthevariable or class name or interface name etc

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

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

Här är ett fungerande exempel med export och import.

test1.ts

export let age: number = 25;

Nyckelordet export används för att dela åldersvariabeln med en annan fil.

test2.ts

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

Nyckelordet import används för att komma åt ålder variabel, och du måste ange filplatsen som visas ovan.

Syntax för import och export 2:

Det finns ett annat sätt att exportera och importera, och syntaxen visas nedan:

export = classname;

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

När du använder exportera = För att exportera din modul måste importen använda require("sökvägen för modulnamn").

Här är ett fungerande exempel som visar det fallet.

Kund.ts

class Customer {
    name: string;
    age: number;

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

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

export = Customer;

testCustomer.ts

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

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

Modullastare

Moduler kan inte fungera på egen hand, så du behöver en modulladdare för att hitta importberoendena, som visas i TypeScript exemplen ovan. De tillgängliga modulladdarna är CommonJS för Nodejs och Require.js för att köras i webbläsaren.

För att kompilera kod med CommonJS-modulformatet, använd följande kommando:

tsc --module commonjs testCustomer.ts

För att kompilera kod med hjälp av Requirejs-modulformatet, använd följande kommando:

tsc --module amd testCustomer.ts

De beroende filerna kommer att konverteras till js-filer med kommandot ovan.

Exempel testCustomer.ts till testCustomer.js med Requirejs

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

Exempel på Customer.ts till Customer.js med 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;
});

För att testa det med require.js måste du skapa en fil som heter main.js som refererar till beroenden som visas.

Här är mappstrukturen:

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>

Namnutrymmen i TypeScript

Ett namnutrymme innehåller en samling klasser, gränssnitt, variabler och funktioner tillsammans i en fil.

Syntax för namnutrymme

namespace name{

export class {
}

export interface {
}

export const constname;

}

Den relaterade koden är tillgänglig under ett namnutrymme.

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

Namnet på namnområdet är Studentinställningar, och du har lagt till ett gränssnitt StudDetails, en funktion addSpace och en klass som heter Student.

Åtkomst till ett namnområde

Följande är koden där du använder namnrymden Studentinställningar.

testStudentSetup.ts

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

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

Klassen, gränssnittet eller funktionen som är tillgänglig i ett namnutrymme måste refereras till med hjälp av namnutrymmesnamnet, till exempel StudentSetup.addSpace för att komma åt funktionen och StudentSetup.Student för att komma åt klassen.

Du kan kompilera båda filerna till en js-fil enligt nedan:

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

Kontrollera utdata i kommandotolken med hjälp av kommandot nedan:

node namespace.js

Produktion:

The name is :H a r r y

Omgivningsdeklarationer i TypeScript

TypeScript låter dig använda tredjeparts JavaSkriptfiler som använder omgivande deklarationer. Fördelen med den här funktionen är att du inte behöver skriva om biblioteket, och ändå kan du använda alla dess funktioner med typkontroll. TypeScript.

Ambient syntax

För att deklarera en omgivningsmodul:

declare module moduleName {
   //code here
}

Ambient-filen måste sparas som:

filename.d.ts

För att använda filen filnamn.d.ts i din .ts-fil behöver du referera till den som:

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

Omgivningstypdeklarationen i TypeScript refererar till tredjepartsbiblioteket och omdeklarerar de funktioner som krävs med sina egna typer. Betrakta till exempel den lilla JavaSkriptbiblioteket visas nedan.

Tredjeparts JavaSkriptfil: 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 ett objekt som heter StringChecks som har funktionerna isString, convertToUpperCase, convertToLowerCase och convertToStringBold.

Skapa en Ambient-modul i TypeScript

Nu ska vi skapa en ambient-modul som refererar till JavaSkriptfunktionerna ovan och lägger till typkontroller efter behov.

Filnamn: 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 definierar en modul med namnet TestString och exporterar gränssnittet StringsFunc. Varje signatur anger vad funktionen accepterar och returnerar:

• isString(str: sträng): boolesk – tar en sträng och returnerar ett booleskt värde. Att skicka ett tal eller någon annan typ producerar ett kompileringsfel.
• konverteraTillVersals(str: sträng): sträng – tar en sträng och returnerar en sträng.
• konverteraTillGemensamt(str: sträng): sträng – tar en sträng och returnerar en sträng.
• convertToStringBold(str: sträng): sträng – tar en sträng och returnerar en sträng.

Eftersom den JavaSkriptfilen exponerar objektnamnet StringChecks, vi hänvisar slutligen till samma namn i .d.ts-filen:

declare var StringChecks: TestString.StringsFunc;

Använda en Ambient-modul i TypeScript

Här är test.ts-filen som använder den omgivande 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);

Kompilera med tsc test.ts för att producera 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 använda test.js i en HTML-fil tillsammans 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>

Produktion:

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

För att fortsätta, jämför de två språken direkt i TypeScript vs JavaScriptåterbesök JavaSkriptmatrismetoder för de otypade motsvarigheterna som används här, och studera slingor in JavaScript och internt och externt JavaScript för webbläsarens grunder som den kompilerade utdata är beroende av.

Vanliga frågor