TypeScript Veiledning: Hva er, grensesnitt, enum, array

Hva er TypeScript?

TypeScript er et supersett av JavaManus. TypeScript er et objektorientert programmeringsspråk som støtter klasser, grensesnitt og mer. Det er et åpen kildekode-språk utviklet av Microsoft som statisk kompilerer koden til JavaSkript. Det kan enkelt kjøres i en nettleser eller i Nodejs.

Alle de nyeste funksjonene utgitt for ECMAScript støttes i TypeScript, og i tillegg TypeScript har sine egne objektorienterte funksjoner som grensesnitt, ambientdeklarasjoner og klassearv, som hjelper i utviklingenping en stor applikasjon som ellers ville være vanskelig å bygge inn JavaScript.

Forholdet er enveis. Hver gyldighet JavaSkriptfilen er allerede gyldig TypeScript, men det motsatte er ikke sant, fordi typeannoteringer bare finnes i TypeScript og slettes under kompilering.

Hvorfor bruke TypeScript?

Her er de viktigste fordelene med å bruke TypeScript:

• Store og komplekse prosjekter i JavaSkript er vanskelig å kode og vedlikeholde.
• TypeScript hjelper mye med kodeorganisering, og fjerner de fleste feil under kompilering i stedet for under kjøring.
• TypeScript støtter JS-biblioteker og API-dokumentasjon.
• Det er et valgfritt typebestemt skriptspråk, så typer kan tas i bruk gradvis.
• TypeScript koden kan konverteres til vanlig JavaSkriptkode for et hvilket som helst nettlesermål.
• Det gir bedre kodestrukturering og objektorienterte programmeringsteknikker.
• Det gir bedre støtte for utviklingsverktøy, inkludert autofullføring og sikker refaktorering.
• Det kan utvide språket utover standarden, med funksjoner som dekoratører.

Den største praktiske gevinsten er editorstøtte. Fordi kompilatoren kjenner formen på hver verdi, kan en editor gi nytt navn til en egenskap på tvers av et helt prosjekt og rapportere hvert sted som ikke lenger samsvarer.

TypeScript Historie

La oss se på de viktigste landemerkene fra historien til TypeScript:

• Etter to år med intern utvikling kl Microsoft, TypeScript 0.9 ble utgitt i 2013.
• TypeScript 1.0, med ekstra støtte for generiske legemidler, ble utgitt på Build 2014.
• I juli 2014 ble en ny TypeScript kompilatoren ankom, som var fem ganger raskere enn den forrige versjonen.
• I juli 2015 ble det lagt til støtte for ES6-moduler, navnerommets nøkkelord, for…of og decorators.
• I november 2016 ble tilordnede typer, nøkkel- og oppslagstyper, samt objektrest og -spredning lagt til.
• 27. mars 2018 ble betingede typer og forbedret keyof med skjæringspunktstyper lagt til.
• TypeScript 5.0, utgitt i mars 2023, moderniserte dekoratører og reduserte pakkestørrelsen.
• TypeScript 6.0 kom i mars 2026 som den endelige utgivelsen bygget på JavaSkriptkodebase.
• TypeScript 7.0 flytter kompilatoren til en innebygd Go-implementering, som Microsoft rapporteres som omtrent ti ganger raskere enn 6.0.

Hvem bruker TypeScript?

TypeScript er ikke lenger et nisjevalg. Det ligger til grunn for flere av de mest brukte front-end- og back-end-verktøyene, og listen nedenfor viser hvor en nybegynner mest sannsynlig vil støte på det.

• Vinkel: Angular-rammeverket er skrevet i TypeScript, og det forventes også at applikasjonskode skrives i den.
• React- og Vue-prosjekter: Begge økosystemene sender offisielle TypeScript maler, og de fleste moderne startere aktiverer det som standard.
• Node.js-bakenden: Serverrammeverk som NestJS er bygget rundt TypeScript klasser og dekoratører.
• Redigeringsverktøy: Visual Studio Code er i seg selv en stor TypeScript kodebasen, og det er derfor språkstøtten er så komplett.
• Store bedriftsgrensesnitt: Team som jobber med mange bidragsytere bruker det for å fange opp integrasjonsfeil før distribusjon.

Hvordan laste ned og installere TypeScript

