TypeScript Handledning: Vad är, Interface, Enum, Array med exempel

Vad är TypeScript?

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

Alla de senaste funktionerna som släppts för ECMAScript stöds i TypeScript och utöver det TypeScript har sina egna objektorienterade funktioner som gränssnitt, omgivningsdeklaration, klassarv, etc. som hjälper till att utveckla en stor applikation som annars skulle vara svår att göra i JavaScript.

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 den officiella webbplatsen för nodejs: https://nodejs.org/en/download/ och ladda ner och installera nodejs enligt ditt operativsystem. Den detaljerade instruktionen om hur man laddar ner nodejs finns här: https://www.guru99.com/download-install-node-js.html

Steg 2) Kontrollera Nodejs och npm-versionen

För att kontrollera om nodejs och npm är installerade, kolla bara versionen i din kommandotolk.

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

D:\typeproject>npm --version
6.4.1

Så du har nodejs v10 och npm 6 installerade.

Steg 3) TypeScript Installation

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

npm init

Steg 4) Starta installationen

Nu kommer vi att skapa paketet .json som lagrar beroenden för vårt projekt.

När installationen är klar 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 vilken katalog som helst när den är installerad globalt. Om du inte vill installera TypeScript globalt använd nedanstående kommando:

npm --save install typescript

Skapa src/-mappen i din projektkatalog och i src/-mappen skapa 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 är installerat globalt använd nedanstående kommando:

tsc test.ts

If TypeScript är installerat lokalt för ditt projekt du behöver använda sökvägen till TypeScript från node_modules som visas:

node_modules/typescript/bin/tsc test.ts

Kommandot ovan skapar en test.js-fil och kommer att ha kod kompilerad till javascript.

Exempel: test.js

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

Utförande Javascript använder Nodejs

I detta TypeScript tutorial kommer vi att köra test.js i nodejs enligt följande:

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

Värdet som tröstas visas när test.js körs

Utförande JavaSkript i webbläsaren

Exempelvis:

<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 Ecmascript-funktioner som släppts, och utvecklare kan använda samma när de kodar. Men inte alla nya funktioner stöder i äldre webbläsare, på grund av vilka du behöver kompilera javascript till en äldre version av Ecmascript. TypeScript ger kompilatoralternativ som kan göra 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. Om du vill ändra det kan du använda kommandot ovan.

För närvarande kommer vi att använda ES6 i detta TypeScript handledning 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 densamma när den kompileras till ES6 ändras inte.

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

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

Så här borta ändras fettpilen till en normal 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 JavaScript. Så låt oss lära oss att deklarera och tilldela värde till variabler i TypeScript.

Variabler kan inte användas i kod utan att definiera. 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 javascript, och användare som är bekanta med javascript kommer att tycka att det är väldigt enkelt. Bara variabler som Låt och const används inte mycket i jämförelse med var.

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 variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

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

Exempel 2:

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

Exempel 3:

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

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Deklarera variabler med let

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

Syntax:

let name="Roy";

Arbetet med Låt variabel är nästan samma som var, men med en liten skillnad och kommer att förstå detsamma med en TypeScript exempel.

Exempelvis:

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

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

Ovanför TypeScript exemplet ger ett fel, men detsamma skulle ha fungerat bra om det var med var nyckelord. Variabler använder Låt är tillgängliga inom det deklarerade blockomfånget, till exempel är variabeln t endast tillgänglig i if-blocket och inte för hela funktionen.

Även om du råkar deklarera en variabel i någon funktion, eller for-loop, while-loop, TypeScript switchblock, kommer det att vara tillgängligt för dig endast inom det blocket och ingen referens till det utanför blocket, och det kommer att ge ett fel om variabeln används utanför blocket. Detta är huvudskillnaden mellan var och let nyckelordsdeklarerade variabler.

Deklarera variabler med hjälp av const

Const betyder konstanta variabler. De liknar låtvariabler, med den enda skillnaden är att när ett värde väl har tilldelats det inte kan ändras.

Syntax:

const name;

Exempelvis:

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

Så användare kan bara använda const-variabler i de fall de vet att de inte behöver ändra värdena som tilldelats den.

Skriver in TypeScript