Her er den trinnvise prosessen for å laste ned og installere TypeScript:

Trinn 1) Last ned og installer Nodejs

Gå til Nodejs' offisielle nettsted, https://nodejs.org/en/download/, og last ned og installer Nodejs for operativsystemet ditt. Detaljerte instruksjoner er tilgjengelige i veiledningen på hvordan laste ned og installere Node.js.

Trinn 2) Sjekk Nodejs og npm-versjonen

For å sjekke om Nodejs og npm er installert, sjekk versjonen i ledeteksten.

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

D:\typeproject>npm --version
10.9.2

Alle nåværende Node LTS-utgivelser fungerer. TypeScript krever bare en støttet Node-versjon for å kjøre kompilatoren.

Trinn 3) TypeScript Installasjon

Opprett prosjektkatalogen din typeproject\ og kjør npm init, som vist i kommandoen nedenfor:

npm init

Trinn 4) Start installasjonen

Dette oppretter package.json, som vil lagre avhengighetene for prosjektet vårt.

Når du er ferdig, installer TypeScript som følger:

npm -g install typescript

Kommandoen ovenfor vil ta seg av installasjonen TypeScript. Å legge til "-g" til npm install vil installere TypeScript globalt. Fordelen med å bruke -g er at du vil kunne bruke TypeScript TSC kommandoen fra en hvilken som helst katalog, siden den er installert globalt. Hvis du ikke vil installere TypeScript globalt, bruk kommandoen nedenfor:

npm install --save-dev typescript

Opprett en src\-mappe i prosjektkatalogen din, og inni src\ opprett TypeScript fil test.ts og skriv koden din.

Eksempel: test.ts

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

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

Kompilere TypeScript kode til Javascript

For å kompilere koden ovenfor, bruk følgende kommando.

If TypeScript er installert globalt, bruk kommandoen nedenfor:

tsc test.ts

If TypeScript er installert lokalt i prosjektet ditt, må du bruke banen til TypeScript fra node_modules, som vist, eller kjør den gjennom npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Kommandoen ovenfor vil opprette en test.js-fil som vil ha koden kompilert til JavaManus.

Eksempel: test.js

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

Henrette Javascript bruker Nodejs

Nå skal vi kjøre test.js i Nodejs som følger:

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

Verdien som sendes til console.log vises når test.js kjører.

Henrette JavaSkript i nettleseren

Eksempel:

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

Kompilere TypeScript kode til Javascript bruker EcmaScript-versjonen

TypeScript støtter alle utgitte ECMAScript-funksjoner, og utviklere kan bruke dem mens de koder. Men ikke alle nye funksjoner støttes på eldre nettlesere, så du må kanskje kompilere til en eldre versjon av ECMAScript. TypeScript tilbyr kompilatoralternativer som gjør nettopp det.

Eksempel: test.ts

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

addnumbers(10, 20);

For å kompilere til ES-versjonen av ditt valg, kan du bruke mål- eller t-alternativet i kommandoen din som følger:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Som standard er målet ES3 for den klassiske kompilatoren. Hvis du vil endre det, kan du bruke kommandoen ovenfor.

For øyeblikket bruker vi ES6 som mål:

tsc --target ES6  test.ts

test.ts til test.js

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

addnumbers(10, 20);

Koden forblir som den er, fordi pilfunksjonen du har brukt er en ES6-funksjon og forblir uendret når den kompileres til ES6.

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

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

Så her er den fete pilen endret til en vanlig anonym funksjon.

Variabler i TypeScript

Variabler brukes til å lagre verdier, og verdien kan være en streng, tall, boolsk eller et uttrykk. Når det gjelder variabler i TypeScript, de ligner på JavaScriptSå la oss lære å deklarere og tilordne en verdi til variabler i TypeScript.

Variabler kan ikke brukes i kode uten å være definert. For å deklarere en variabel kan du bruke

var søkeord,

la søkeord

const søkeord

Arbeid med variabler i TypeScript ligner JavaSkript og brukere som er kjent med JavaSkriptet vil synes det er veldig enkelt. I moderne kode, la og const er foretrukket fremfor var, fordi blokkomfanget deres forhindrer en hel klasse med feil.

Deklarere variabler ved å bruke var

Syntaks:

var firstname = "Roy";