TypeScript är ett starkt maskinskrivet språk, medan javascript inte är det. En variabel som har ett värde definierat som en sträng kan ändras till ett tal utan problem Javascript. Detsamma tolereras inte i TypeScript. I TypeScript, typen till en variabel definieras endast i början och genom exekveringen måste den bibehålla samma typ. Alla ändringar av den kommer att leda till ett kompileringsfel under kompileringen till javascript.

Följande är typerna:

Antal
Sträng
Boolean
Vilken som helst
Ogiltig

Antal

Tar bara heltal, flöten, bråk osv.

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å nummertyper:

toFixed() – det kommer att konvertera talet till en sträng och kommer att behålla decimaler som ges till metoden.

att stränga () – den här metoden konverterar tal 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 strängmetoder

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() – denna metod kommer att dela upp strängen i en array.
charAt() – denna metod ger det första tecknet för det angivna indexet.
index för() – denna metod kommer att ge positionen för den första förekomsten för värdet som ges till den.
ersätta () – den här metoden tar 2 strängar, först värdet för att söka i strängen och om det finns kommer det att ersätta det med den 2:a och kommer att ge en ny sträng tillbaka.
Trim () – den här metoden tar bort vita mellanslag från båda sidor av strängen.
substr() – denna metod kommer att ge en del av strängen som kommer att bero på positionen som anges som start och slut.
delsträng() – denna metod kommer att ge en del av strängen som kommer att bero på positionen som anges som start och slut. Tecknet i slutpositionen kommer att exkluderas.
till versaler() -kommer att konvertera strängen till versaler
till LowerCase() – konverterar strängen till gemener.

Exempelvis:

let _str:string = "Typescript";

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

Boolean

Accepterar logiska värden som sant, falskt, 0 och 1.

Syntax:

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

Vilken som helst

Syntax:

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

Variabler som deklareras med hjälp av vilken som helst typ kan ta variabeln som en sträng, nummer, array, boolean eller void. TypeScript kommer inte att kasta några kompileringsfel; detta liknar de variabler som deklareras i JavaManus. Använd valfri typvariabel endast när du inte är säker på vilken typ av värde som kommer att associeras med den variabeln.

Ogiltig

Void typ används mest som en returtyp på en funktion som inte har något att returnera.

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 Array-operationer i TypeScript.

Eftersom TypeScript är ett starkt skrivet språk, måste du tala om vad som kommer att vara datatypen för värdena i en array. Annars kommer den att betrakta den som vilken typ som helst.

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

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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 till längden på arrayen.

Exempelvis:

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

Du kan också hämta elementen från en array med hjälp av 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]);
}
Output:
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])
}

Output:
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)
}
Output:
2016
2017
2018
2019

Använder varje slinga

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

TypeScript Array-metoder

TypeScript Array-objekt har 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 från en metod genom att ange array name.method().

längd egendom

=> Om du vill veta antalet element i en array kan du använda egenskapen length.

Reverse metod

=> Du kan vända ordningen på objekt i en array med en omvänd metod.

Sorteringsmetod

=> Du kan sortera objekten i en array med hjälp av sorteringsmetoden.

Popmetod

=> Du kan ta bort det sista objektet i en array med en pop-metod.

Shift metod

=> Du kan ta bort det första objektet i en array med skiftmetoden.

Push-metod

=> Du kan lägga till värde som det sista objektet i arrayen.

concat-metod

=> Du kan sammanfoga två arrayer till ett arrayelement.

Exempel på längdegenskap

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

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

Exempel på omvänd metod

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

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

Exempel på sorteringsmetod

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

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

Exempel på popmetod

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

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

Exempel på skiftmetod

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

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

Exempel på push-metod

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

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 JavaSkript, så vad som helst möjligt att göra i JavaSkript är också möjligt i TypeScript. Klass är en ny funktion som lagts till från ES6 och framåt, så tidigare JavaSkript klasstypsfunktionaliteten provades med en funktion med prototypfunktionalitet för att återanvända kod. Med hjälp av klass kan du ha vår kod nästan nära språk som java, c#, python, etc., där koden kan återanvändas. Med inslaget av klass i TypeScript/JavaManus, det gör språket väldigt kraftfullt.

Definiera en klass i TypeScript

Här är en grundläggande klasssyntax 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 egenskaper ålder, namn och roll_no.