La oss ta en titt på noen få TypeScript eksempler for å forstå hvordan var-nøkkelordet fungerer og også omfanget av variabler som er deklarert ved hjelp av var søkeord.

Eksempel 1:

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

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

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

Eksempel 2:

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

Eksempel 3:

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

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

Deklarere variabler ved hjelp av let

Ocuco TypeScript syntaks for let er som gitt nedenfor:

Syntaks:

let name = "Roy";

Arbeidet med la variabelen er nesten den samme som var, men med én viktig forskjell, som eksemplet nedenfor viser.

Eksempel:

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

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

Ovennevnte TypeScript eksempel kaster en feil, men den samme koden ville ha fungert med var nøkkelord. Variabler deklarert ved hjelp av la er bare tilgjengelige innenfor blokken der de er deklarert. I dette eksemplet finnes t bare innenfor if-blokken, ikke i hele funksjonen.

Det samme gjelder i enhver funksjon, for-løkke, while-løkke eller switch-blokk. En let-variabel er bare tilgjengelig i den blokken, og å referere til den utenfor kaster en feil. Dette er hovedforskjellen mellom var og let.

Deklarere variabler ved hjelp av const

Const betyr konstante variabler. De ligner på let-variabler, med den forskjellen at når en verdi først er tildelt, kan den ikke endres. En const-deklarasjon må derfor initialiseres på samme linje.

Syntaks:

const name = "Roy";

Eksempel:

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

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

Så bruk const når du vet at den tildelte verdien ikke vil bli tildelt på nytt. Merk at const forhindrer omtildeling av bindingen, ikke modifisering av et objekt den peker til.

Skriver inn TypeScript

TypeScript er et sterkt typespråk, mens JavaSkriptet er ikke det. En variabel hvis verdi er definert som en streng kan endres til et tall uten problemer i JavaManus. Det samme tolereres ikke i TypeScript. i TypeScript, typen til en variabel er definert i starten, og gjennom hele kjøringen må den beholde den typen. Enhver endring fører til en kompileringsfeil under kompilering til JavaManus.

Følgende er de grunnleggende typene:

Nr

Tar bare heltall, flyttall, brøker og lignende numeriske verdier.

Syntaks:

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

Her er noen viktige metoder som kan brukes på talltyper:

toFixed() – den vil konvertere tallet til en streng og beholde desimalene som er gitt til metoden.

toString () – denne metoden vil konvertere tallet til en streng.

verdien av() – denne metoden vil gi tilbake den primitive verdien av tallet.

toPrecision() – denne metoden vil formatere tallet til en spesifisert lengde.

Eksempel: med alle tallmetoder

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

String

Streng: kun strengverdier.

Syntaks:

let str :string = "hello world";

Her er noen viktige metoder som kan brukes på strengtyper:

• splittet() – denne metoden vil dele strengen inn i en matrise.
• charAt() – denne metoden vil gi tegnet ved den gitte indeksen.
• oversikt over() – denne metoden vil gi posisjonen til den første forekomsten av verdien som er gitt til den.
• erstatte() – denne metoden tar to strenger. Den søker etter den første verdien i strengen, og hvis den finnes, erstatter den den med den andre, slik at en ny streng blir gitt tilbake.
• trim() – denne metoden fjerner mellomrom fra begge sider av strengen.
• substr() – denne metoden vil gi en del av strengen, avhengig av startposisjonen og den oppgitte lengden.
• delstreng() – denne metoden vil gi en del av strengen, avhengig av start- og sluttposisjonen. Tegnet på sluttposisjonen ekskluderes.
• til Store bokstaver() – vil konvertere strengen til store bokstaver.
• til LowerCase() – vil konvertere strengen til små bokstaver.

Eksempel:

let _str:string = "Typescript";

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

boolean

En boolsk verdi aksepterer bare de logiske verdiene sann og usann. I motsetning til ren JavaSkript, tallene 0 og 1 godtas ikke, fordi de er av typen nummer.

Syntaks:

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

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

Noen

Syntaks:

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

Variabler deklarert ved hjelp av noen typen kan inneholde en streng, et tall, en array, en boolsk verdi eller et tomrom. TypeScript vil ikke kaste noen kompileringsfeil, noe som ligner på variabler i JavaSkript. Bruk bare any-typen når du er usikker på hvilken type verdi som skal knyttes til variabelen, fordi den slår av alle kontroller på den verdien.

Tomrom

Void-typen brukes mest som returtype for en funksjon som ikke returnerer noe.

Syntaks:

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

TypeScript Array

An Array in TypeScript er en datatype der du kan lagre flere verdier. La oss lære hvordan vi deklarerer og tilordner verdier for arrayoperasjoner i TypeScript.

Siden TypeScript er et språk med sterk typede egenskaper, må du angi datatypen til verdiene i en matrise. Ellers vil den bli behandlet som av typen any.

Deklarer og initialiser en matrise

Syntaks:

let nameofthearray : Array<typehere>

Eksempel

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

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

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

Ulike måter å få tilgang til elementer fra en matrise

For å hente elementene fra en matrise, starter verdiene fra indeks 0 og opp til lengden på matrisen minus én.

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

Du kan også hente elementene fra en matrise ved hjelp av en TypeScript forum sløyfe, som vist under.

Ved hjelp av TypeScript for sløyfe

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

Utgang:

2016
2017
2018
2019

Bruker for-in loop

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

Utgang:

2016
2017
2018
2019

Bruker for-of loop

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

Utgang:

2016
2017
2018
2019

Bruk av forEach-løkken

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

Utgang:

2016
2017
2018
2019

TypeScript Array metoder

Ocuco TypeScript Array-objekter har mange egenskaper og metoder som hjelper utviklere med å håndtere arrayer enkelt og effektivt. Du kan få verdien av en egenskap ved å spesifisere arrayname.property, og utdataene av en metode ved å spesifisere arrayname.method().

Eksempel på lengdeeiendom

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

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

Eksempel på omvendt metode

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

Eksempel på sorteringsmetode

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

Eksempel på popmetode

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

Eksempel på skiftmetode

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

Eksempel på push-metode

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

Eksempel på konkatmetode

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

Klasse i TypeScript

TypeScript er et supersett av JavaManus, så hva som helst som er mulig i JavaSkript er også mulig i TypeScriptKlasse er en funksjon som er lagt til fra ES6 og utover. Tidligere i JavaSkript-, klasselignende funksjonalitet ble oppnådd ved hjelp av en funksjon med prototypemetoder for å gjenbruke kode. Ved hjelp av klasse kan koden din komme tilnærmet språk som Java, C# og Python, hvor kode enkelt kan gjenbrukes.

Definere en klasse i TypeScript

Her er den grunnleggende klassesyntaksen i TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Eksempel: Et fungerende eksempel på Class

class Students {
    age : number;
    name : string;
    roll_no : number;

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

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

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

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

I eksemplet ovenfor har du en klasse som heter Studenter. Den har egenskapene alder, navn og rullenummer.

Konstruktør i en TypeScript Klasse

Klassen Studenter som er definert ovenfor har en konstruktør som vist nedenfor:

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

Konstruktørmetoden har parameterne alder, navn og roll_no. Konstruktøren tar seg av å initialisere egenskapene når klassen instansieres. Egenskapene nås ved hjelp av denne nøkkelord, for eksempel this.age for å få tilgang til alder og this.roll_no for å få tilgang til roll_no. Du kan også ha en standardkonstruktør, som vist nedenfor:

constructor () {}

Metoder i en TypeScript Klasse

I klassen Studenter finnes det definerte metoder, for eksempel getRollNo(), getName() og getAge(), som returnerer verdiene til egenskapene roll_no, name og age.

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

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

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

Opprette en instans av en klasse i TypeScript

In TypeScript, for å opprette en instans av en klasse bruker du new-operatoren. Når du oppretter en instans med new, får du et objekt som kan få tilgang til egenskapene og metodene til klassen, som vist nedenfor:

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

Kompilering av en TypeScript Klasse til JavaScript

Du kan bruke tsc-kommandoen som vist nedenfor for å kompilere til JavaManus.

Command: tsc  Students.ts

Resultatet av JavaSkriptkoden på kompileringen er som vist nedenfor:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaScript, klassen konverteres til en selvaktivert funksjon.

Klassearv

Klasser kan arves ved å bruke strekker søkeord i TypeScript.

Klassearvsyntaks:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

klasse B vil kunne dele klasse A metoder og egenskaper.

Her er et fungerende eksempel på en klasse som bruker arv:

class Person {
    name: string;
    age: number;

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

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

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

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

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

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

Du har to klasser, Person og Student. Student utvider Person, og objektet som opprettes fra Student kan få tilgang til sine egne metoder og egenskaper i tillegg til de til klassen det utvider.

La oss nå legge til noen endringer i klassen ovenfor.

Eksempel:

class Person {
    name: string;
    age: number;

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

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

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

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

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

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

Endringen sammenlignet med forrige eksempel er en konstruktør definert i klassen Student. Konstruktøren tar de samme parameterne som basisklassen, pluss eventuelle tilleggsparametere.

In TypeScript Du må kalle super med alle parameterne i basisklassen. Dette må være den første setningen i konstruktøren, fordi super utfører konstruktøren til den utvidede klassen. Enhver egenskap deklarert av den avledede klassen, for eksempel tmarks, må da tildeles eksplisitt, ellers ville getMarks returnere undefined.

Få tilgang til Modifikatorer i TypeScript

TypeScript støtter tilgangsmodifikatorene offentlige, private og beskyttede på metodene og egenskapene dine. Som standard, hvis ingen tilgangsmodifikator er oppgitt, regnes metoden eller egenskapen som offentlig og er lett tilgjengelig fra objektet i klassen.

Når det gjelder private tilgangsmodifikatorer, er ikke medlemmer tilgjengelige fra klassens objekt og er kun ment å brukes inne i klassen. De er ikke tilgjengelige for en arvet klasse.

Når det gjelder modifikatorer for beskyttet tilgang, er medlemmer ment å brukes i klassen og den arvede klassen, og er ikke tilgjengelige fra klassens objekt.

Eksempel:

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

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

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

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

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

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

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

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

Grensesnitt i TypeScript

En av kjerneegenskapene til TypeScript er grensesnitt. Et grensesnitt er et sett med regler som må implementeres av enheten som bruker det. Enheten kan være en klasse, funksjon eller variabel. Et grensesnitt kan bestå av egenskaper og metoder. Du kan markere en egenskap eller metode som valgfri ved å bruke «?»-syntaksen. Grensesnittet legger til en sterk typekontroll for enhver funksjon, variabel eller klasse som implementerer det.

Syntaks for et grensesnitt i TypeScript

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

Du har definert et grensesnitt kalt Dimension som har egenskapene bredde og høyde, begge av typen streng.

Nå kan dette grensesnittet implementeres av en variabel, en funksjon eller en klasse. Her er et eksempel på en variabel som implementerer grensesnittet Dimension.

Eksempel:

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

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

Signaturen til grensesnittet Dimension har bredde og høyde, og begge er obligatoriske. Hvis en egenskap mangler, eller en type endres, vil det gi en kompileringsfeil når koden kompileres til JavaManus.

Koden ovenfor, når den kompileres til JavaSkript, ser slik ut:

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

La oss nå se hvordan du bruker et grensesnitt med en funksjon.

Bruke et grensesnitt på en funksjon som en returtype

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

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

I eksemplet ovenfor brukes grensesnittet Dimension som returtype for funksjonen getDimension(). Returverdien må samsvare med egenskapene og typene som er deklarert i grensesnittet.

Den kompilerte JavaSkriptkoden vil være som følger:

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

Hvis returtypen ikke samsvarer med grensesnittet under kompilering, vil det gi en feil.

Grensesnitt som en funksjonsparameter

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

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

I eksemplet ovenfor har du brukt grensesnittet Dimension som en parameter for funksjonen getDimension(). Når du kaller funksjonen, må parameteren som sendes til den samsvare med reglene som er definert av grensesnittet.

Den kompilerte JavaSkriptkoden vil være som følger:

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

Klasse som implementerer et grensesnitt

For å bruke et grensesnitt med en klasse, må du bruke nøkkelordet redskaper.

Syntaks for en klasse som implementerer et grensesnitt:

class NameofClass implements InterfaceName {
}

Følgende eksempel viser et grensesnitt som arbeider med en klasse.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

I eksemplet ovenfor har du definert grensesnittet Dimension med egenskapene width og height, begge av typen string, og en metode kalt getWidth() som returnerer en streng.

Den kompilerte JavaSkriptkoden vil være som følger:

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

Funksjoner i TypeScript

Funksjoner er sett med instruksjoner som utføres for å utføre en oppgave. JavaSkript, mesteparten av koden er skrevet i form av funksjoner, og de spiller en viktig rolle. I TypeScript du har klasser, grensesnitt, moduler og navnerom tilgjengelig, men funksjoner spiller fortsatt en viktig rolle. Forskjellen mellom en funksjon i JavaManus og TypeScript er parameter- og returtypene som er tilgjengelige med en TypeScript funksjon.

JavaSkriptfunksjon:

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

TypeScript funksjon:

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

I funksjonen ovenfor er navnet på funksjonen add, parametrene er a1 og b1, begge av typen tall, og returtypen er også et tall. Hvis du sender en streng til funksjonen, vil den gi en kompileringsfeil under kompilering til JavaManus.

Kall til funksjonen: legg til

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

Parametrene a1 og b1 er obligatoriske og vil forårsake en feil hvis de ikke oppgis. Parametertypene og returtypen er like viktige og kan ikke endres når de er definert.

Valgfrie parametere til en funksjon

In JavaSkript, alle parametere til funksjoner er valgfrie og anses som udefinerte hvis de ikke sendes. Det samme gjelder ikke i TypeScriptNår du har definert parameterne, må du oppgi dem. Hvis du vil at en parameter skal være valgfri, legger du til et spørsmålstegn etter parameternavnet, som vist nedenfor:

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

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

Vær oppmerksom på at valgfrie parametere må defineres sist. Du kan ikke ha den første parameteren valgfri og den andre obligatorisk, fordi kompilatoren ikke ville vite hvilken verdi som ble oppgitt.

Tilordne standardverdier til parametere

Du kan tilordne standardverdier til parametere som vist nedenfor:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

I likhet med valgfrie parametere må standard initialiserte parametere også oppbevares på slutten av parameterlisten.

Hvileparametere

Du har sett hvordan TypeScript håndterer obligatoriske parametere, valgfrie parametere og standardverdiparametere. Nå skal vi se på hvileparametere. Hvileparametere er en gruppe valgfrie parametere som er definert sammen, ved hjelp av tre prikker (...) etterfulgt av navnet på parameteren, som er en matrise.

Syntaks for hvileparametere:

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

Som vist ovenfor er rest-parameteren en matrise med tre prikker foran. Matrisen vil inneholde alle de gjenværende argumentene som sendes til funksjonen.

Eksempel:

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

Pilfunksjoner

En pilfunksjon er en av de viktige funksjonene utgitt i ES6, og den er tilgjengelig i TypeScript også. Syntaksen har en tykk pil i seg, og det er der navnet kommer fra.

Pilfunksjon Syntaks:

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

Hva er bruken av en pilfunksjon?

La oss se på et eksempel for å forstå bruken av en pilfunksjon.

Eksempel:

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

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

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

Du har opprettet en funksjon med en egenskapspoengsum initialisert til 0, og en metode getScore som internt bruker setTimeout og, etter ett sekund, logger this.score. Den loggede verdien er udefinert selv om this.score er definert og initialisert. Problemet ligger i denne nøkkelord. Funksjonen i setTimeout har sin egen `thin`, og siden poengsum ikke er definert på den, er resultatet udefinert.

Det samme kan håndteres ved hjelp av en pilfunksjon, som vist nedenfor:

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

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

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

En pilfunksjon har ikke sin egen denne, og deler i stedet den fra sitt overordnede omfang, slik at variabler deklarert utenfor er tilgjengelige med denne inne i en pilfunksjon. De er nyttige på grunn av den kortere syntaksen så vel som for tilbakeringinger, hendelseshåndterere og tidsfunksjoner.

TypeScript Opptegnelser

A TypeScript enum er et objekt som inneholder en samling av relaterte verdier lagret sammen. JavaSkriptet støtter ikke enums innebygd. De fleste programmeringsspråk som f.eks. Java, C og C++ støtteopplistinger, og TypeScript gjør dem også tilgjengelige. Enums defineres ved hjelp av nøkkelordet enum.

Hvordan erklære en Enum?

Syntaks:

enum NameofEnum {
   value1,
   value2,
    ..
}

Eksempel: Enum

enum Directions {
    North,
    South,
    East,
    West
}

I eksemplet ovenfor har du definert en opplisting kalt Veibeskrivelser med verdiene Nord, Sør, Øst og Vest. Verdiene nummereres fra 0 for den første oppføringen og øker med 1 for hver påfølgende oppføring.

Deklarer en enum med en numerisk verdi

Som standard, hvis et enum-medlem ikke får en verdi, tar det et tall som starter fra 0. Følgende eksempel viser en enum med eksplisitte numeriske verdier.

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

Du kan også tilordne en startverdi, og følgende medlemmer mottar økte verdier. For eksempel:

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

Nå starter nord på 5, så sør er 6, øst er 7 og vest er 8.

Du kan også tilordne verdier du selv velger i stedet for standardverdiene. For eksempel:

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

Hvordan få tilgang til en Enum?

Følgende eksempel viser hvordan du bruker en enum i koden din:

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 kompilerte JavaSkriptet er som følger:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Siden JavaSkriptet støtter ikke enums. Kompilatoren konverterer enums til en selvaktivert funksjon, som vist ovenfor. Det er den doble tilordningen som skaper den omvendte mappingen.ping fra nummer tilbake til navn.

Deklarer en enum med en strengverdi

Du kan tilordne strengverdier du selv velger, som vist i eksemplet nedenfor.

Eksempel:

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

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

Den kompilerte JavaSkriptet er som følger:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Hva er modulene i TypeScript?

Filer opprettet i TypeScript har global tilgang, som betyr at variabler deklarert i én fil kan nås i en annen fil. Denne globale naturen kan forårsake kodekonflikter og kjøretidsproblemer. Eksport- og importmodulfunksjonalitet kan brukes til å unngå globale variabel- og funksjonskonflikter. Denne funksjonen kom i JavaSkriptet med ES6-utgivelsen og støttes også i TypeScript.

Hvorfor trenger du moduler i TypeScript?

Følgende eksempel viser problemet uten moduler.

Eksempel test1.ts

let age : number = 25;

Du har definert en variabel alder av typenummer i test1.ts.

Eksempel test2.ts

I test2.ts har du tilgang til variabelen alder definert i test1.ts og også endre den, som vist nedenfor:

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

Dette kan skape mange problemer, ettersom variablene er globalt tilgjengelige og kan endres hvor som helst.

Med moduler, koden som er skrevet forblir lokal for filen og kan ikke nås utenfor den. For å dele noe fra en fil, må den eksporteres ved hjelp av export-nøkkelordet. Eksport brukes når du vil at en variabel, klasse, funksjon eller grensesnitt skal brukes i en annen fil. Import brukes når du vil ha tilgang til et eksportert element. Dette gjør at koden holdes intakt i filen, og selv om du definerer de samme variabelnavnene, blandes de ikke sammen.

Bruk av eksport og import

Det finnes mange måter å eksportere og importere på. Vi skal diskutere syntaksen som er mest brukt.

Syntaksen for import og eksport 1:

export  nameofthevariable or class name or interface name etc

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

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

Her er et fungerende eksempel ved bruk av eksport og import.

test1.ts

export let age: number = 25;

Nøkkelordet export brukes til å dele aldersvariabelen med en annen fil.

test2.ts

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

import-nøkkelordet brukes for å få tilgang til alder variabel, og du må spesifisere filplasseringen som vist ovenfor.

Syntaks for import og eksport 2:

Det finnes en annen måte å eksportere og importere på, og syntaksen er som vist nedenfor:

export = classname;

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

Når du bruker eksport = For å eksportere modulen din, må importen bruke require("filbanen til modulnavn").

Her er et fungerende eksempel som viser det tilfellet.

Kunde.ts

class Customer {
    name: string;
    age: number;

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

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

export = Customer;

testCustomer.ts

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

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

Modullaster

Moduler kan ikke fungere alene, så du trenger en modullaster for å finne importavhengighetene, som vist i TypeScript eksemplene ovenfor. Modullasterne som er tilgjengelige er CommonJS for Nodejs og Require.js for kjøring i nettleseren.

For å kompilere kode ved hjelp av CommonJS-modulformatet, bruk følgende kommando:

tsc --module commonjs testCustomer.ts

For å kompilere kode ved hjelp av Requirejs-modulformatet, bruk følgende kommando:

tsc --module amd testCustomer.ts

De avhengige filene vil bli konvertert til js-filer med kommandoen ovenfor.

Eksempel på testCustomer.ts til testCustomer.js ved bruk av Requirejs

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

Eksempel på Customer.ts til Customer.js ved bruk av Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

For å teste det med require.js, må du opprette en fil kalt main.js som refererer til avhengighetene som vist.

Her er mappestrukturen:

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

main.js

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

test.html

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

Navneområder i TypeScript

Et navnerom inneholder en samling av klasser, grensesnitt, variabler og funksjoner sammen i én fil.

Navneområdesyntaks

namespace name{

export class {
}

export interface {
}

export const constname;

}

Den relaterte koden er tilgjengelig under ett navnerom.

Navneområde arbeidseksempel: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

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

Navnet på navneområdet er Studentoppsett, og du har lagt til et grensesnitt StudDetails, en funksjon addSpace og en klasse kalt Student.

Tilgang til et navnerom

Følgende er koden der du bruker navnerommet Studentoppsett.

testStudentSetup.ts

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

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

Klassen, grensesnittet eller funksjonen som er tilgjengelig i et navnerom må refereres til ved å bruke navneromsnavnet, for eksempel StudentSetup.addSpace for å få tilgang til funksjonen og Studentoppsett.Student for å få tilgang til klassen.

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

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

Sjekk utdataene i ledeteksten ved hjelp av kommandoen nedenfor:

node namespace.js

Utgang:

The name is :H a r r y

Omgivelsesdeklarasjoner i TypeScript

TypeScript lar deg bruke tredjeparts JavaSkriptfiler som bruker ambient-deklarasjoner. Fordelen med denne funksjonen er at du ikke trenger å skrive om biblioteket, og likevel kan du bruke alle funksjonene med typekontroll. TypeScript.

Omgivelsessyntaks

Slik deklarerer du en omgivelsesmodul:

declare module moduleName {
   //code here
}

Ambient-filen må lagres som:

filename.d.ts

For å bruke filen filnavn.d.ts i .ts-filen din må du referere den som:

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

Omgivelsestypeerklæringen i TypeScript refererer til tredjepartsbiblioteket og deklarerer funksjonene som kreves på nytt med sine egne typer. Tenk for eksempel på den lille JavaSkriptbiblioteket vist nedenfor.

Tredjemann 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 et objekt som heter StringChecks som har funksjonene isString, convertToUpperCase, convertToLowerCase og convertToStringBold.

Opprette en Ambience-modul i TypeScript

Nå skal vi lage en ambient-modul som refererer til JavaSkriptfunksjonene ovenfor og legger til typekontroller etter behov.

Filnavn: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Du definerer en modul med navnet TestString og eksporterer grensesnittet StringsFunc. Hver signatur angir hva funksjonen aksepterer og returnerer:

• isString(str: streng): boolsk – tar en streng og returnerer en boolsk verdi. Å sende et tall eller en annen type produserer en kompileringsfeil.
• konverterTilStoreBok(str: streng): streng – tar en streng og returnerer en streng.
• konverterTilSmå ... – tar en streng og returnerer en streng.
• convertToStringBold(str: streng): streng – tar en streng og returnerer en streng.

Siden JavaSkriptfilen eksponerer objektnavnet StringChecks, vi refererer til slutt til det samme navnet i .d.ts-filen:

declare var StringChecks: TestString.StringsFunc;

Bruk av en Ambient-modul i TypeScript

Her er test.ts-filen som bruker ambient-filen tstring.d.ts.

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

Kompiler med tsc test.ts for å produsere 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);

Nå kan du bruke test.js i en HTML-fil sammen med bibliotekfilen testString.js.

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

Utgang:

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

For å fortsette, sammenlign de to språkene direkte i TypeScript vs JavaScript, besøk igjen JavaSkriptmatrisemetoder for de utypede ekvivalentene som brukes her, og studere løkker inn JavaScript og internt og eksternt JavaScript for nettleserens grunnleggende prinsipper som den kompilerte utdataen er avhengig av.

Spørsmål og svar