Konstruktör i en TypeScript Klass

Klassstudentexemplet vi har definierat ovan, det 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 parametrar ålder, namn och roll_no. Konstruktören kommer att ta hand om att initiera egenskaperna när klassen anropas. Fastigheterna nås med hjälp av detta nyckelord. Exempel this.age för att komma åt egendomen ålder, this.roll_no för att komma åt roll_no, etc. Du kan också ha en standardkonstruktor, som visas nedan:

constructor () {}

Metoder inuti en TypeScript Klass

Klass Studentexemplet finns metoder definierade till exempel getRollNo(), getName(), getAge() som används för att ge detaljer om egenskaper roll_no, namn och ålder.

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

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

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

Skapa instans av klass i TypeScript

Exempelvis:

In TypeScript för att skapa en instans av en klass måste du använda den nya operatorn. När vi skapar en instans av en klass med hjälp av ny operator får vi objektet som kan komma åt klassens egenskaper och metoder enligt nedan:

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

sammanställa TypeScript Klass till JavaScript

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

Command: tsc  Students.ts

Utsignalen från Javascript kod vid kompilering är som 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, konverteras klassen till en självanropad funktion.

Klass Arv

Klasser kan ärvas med hjälp av förlänga 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. Studentklass utökar Person, och objektet som skapats på Student kan komma åt sina egna metoder och egenskaper såväl som klassen det har utökat.

Låt oss nu lägga till några fler ändringar i ovanstående klass.

Exempelvis:

class Person {
    name: string;
    age: number;

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

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

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

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

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

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

Ändringarna som du har lagt till i jämförelse med föregående exempel är att det finns en konstruktor definierad i klassen Student. Konstruktören måste ta samma parametrar som basklassen och lägga till eventuella ytterligare parametrar.

In TypeScript du måste ringa super will alla params som baserna params i den. Detta måste vara det första som ska göras inuti konstruktören. Super kommer att köra konstruktören för den utökade klassen.

Åtkomstmodifierare i TypeScript

TypeScript stöder offentliga, privata och skyddade åtkomstmodifierare till dina metoder och egenskaper. Som standard, om åtkomstmodifierare inte ges anses metoden eller egenskapen vara offentlig, och de kommer att vara lättillgängliga från klassens objekt.

I händelse av privata åtkomstmodifierare är de inte tillgängliga för åtkomst från klassens objekt och endast avsedda att användas i klassen. De är inte tillgängliga för den ärvda klassen.

I händelse av skyddade åtkomstmodifierare är de avsedda att användas i klassen och den ärvda klassen och kommer inte att vara tillgängliga från klassens objekt.

Exempelvis:

class Person {
    protected name: string;
    protected age: number;

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

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

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

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

Privat: egenskaper eller metoder kan inte nås av klassens objekt och även den härledda klassen, de är avsedda att användas internt i klassen.
Skyddade: egenskaper och metoder kan inte heller nås av det skapade objektet. De är tillgängliga inifrån klassen och tillgängliga för klassen som förlänger den.
Offentlig: egenskaper och metoder deklareras utan något nyckelord. De är lätta att nå med klassens objekt utifrån.

Gränssnitt i TypeScript

En av kärnfunktionerna i TypeScript är gränssnitt. Gränssnittet är en uppsättning av en definierad regel som måste implementeras av den enhet som använder den. Entiteten kan vara en klass, funktion eller variabel. Ett gränssnitt kan bestå av egenskaper och metoder. Du kan definiera egenskaper som valfria genom att använda "?" syntax för den egenskapen eller metoden. Gränssnittet lägger till en stark typkontroll för alla funktioner, variabler eller klasser som implementerar gränssnittet.

Syntax för ett gränssnitt i TypeScript

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

Du har definierat ett gränssnitt som heter Dimension som har egenskaper bredd och höjd, och båda har typ som en sträng.

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

Exempelvis:

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

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

Signaturen för gränssnittet Dimension har bredd och höjd, och båda är obligatoriska. Om någon av egenskaperna missas under implementering av gränssnittet, eller om typen ändras, kommer det att ge ett kompileringstidsfel när koden kompileras till javascript.

Ovanstående kod, när den kompileras till javascript, ser ut som följer:

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

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

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

Exempelvis:

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

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

I exemplet ovan är gränssnittet Dimension implementerat på funktionen getDimension() som returtyp. Returtypen för getDimension() måste matcha egenskaperna och typen som nämns för Interface Dimension.

Den kompilerade koden till Javascript kommer att vara enligt följande:

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

Under kompileringen, om returtypen inte matchar gränssnittet, kommer det att ge 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"}); // will get "300px-250px"

Så ovanstående exempel har du använt Interface Dimension som en parameter för funktionen getDimension(). När du anropar funktionen måste du se till att parametern som skickas till den matchar den definierade gränssnittsregeln.

Den kompilerade koden till Javascript kommer att vara enligt följande:

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

Klassimplementerande gränssnitt

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

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

class NameofClass implements InterfaceName {
}

Följande exempel visar hur gränssnittet fungerar med 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änssnitt Dimension med egenskaper bredd och höjd både av typen sträng och en metod som heter getWidth() som har ett returvärde som en sträng.

Den kompilerade koden till Javascript kommer att vara enligt följande:

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 en uppsättning instruktioner som utförs för att utföra en uppgift. I Javascript, är det mesta av koden skriven i form av funktioner och spelar en stor roll. I TypeScript, du har klass, gränssnitt, moduler, namnutrymmen tillgängliga, men ändå spelar funktioner en viktig roll. Skillnaden mellan funktionen i javascript och TypeScript funktion är returtypen som finns tillgänglig med TypeScript funktion.

JavaSkriptfunktion:

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

TypeScript fungera:

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

I ovanstående funktioner läggs namnet på funktionen till, parametrarna är a1och b1 båda har en typ som ett tal, och returtypen är också ett tal. Om du råkar skicka en sträng till funktionen kommer den att skapa ett kompileringsfel när den kompileras till JavaManus.

Ringa upp funktionen: lägg till

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

Paramerna a1 och b1 är obligatoriska parametrar och kommer att ge ett fel om det inte tas emot på det sättet. Param-typen och returtypen är också mycket viktig och kan inte ändras när den väl har definierats.

Valfria parametrar till en funktion

I javascript är alla parametrar till funktionerna valfria och betraktas som odefinierade om de inte godkänns. Men detsamma är inte fallet med TypeScript, när du väl har definierat parametrarna måste du också skicka dem, men om du vill behålla någon param valfri kan du göra det genom att använda? mot paramnamnet som visas nedan:

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

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

Observera att de valfria parametrarna endast ska definieras i en funktion till sist, du kan inte ha den första paramen som valfri och den andra paramen som obligatorisk. När du anropar funktionen med en param kommer kompilatorn att skapa ett fel. Så det är nödvändigt att behålla de valfria parametrarna i slutet.

Tilldela standardvärden till parametrar

Du kan tilldela standardvärden till parametrar som visas 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 standardinitierade parametrar även här behållas i slutet i en funktion.

Vila parametrar

Du har sett hur TypeScript hanterar obligatoriska parametrar, valfria parametrar och standardvärdet initierade parametrar. Nu ska vi ta en titt på viloparametrar. Viloparametrar är en grupp valfria parametrar som definieras tillsammans, och de definieras med tre prickar (…) följt av namnet på param, som är en array.

Syntax för viloparametrar:

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

Som visas ovan definieras viloparametrarna med (…param-namn); resten param är en array med tre punkter som prefix. Arrayen kommer att skicka alla parametrar till sig. Du kan anropa funktionen, som visas i exemplet nedan:

Exempelvis:

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

Pilfunktioner

En pilfunktion är en av de viktiga funktionerna som släpps i ES6, och den är tillgänglig i TypeScript för. Pilfunktionssyntaxen har en fet pil på grund av vilken funktionen kallas en pilfunktion.

Pilfunktion Syntax:

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

Vad är användningen av pilfunktionen?

Låt oss ta en titt på exemplet för att förstå användningsfallet för pilfunktionen:

Exempelvis:

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 anonym funktion som har en egenskap detta. Score initialisera till 0 och en metod getScore som internt har en setTimeout, och på 1 sekund tröstar den detta.score. Det tröstade värdet ger undefined även om du har this.score definierad och initialiserad. Frågan här är med this nyckelord. Funktionen inuti setTimeout har sin egen detta, och den försöker referera poängen internt, och eftersom den inte är definierad ger den odefinierad.

Detsamma kan göras med hjälp av pilfunktionen 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();

Du har ändrat funktionen i setTimeout till en pilfunktion som visas nedan:

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

En pilfunktion har inte sin egen detta definieras och den delar sin förälder detta, så variabler som deklareras utanför är lättillgängliga med denna inuti en pilfunktion. De är användbara på grund av den kortare syntaxen såväl som för återuppringningar, händelsehanterare, interna timingfunktioner, etc.

TypeScript Enums

TypeScript Enum är ett objekt som har en samling relaterade värden lagrade tillsammans. Javascript stöder inte uppräkningar. De flesta av programmeringsspråk tycka om Java, C, C++ stöder TypeScript Enum och det finns även med TypeScript för. Enums definieras med 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 uppräkning som heter Vägbeskrivningar. Värdet som anges är North, South, East, West. Värdena numreras från 0 för det första värdet i uppräkningen och ökar sedan med 1 för nästa värde.

Deklarera En Enum med ett numeriskt värde

Som standard, om en enum inte ges något värde, betraktar den det som ett tal som börjar från 0. Följande exempel visar en enum med ett numeriskt värde.

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

Du kan också tilldela ett startvärde till enummet och nästa uppräkningsvärde kommer att få de ökade värdena. Till exempel:

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

Nu börjar uppräkningsvärdet North med 5, så syd får värdet som 6, öst = 7 och väst = 8.

Du kan också tilldela valfria värden istället för att ta 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 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 kompilerade koden till javascript är följande:

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 Javascript stöder inte enums, den konverterar enumen till en självanropad funktion som visas ovan.

Deklarera An Enum med ett strängvärde

Du kan tilldela strängvärden som du väljer, som visas i exemplet nedan:

Exempelvis:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Den kompilerade koden till javascript är följande:

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?

Filerna skapade i TypeScript ha global åtkomst, vilket innebär att variabler som deklarerats i en fil lätt kan nås i en annan fil. Denna globala karaktär kan orsaka kodkonflikter och kan orsaka problem med körning under körning. Du har export- och importmodulfunktionalitet som kan användas för att undvika globala variabel-funktionskonflikter. Denna funktion är tillgänglig i JavaSkript med ES6-release 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-filen kan du enkelt komma åt variabeln ålder definieras i test1.ts och även ändra den enligt nedan:

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

Så ovanstående fall kan skapa många problem eftersom variablerna är globalt tillgängliga och kan modifieras.

Med Moduler, förblir den skrivna koden lokalitet för filen och kan inte nås utanför den. För att komma åt något från filen måste den exporteras med nyckelordet export. It används när du vill att variabeln, klassen, funktionen eller gränssnittet ska användas i en annan fil. Importera används när du vill komma åt den exporterade variabeln, klassen eller gränssnittet eller funktionen också. Om du gör så förblir koden intakt i filen, och även om du definierar samma variabelnamn, blandas de inte ihop och beter sig lokalt för filen där de deklareras.

Använda Export och Import

Det finns många sätt att exportera och importera. Så kommer att diskutera syntax här som används mest.

Syntaxen för import och export 1:

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

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

Exempelvis:

test1.ts

export let age: number = 25;

Export nyckelord används för att dela åldersvariabel i en annan fil.

test2.ts

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

Importera nyckelord 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 import och syntax för detsamma är som 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(“filsökväg till modulnamn”) för att importera den.

Här är ett fungerande exempel som visar fallet ovan:

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 modulladdare för att lokalisera importberoendena som du har sett i TypeScript exempel som visas ovan. Den tillgängliga modulladdaren är CommonJS för nodejs och Require.js för att köras i webbläsaren.

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

tsc --module commonjs testCustomer.ts

För att kompilera kod med Requirejs-modulen använd följande kommando:

tsc --module amd testCustomer.ts

De beroende filerna kommer att konverteras till js-fil med ovanstående kommando.

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

Namnutrymme är i princip har en samling av klasser, gränssnitt, variabler, 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 namnområde.

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ällning, du har lagt till ett gränssnitt StudDetails , funktion addSpace och en klass som heter Student.

Åtkomst till namnutrymme

Följande är koden där du använder namnutrymmet Studentinställning.

testStudentSetup.ts

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

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

Klassen, gränssnittet, en funktion som är tillgänglig i ett namnområde måste refereras med namnet på namnutrymmesexemplet StudentSetup.addSpace för att komma åt funktionen, StudentSetup.Student för att komma åt klassen.

Du kan kompilera båda filerna till en js som visas nedan:

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

Kontrollera utdata i kommandotolken med kommandot nedan:

node namespace.js

Det kommer att visa utdata som:

The name is: H a r r y

Omgivningsdeklarationer i TypeScript

TypeScript låter dig använda tredjeparts javascript-filer med omgivande deklaration. Fördelen med den här funktionen är att du inte behöver skriva om och ändå använda alla funktioner i biblioteket i TypeScript.

Ambient syntax

För att deklarera omgivande modul:

declare module moduleName {
   //code here
}

Omgivningsfilen måste sparas som:

filename.d.ts

För att använda filen filnamn.d.ts i din .ts måste du hänvisa till det som:

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

Omgivningstypdeklarationen i TypeScript kommer att ha en referens till tredje parts bibliotek och kommer att återdeklarera de funktioner som krävs med sin egen typ. Tänk till exempel att du har ett litet javascript-bibliotek, som visas nedan:

Tredjeparts JavaSkriptfil: testString.js

Exempel: 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 funktioner som isString, convertToUpperCase, convertToLowerCase och converToStringBold.

Skapande av Ambient Module i TypeScript

Nu kommer att skapa en omgivande modul som kommer att ha hänvisning till ovanstående js-funktioner och även lägga till typkontroll enligt våra krav.

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 måste definiera ett modulnamn som TestString och ha exporterat gränssnitt StringsFunc.

isString(str: sträng): boolesk

=> Detta tar param som en sträng och returtypen kommer att vara boolesk. När du använder i din .ts-fil om du råkar skicka paramet som ett nummer eller något annat än sträng kommer det att ge dig ett kompileringsfel.

convertToUpperCase(str:sträng): sträng

=> Detta tar argument som sträng och returnerar en sträng. Detsamma gäller convertToLowerCase(str: sträng)
: sträng; och convertToStringBold(str: sträng): sträng
;

Eftersom du i javascript-filen har objektnamnet som StringChecks, måste vi slutligen referera till detsamma i .d.ts-filen som görs som:

declare var StringChecks: TestString.StringsFunc;

Använder Ambient-modulen i TypeScript

Här är test.ts-filen där den omgivande filen tstring.d.ts kommer att användas

Exempel: test.ts

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

Sammanställa TypeScript tsc test.ts till 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 html-filen och även biblioteksfilen testString.js

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

Detta är utgången som ses i konsolen:

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

TypeScript Historik

Låt se viktiga landmärken från historien om TypeScript:

Efter två år av intern utveckling kl Microsoft. TypeScript 0.9, släppt 2013
Ytterligare stöd för generika TypeScript 1.0 släpptes vid Build 2014
I juli 2014, en ny TypeScript kompilatorn kom som är fem gånger snabbare än den tidigare versionen.
I juli 2015, stöd för ES6-moduler, namnutrymmes nyckelord, för, för support, dekoratörer.
I november 2016, en tillagd funktion som nyckel- och uppslagstyper för mappade typer och vila.
Den 27 mars 2018, villkorade typer, den förbättrade nyckeln med korsningstyper stöds i TypeScript.

Varför användning TypeScript?

Här finns viktiga fördelar/fördelar med att använda TypeScript

Stort och komplext projekt i JavaSkript är svåra att koda och underhålla.
TypeScript hjälper mycket i kodorganisationen och blir ändå av med de flesta felen under kompileringen.
TypeScript stöder JS-bibliotek och API-dokumentation
Det är valfritt maskinskrivet skriptspråk
TypeScript Koden kan konverteras till vanlig JavaSkriptkod
Bättre kodstrukturering och objektorienterade programmeringstekniker
Ger bättre stöd för verktyg för utvecklingstid
Det kan utöka språket bortom standarddekoratörerna, asynkronisera/vänta

Vem använder TypeScript?

Här är några vanligaste tillämpningar av TypeScript:

Det kantiga laget använder TypeScript.
NodeJS och NPM installation
TypeScript Installation
Sammanställa TypeScript kod till Javascript
Kör kod med Nodejs
Utförande Javascript i webbläsaren
Sammanställa TypeScript kod till Javascript använder EcmaScript-versionen
Du kan enkelt kompilera kod inskriven TypeScript till JavaSkript med NodeJS.
Så att jobba med TypeScript du måste först ladda ner och installera NodeJS.

Sammanfattning

TypeScript är en superset av JavaManus. TypeScript är rent objektorienterat programmeringsspråk som stödjer klasser, gränssnitt m.m.
TypeScript stöder alla Ecmascript-funktioner som släppts, och utvecklare kan använda samma när de kodar.
Variabler används för att lagra värden, och värdet kan vara en sträng, tal, boolesk eller ett uttryck.
In TypeScript, typen till en variabel definieras endast i början och genom exekveringen måste den bibehålla samma typ. Alla ändringar av den kommer att leda till ett kompileringsfel under kompileringen till javascript.
En Array in TypeScript är en datatyp där du kan lagra flera värden.
Klass är en ny funktion som lagts till från ES6 och framåt, så tidigare JavaSkript klasstypsfunktionaliteten testades med en funktion med prototypfunktionalitet för att återanvända kod.
TypeScript stöder offentliga, privata och skyddade åtkomstmodifierare till dina metoder och egenskaper.
En av kärnfunktionerna i TypeScript är gränssnitt. Gränssnittet är en uppsättning av en definierad regel som måste implementeras av den enhet som använder den.
Funktioner är en uppsättning instruktioner som utförs för att utföra en uppgift.
TypeScript Enum är ett objekt som har en samling relaterade värden lagrade tillsammans.

Du kanske gillar:

Vad är TypeScript?

Hur man laddar ner och installerar TypeScript

Sammanställa TypeScript kod till Javascript

Utförande Javascript använder Nodejs

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

RELATERADE ARTIKLAR

Variabler i TypeScript

Deklarera variabler med var

Deklarera variabler med let

Deklarera variabler med hjälp av const

Skriver in TypeScript

Antal

Sträng

Boolean

Vilken som helst

Ogiltig

TypeScript array

Deklarera och initiera en array

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

Använda TypeScript för slinga

Använder for-in loop

Använder för-av loop

Använder varje slinga

TypeScript Array-metoder

längd egendom

Reverse metod

Sorteringsmetod

Popmetod

Shift metod

Push-metod

concat-metod

Exempel på längdegenskap

Exempel på omvänd metod

Exempel på sorteringsmetod

Exempel på popmetod

Exempel på skiftmetod

Exempel på push-metod

Exempel på konkatmetod

Klass i TypeScript

Definiera en klass i TypeScript

Exempel: Ett fungerande exempel på Class

Konstruktör i en TypeScript Klass

Metoder inuti en TypeScript Klass

Skapa instans av klass i TypeScript

sammanställa TypeScript Klass till JavaScript

Klass Arv

Klassarvssyntax:

Åtkomstmodifierare i TypeScript

Gränssnitt i TypeScript

Syntax för ett gränssnitt i TypeScript

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

Gränssnitt som funktionsparameter

Klassimplementerande gränssnitt

Fungerar i TypeScript

Ringa upp funktionen: lägg till

Valfria parametrar till en funktion

Tilldela standardvärden till parametrar

Vila parametrar

Pilfunktioner

Vad är användningen av pilfunktionen?

TypeScript Enums

Hur deklarerar man en Enum?

Deklarera En Enum med ett numeriskt värde

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

Deklarera An Enum med ett strängvärde

Vad är modulerna i TypeScript?

Varför behöver du moduler i TypeScript?

Använda Export och Import

Syntaxen för import och export 1:

Syntax för import och export 2:

Modullastare

Exempel testCustomer.ts till testCustomer.js med Requirejs

Exempel Customer.ts till Customer.js med Requirejs

Namnutrymmen i TypeScript

Syntax för namnutrymme

Åtkomst till namnutrymme

Omgivningsdeklarationer i TypeScript

Ambient syntax

För att deklarera omgivande modul:

Omgivningsfilen måste sparas som: