TypeScript Opplæring: Hva er, grensesnitt, Enum, Array med eksempel
Hva er TypeScript?
TypeScript er et supersett av JavaManus. TypeScript er rent objektorientert programmeringsspråk som støtter klasser, grensesnitt osv. Det er et åpen kildekode-språk utviklet av Microsoft som statisk kompilerer koden til JavaManus. Det kan enkelt kjøres i en nettleser eller Nodejs.
Alle de nyeste funksjonene utgitt for ECMAScript støttes i TypeScript og i tillegg til det TypeScript har sine egne objektorienterte funksjoner som grensesnitt, omgivelsesdeklarasjon, klassearv, etc. som hjelper til med å utvikle en stor applikasjon som ellers ville vært vanskelig å gjøre i JavaScript.
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 den offisielle siden til nodejs: https://nodejs.org/en/download/ og last ned og installer nodejs i henhold til ditt operativsystem. Den detaljerte instruksjonen om hvordan du laster ned nodejs er tilgjengelig her: https://www.guru99.com/download-install-node-js.html
Trinn 2) Sjekk Nodejs og npm-versjonen
For å sjekke om nodejs og npm er installert, sjekk bare versjonen i ledeteksten.
D:\typeproject>node --version V10.15.1 D:\typeproject>npm --version 6.4.1
Så du har nodejs v10 og npm 6 installert.
Trinn 3) TypeScript Installasjon
Opprett prosjektkatalogen typeproject/ og kjør npm init, som vist i kommandoen nedenfor:
npm init
Trinn 4) Start installasjonen
Nå vil vi lage pakken .json som vil lagre avhengighetene for prosjektet vårt.
Når installeringen er ferdig 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 kommando fra en hvilken som helst katalog ettersom den er installert globalt. I tilfelle du ikke vil installere TypeScript globalt bruk under kommando:
npm --save install typescript
Opprett src/-mappen i prosjektkatalogen og i src/-mappen 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 følgende kommando:
tsc test.ts
If TypeScript er installert lokalt for prosjektet du må bruke banen til TypeScript fra node_modules som vist:
node_modules/typescript/bin/tsc test.ts
Kommandoen ovenfor vil opprette en test.js-fil og ha kode kompilert til javascript.
Eksempel: test.js
function add(x, y) { return x + y; } var sum = add(5, 10); console.log(sum);
Henrette Javascript bruker Nodejs
I dette TypeScript veiledning, vil vi kjøre test.js i nodejs som følger:
D:\typeproject\src>node test.js 15
Verdien som trøstes vises ved kjøring av test.js
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 Ecmascript-funksjonene som er utgitt, og utviklere kan bruke det samme mens de koder. Men ikke alle de nye funksjonene støtter på eldre nettlesere, på grunn av dette må du kompilere javascript til en eldre versjon av Ecmascript. TypeScript gir kompilatoralternativer som kan gjøre 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. Hvis du vil endre det, kan du bruke kommandoen ovenfor.
Foreløpig vil vi bruke ES6 i dette TypeScript opplæring 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, siden pilfunksjonen du har brukt er en ES6-funksjon og den samme når den kompileres til ES6 endres ikke.
Som standard er målet ES3, så uten mål får du test.js som:
var addnumbers = function (a, b) { return a + b; }; addnumbers(10, 20);
Så her borte er fettpilen 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å JavaScript. Så la oss lære å deklarere og tilordne verdier til variabler i TypeScript.
Variabler kan ikke brukes i kode uten å definere. For å deklarere en variabel kan du bruke
var søkeord,
la søkeord
const søkeord
Arbeid med variabler i TypeScript ligner på javascript, og brukere som er kjent med javascript vil finne det veldig enkelt. Bare variabler som la og const er ikke mye brukt i forhold til var.
Deklarere variabler ved å bruke var
Syntaks:
var firstname = "Roy";
La oss ta en titt på noen få TypeScript eksempler for å forstå hvordan var nøkkelord fungerer og også omfanget av variabler 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 variable and will be accessible inside function test, it will not be available outside the function. return k++; } test(); // output as 1 test(); // output as 2 alert(c); // will throw error , Uncaught ReferenceError: c is not defined
Eksempel 2:
var t = 0; // variable t is declared in global scope. function test() { var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function. return t; } test(); // will return 10. console.log(t); // will console 0.
Eksempel 3:
var i = 0; function test() { if (i>0) { var t = 1; } return t; } test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function. i++; // here value of i is incremented. test(); // since i >0 the if block is executed and value returned is 1.
Deklarere variabler ved hjelp av let
De TypeScript syntaks for let er som gitt nedenfor:
Syntaks:
let name="Roy";
Arbeidet med la variabelen er nesten den samme som var, men med en liten forskjell og vil forstå det samme ved å bruke en TypeScript eksempel.
Eksempel:
let i = 1; function test() { if (i>0) { let t = 1; } return t; } test(); // throws an error : Uncaught ReferenceError: t is not defined.
Ovenfor TypeScript eksempel gir en feil, men det samme ville fungert bra hvis det var med var nøkkelord. Variabler ved hjelp av la er tilgjengelige innenfor det deklarerte blokkomfanget, for eksempel er variabelen t kun tilgjengelig i if-blokken og ikke for hele funksjonen.
Også hvis du tilfeldigvis erklærer en variabel inne i en funksjon, eller for-loop, while-loop, TypeScript bytte blokk, vil den bare være tilgjengelig for deg innenfor den blokken og ingen referanse til den utenfor blokken, og den vil gi en feil hvis variabelen brukes utenfor blokken. Dette er hovedforskjellen mellom var og let nøkkelorddeklarerte variabler.
Deklarere variabler ved hjelp av const
Const betyr konstante variabler. De ligner på la variabler, med den eneste forskjellen er at når en verdi først er tildelt den, kan den ikke endres.
Syntaks:
const name;
Eksempel:
const age = "25"; age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.
Så brukere kan bare bruke const-variabler i tilfeller når de vet at de ikke trenger å endre verdiene som er tilordnet den.
Skriver inn TypeScript
TypeScript er et sterkt skrevet språk, mens javascript ikke er det. En variabel som har en verdi definert som en streng kan endres til et tall uten problemer i Javascript. Det samme tolereres ikke i TypeScript. i TypeScript, er typen til en variabel kun definert i starten, og gjennom utførelsen må den opprettholde samme type. Eventuelle endringer i den vil føre til en kompileringsfeil under kompilering til javascript.
Følgende er typene:
- Nr
- String
- boolean
- Noen
- Tomrom
Nr
Tar bare heltall, flyter, brøker osv.
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 desimaler gitt til metoden.
toString () – denne metoden vil konvertere tall 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 strengmetoder
let _num :number = 10.345; _num.toFixed(2); // "10.35" _num.valueOf(); // 10.345 _num.toString(); // "10.345" _num.toPrecision(2); //"10"
String
String: bare strengverdier
Syntaks:
let str :string = "hello world";
Her er noen viktige metoder som kan brukes på strengtyper:
- splittet() – denne metoden vil dele strengen i en matrise.
- charAt() – denne metoden vil gi det første tegnet for den gitte indeksen.
- oversikt over() – denne metoden vil gi posisjonen til den første forekomsten for verdien gitt til den.
- Erstatt () – denne metoden tar 2 strenger, først verdien for å søke i strengen og hvis den er tilstede vil den erstatte den andre og vil gi en ny streng tilbake.
- Trim () – denne metoden vil fjerne mellomrom fra begge sider av strengen.
- substr() – denne metoden vil gi en del av strengen som vil avhenge av posisjonen gitt som start og slutt.
- delstreng() – denne metoden vil gi en del av strengen som vil avhenge av posisjonen gitt som start og slutt. Tegnet i sluttposisjonen vil bli ekskludert.
- 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 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
Vil godta logiske verdier som sann, usann, 0 og 1.
Syntaks:
let bflag :boolean = 1; let status :boolean = true;
Noen
Syntaks:
let a :any = 123 a = "hello world"; // changing type will not give any error.
Variabler deklarert ved hjelp av noen type kan ta variabelen som en streng, tall, matrise, boolsk eller void. TypeScript vil ikke gi noen kompileringstidsfeil; dette ligner på variablene som er deklarert i JavaManus. Bruk en hvilken som helst typevariabel bare når du ikke er sikker på hvilken type verdi som vil knyttes til den variabelen.
Tomrom
Void type brukes mest som en returtype på en funksjon som ikke har noe å returnere.
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 du deklarerer og tildeler verdier for Array-operasjoner i TypeScript.
Siden TypeScript er et sterkt skrevet språk, må du fortelle hva som vil være datatypen til verdiene i en matrise. Ellers vil den vurdere det som av typen hvilken som helst.
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 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.
Ulike måter å få tilgang til elementer fra en matrise
For å hente elementene fra en matrise, starter verdiene fra indeks 0 til lengden på matrisen.
Eksempel:
let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers years[0]; // output will be 2016 years[1]; // output will be 2017 years[2]; // output will be 2018 years[3]; // output will be 2019
Du kan også hente elementene fra en matrise ved å bruke TypeScript forum sløyfe som vist nedenfor:
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]); } Output: 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]) } Output: 2016 2017 2018 2019
Bruker for-of loop
let years: Array<number> = [ 2016, 2017, 2018, 2019]; for (let i of years) { console.log(i) } Output: 2016 2017 2018 2019
Bruker hver løkke
let years: Array<number> = [ 2016, 2017, 2018, 2019]; years.forEach(function(yrs, i) { console.log(yrs); }); Output: 2016 2017 2018 2019
TypeScript Array metoder
TypeScript Array-objekt har mange egenskaper og metoder som hjelper utviklere til å håndtere arrays enkelt og effektivt. Du kan få verdien av en egenskap ved å spesifisere arrayname.property og utdata fra en metode ved å spesifisere array name.method().
lengde eiendom
=> Hvis du vil vite antall elementer i en matrise, kan du bruke egenskapen length.
Reverse metode
=> Du kan snu rekkefølgen på elementer i en matrise ved å bruke en omvendt metode.
Sorteringsmetode
=> Du kan sortere elementene i en matrise ved å bruke sorteringsmetoden.
Pop metode
=> Du kan fjerne det siste elementet i en matrise ved å bruke en pop-metode.
Shift metode
=> Du kan fjerne det første elementet i en matrise ved å bruke shift-metoden.
Push-metoden
=> Du kan legge til verdi som siste element i matrisen.
concat metode
=> Du kan slå sammen to matriser til ett matriseelement.
Eksempel på lengdeeiendom
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.length); // 12
Eksempel på omvendt metode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.reverse()); // ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]
Eksempel på sorteringsmetode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]
Eksempel på popmetode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.pop()); //Dec
Eksempel på skiftmetode
let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values. console.log(months.shift()); // Jan
Eksempel på push-metode
let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers console.log(years.push(2020)); years.forEach(function(yrs, i) { console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020 });
Eksempel på 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 JavaSkript, så alt mulig å gjøre i JavaSkript er også mulig i TypeScript. Klasse er en ny funksjon lagt til fra ES6 og fremover, så tidligere JavaSkript klassetypefunksjonaliteten ble prøvd ved å bruke en funksjon med prototypefunksjonalitet for å gjenbruke kode. Ved å bruke klasse kan du ha koden vår nesten nær språk som java, c#, python, etc., hvor koden kan gjenbrukes. Med funksjonen av klasse i TypeScript/JavaSkript, det gjør språket veldig kraftig.
Definere en klasse i TypeScript
Her er en grunnleggende klassesyntaks i TypeScript:
class nameofclass { //define your properties here constructor() { // initialize your properties here } //define methods for class }
Eksempel: Et fungerende eksempel på Class
class Students { age : number; name : string; roll_no : number; constructor(age: number, name:string, roll_no: number) { this.age = age; this.name = name; this.roll_no = roll_no; } getRollNo(): number { return this.roll_no; } getName() : string { return this.name; } getAge() : number { return this.age; } }
I eksemplet ovenfor har du en klasse som heter Studenter. Den har egenskaper alder, navn og roll_no.
Konstruktør i en TypeScript Klasse
Klassestudenteksemplet vi har definert ovenfor, det har en konstruktør som vist nedenfor:
constructor(age: number, name:string, roll_no: number) { this.age = age; this.name = name; this.roll_no = roll_no; }
Konstruktørmetoden har parametere alder, navn og roll_no. Konstruktøren vil ta seg av å initialisere egenskapene når klassen kalles. Eiendommene er tilgjengelig ved hjelp av denne nøkkelord. Eksempel this.age for å få tilgang til aldersegenskap, this.roll_no for å få tilgang til roll_no osv. Du kan også ha en standard konstruktør, som vist nedenfor:
constructor () {}
Metoder i en TypeScript Klasse
Klassen Students eksempel er det metoder definert for eksempel getRollNo(), getName(), getAge() som brukes til å gi detaljer om egenskapene roll_no, navn og alder.
getRollNo(): number { return this.roll_no; } getName() : string { return this.name; } getAge() : number { return this.age; }
Oppretter forekomst av klasse i TypeScript
Eksempel:
In TypeScript for å lage en forekomst av en klasse må du bruke den nye operatoren. Når vi oppretter en forekomst av en klasse ved å bruke ny operatør, får vi objektet 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 TypeScript Klasse til JavaScript
Du kan bruke tsc-kommandoen som vist nedenfor for å kompilere til Javascript.
Command: tsc Students.ts
Resultatet av Javascript koden på kompilering er som vist nedenfor:
var Students = /** @class */ (function () { function Students(age, name, roll_no) { this.age = age; this.name = name; this.roll_no = roll_no; } Students.prototype.getRollNo = function () { return this.roll_no; }; Students.prototype.getName = function () { return this.name; }; Students.prototype.getAge = function () { return this.age; }; return Students; }());
In Javascript, blir klassen konvertert til en selvpåkalt funksjon.
Klassearv
Klasser kan arves ved å bruke utvide 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. Studentklassen utvider Person, og objektet som er opprettet på Student har tilgang til sine egne metoder og egenskaper samt klassen den har utvidet.
La oss nå legge til noen flere 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); } 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
Endringene du har lagt til i forhold til forrige eksempel er at det er en konstruktør definert i klassen Student. Konstruktøren må ta de samme parameterne som basisklassen og legge til eventuelle tilleggsparametere.
In TypeScript du må ringe super vil alle paramene som basene parammer i den. Dette må være det første som skal gjøres inne i konstruktøren. Superen vil utføre konstruktøren av den utvidede klassen.
Få tilgang til Modifikatorer i TypeScript
TypeScript støtter offentlige, private og beskyttede tilgangsmodifikatorer til dine metoder og egenskaper. Som standard, hvis tilgangsmodifikatorer ikke er gitt, anses metoden eller egenskapen som offentlig, og de vil være lett tilgjengelige fra objektet til klassen.
I tilfelle av private tilgangsmodifikatorer, er de ikke tilgjengelige for tilgang fra objektet til klassen og kun ment å brukes i klassen. De er ikke tilgjengelige for den arvede klassen.
I tilfelle av modifikatorer for beskyttet tilgang, er de ment å brukes i klassen og den arvede klassen og vil ikke være tilgjengelige fra objektet til klassen.
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
- Private: egenskaper eller metoder kan ikke nås av objektet til klassen og også den avledede klassen, de er ment å brukes internt i klassen.
- Beskyttet: egenskaper og metoder kan heller ikke nås av objektet som er opprettet. De er tilgjengelige fra innsiden av klassen og tilgjengelige for klassen som utvider den.
- Offentlig: egenskaper og metoder er deklarert uten nøkkelord. De er lett tilgjengelige ved å bruke klassens objekt utenfra.
Grensesnitt i TypeScript
En av kjerneegenskapene til TypeScript er grensesnitt. Grensesnittet er et sett med en regel definert som må implementeres av enheten som bruker den. Entiteten kan være en klasse, funksjon eller variabel. Et grensesnitt kan bestå av egenskaper og metoder. Du kan definere egenskaper som valgfrie ved å bruke "?" syntaks for den egenskapen eller metoden. Grensesnittet legger til en sterk typesjekk for enhver funksjon, variabel eller klasse som implementerer grensesnittet.
Syntaks for et grensesnitt i TypeScript
interface Dimension { width: string; height: string; }
Du har definert et grensesnitt kalt Dimension som har egenskaper bredde og høyde, og begge har type som en streng.
Nå kan dette grensesnittet implementeres av en variabel, en funksjon eller en klasse. Her er eksempelet på variabel som implementerer grensesnittet Dimension.
Eksempel:
interface Dimension { width: string; height: string; } let _imagedim: Dimension = { width: "100px", height: "200px" };
Signaturen til grensesnittet Dimensjon har bredde og høyde, og begge er obligatoriske. I tilfelle under implementering av grensesnittet, noen av egenskapene savnes, eller typen endres, vil det gi en kompileringstidsfeil mens koden kompileres til javascript.
Koden ovenfor, når den er kompilert til javascript, ser ut som følger:
var _imagedim = { width: "100px", height: "200px" };
La oss nå se hvordan du bruker et grensesnitt med en funksjon.
Bruke grensesnitt på en funksjon som returtype
Eksempel:
interface Dimension { width: string; height: string; } function getDimension() : Dimension { let width = "300px"; let height = "250px"; return { width: width, height: height } }
I eksemplet ovenfor er grensesnittet Dimension implementert på funksjonen getDimension() som returtype. Returtypen til getDimension() må samsvare med egenskapene og typen nevnt for Interface Dimension.
Den kompilerte koden til Javascript vil være som følger:
function getDimension() { var width = "300px"; var height = "250px"; return { width: width, height: height }; }
Under kompilering, hvis returtypen ikke samsvarer med grensesnittet, vil den gi en feil.
Grensesnitt som 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"}); // will get "300px-250px"
Så ovenfor eksempel har du brukt Interface Dimension som en parameter til funksjonen getDimension(). Når du kaller funksjonen, må du sørge for at parameteren som sendes til den samsvarer med grensesnittregelen som er definert.
Den kompilerte koden til Javascript vil være som følger:
function getDimension(dim) { var finaldim = dim.width + "-" + dim.height; return finaldim; } getDimension({ width: "300px", height: "250px" });
Klasseimplementeringsgrensesnitt
For å bruke grensesnitt med en klasse, må du bruke nøkkelordet redskaper.
Syntaks for klasse som implementerer et grensesnitt:
class NameofClass implements InterfaceName { }
Følgende eksempel viser bruk av grensesnitt med 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 grensesnitt Dimensjon med egenskaper bredde og høyde både av typen streng og en metode kalt getWidth() som har returverdi som en streng.
Den kompilerte koden til Javascript 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 et sett med instruksjoner som utføres for å utføre en oppgave. I Javascript, det meste av koden er skrevet i form av funksjoner og spiller en stor rolle. I TypeScript, du har klasse, grensesnitt, moduler, navneområder tilgjengelig, men likevel spiller funksjoner en viktig rolle. Forskjellen mellom funksjonen i javascript og TypeScript funksjon er returtypen tilgjengelig med TypeScript funksjon.
JavaSkriptfunksjon:
function add (a1, b1) { return a1+b1; }
TypeScript funksjon:
function add(a1 : number, b1: number) : number { return a1 + b1; }
I funksjonene ovenfor er navnet på funksjonen lagt til, parameterne er a1og b1 begge har en type som tall, og returtypen er også et tall. Hvis du tilfeldigvis sender en streng til funksjonen, vil den gi en kompileringstidsfeil mens den kompileres til JavaManus.
Ringe funksjonen: legg til
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'.
Paramene a1 og b1 er obligatoriske parametere og vil gi en feil hvis den ikke mottas på den måten. Param-typen og returtypen er også veldig viktig og kan ikke endres når den først er definert.
Valgfrie parametere til en funksjon
I javascript er alle parametere til funksjonene valgfrie og anses som udefinerte hvis de ikke er bestått. Men det samme er ikke tilfelle med TypeScript, når du har definert paramene, må du sende dem også, men i tilfelle du vil beholde en param valgfri, kan du gjøre det ved å bruke? mot paramnavnet som vist nedenfor:
function getName(firstname: string, lastname?: string): string { return firstname + lastname; } let a = getName("John"); // will return Johnundefined. let b = getName("John", "Harry"); // will return JohnHarry let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.
Vær oppmerksom på at de valgfrie parameterne kun skal defineres i en funksjon til sist, du kan ikke ha den første parameteren som valgfri og den andre parameteren som obligatorisk. Så det er nødvendig å beholde de valgfrie parameterne på slutten.
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 paramer, må standard initialiserte parametere også her beholdes på slutten i en funksjon.
Hvileparametere
Du har sett hvordan TypeScript håndterer obligatoriske paramer, valgfrie paramer og standardverdien initialiserte paramer. Nå skal vi ta en titt på hvileparametere. Hvileparametere er en gruppe valgfrie paramer definert sammen, og de er definert ved hjelp av tre prikker (...) etterfulgt av navnet på param, som er en matrise.
Syntaks for hvileparametere:
function testFunc(a: string, ...arr: string[]) :string { return a + arr.join(""); }
Som vist ovenfor, er hvileparamene definert ved å bruke (…param-navn); resten param er en matrise prefikset av tre prikker. Matrisen vil få alle paramene sendt til seg. Du kan kalle opp funksjonen, som vist i eksemplet nedenfor:
Eksempel:
let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday
Pilfunksjoner
En pilfunksjon er en av de viktige funksjonene utgitt i ES6, og den er tilgjengelig i TypeScript også. Pilfunksjonssyntaksen har en fettpil i seg på grunn av hvilken funksjonen kalles en pilfunksjon.
Pilfunksjon Syntaks:
var nameoffunction = (params) => { // code here }
Hva er bruken av pilfunksjonen?
La oss ta en titt på eksemplet for å forstå bruken av pilfunksjonen:
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 anonym funksjon som har en egenskap denne. Score initialize til 0 og en metode getScore som internt har en setTimeout, og på 1 sekund trøster den denne.score. Den konsollede verdien gir undefined selv om du har this.score definert og initialisert. Problemet her er med this nøkkelord. Funksjonen inne i setTimeout har sin egen denne, og den prøver å referere poengsummen internt, og siden den ikke er definert gir den udefinert.
Det samme kan tas vare på ved å bruke pilfunksjonen som vist nedenfor:
var ScoreCard = function () { this.score = 0; this.getScore = function () { setTimeout(()=>{ console.log(this.score); // you get 0 }, 1000); } } var a = new ScoreCard(); a.getScore();
Du har endret funksjonen i setTimeout til en pilfunksjon som vist nedenfor:
setTimeout(()=>{ console.log(this.score); // you get 0 }, 1000);
En pilfunksjon har ikke sin egen denne definert og den deler overordnet denne, så variabler deklarert utenfor er lett tilgjengelige ved å bruke denne inne i en pilfunksjon. De er nyttige på grunn av den kortere syntaksen så vel som for tilbakeringinger, hendelsesbehandlere, innvendige tidsfunksjoner, etc.
TypeScript Opptegnelser
TypeScript Enum er et objekt som har en samling av relaterte verdier lagret sammen. Javascript støtter ikke enums. Det meste av programmeringsspråk i likhet med Java, C, C++ støtter TypeScript Enum og det også tilgjengelig med TypeScript også. Enums er definert 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 enum kalt Veibeskrivelser. Verdien oppgitt er nord, sør, øst, vest. Verdiene er nummerert fra 0 for den første verdien i enumen og øker deretter med 1 for neste verdi.
Deklarer en enum med en numerisk verdi
Som standard, hvis en enum ikke er gitt noen verdi, anser den det som et tall som starter fra 0. Følgende eksempel viser en enum med en numerisk verdi.
enum Directions { North = 0, South = 1, East =2, West =3 }
Du kan også tilordne en startverdi til enum, og de neste enum-verdiene vil få de inkrementerte verdiene. For eksempel:
enum Directions { North = 5, South, // will be 6 East, // 7 West // 8 }
Nå starter enum-verdien nord med 5, så sør vil få verdien som 6, øst = 7 og vest = 8.
Du kan også tilordne verdier etter eget valg i stedet for å ta 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 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 koden til javascript er som følger:
var Directions; (function (Directions) { Directions[Directions["North"] = 0] = "North"; Directions[Directions["South"] = 1] = "South"; Directions[Directions["East"] = 2] = "East"; Directions[Directions["West"] = 3] = "West"; })(Directions || (Directions = {})); console.log(Directions.North); console.log(Directions["North"]); console.log(Directions[0]);
Siden Javascript støtter ikke enums, den konverterer enumet til en selvpåkalt funksjon som vist ovenfor.
Deklarer An Enum med en strengverdi
Du kan tilordne strengverdier etter eget valg, som vist i eksemplet nedenfor:
Eksempel:
enum Directions { North = "N", South = "S", East = "E", West = "W" } console.log(Directions.North); // output is N console.log(Directions["North"]); // output is N console.log(Directions[0]); // output is North
Den kompilerte koden til javascript er som følger:
var Directions; (function (Directions) { Directions["North"] = "N"; Directions["South"] = "S"; Directions["East"] = "E"; Directions["West"] = "W"; })(Directions || (Directions = {})); console.log(Directions.North); console.log(Directions["North"]); console.log(Directions[0]);
Hva er modulene i TypeScript?
Filene opprettet i TypeScript har global tilgang, noe som betyr at variabler som er deklarert i én fil er lett tilgjengelige i en annen fil. Denne globale naturen kan forårsake kodekonflikter og kan forårsake problemer med kjøring under kjøring. Du har eksport- og importmodulfunksjonalitet som kan brukes til å unngå globale variable funksjonskonflikter. Denne funksjonen er tilgjengelig i JavaSkript med ES6-utgivelse 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-filen kan du enkelt få tilgang til variabelen alder definert i test1.ts og endre den som vist nedenfor:
age = 30; // changed from 25 to 30. let _new_age = age;
Så tilfellet ovenfor kan skape mange problemer ettersom variablene er globalt tilgjengelige og kan endres.
Med Moduler, forblir koden som er skrevet, lokaliteten til filen og kan ikke nås utenfor den. For å få tilgang til noe fra filen, må den eksporteres med eksportnøkkelordet. It brukes når du vil at variabelen, klassen, funksjonen eller grensesnittet skal brukes i en annen fil. Import brukes når du også vil ha tilgang til den eksporterte variabelen, klassen eller grensesnittet eller funksjonen. Når du gjør det, forblir koden skrevet intakt i filen, og selv om du definerer samme variabelnavn, blir de ikke blandet sammen og oppfører seg lokalt i forhold til filen der de er deklarert.
Bruk av eksport og import
Det er mange måter å eksportere og importere på. Så vil diskutere syntaks her som er mest brukt.
Syntaksen for import og eksport 1:
export nameofthevariable or class name or interface name etc //To import above variable or class name or interface you have to use import as shown below: Import {nameof thevariable or class name or interfacename} from "file path here without.ts"
Her er et fungerende eksempel ved bruk av eksport og import.
Eksempel:
test1.ts
export let age: number = 25;
Eksporter nøkkelord brukes til å dele aldersvariabel i en annen fil.
test2.ts
import { age } from "./test1" let new_age :number = age;
Import nøkkelord brukes for å få tilgang til alder variabel, og du må spesifisere filplasseringen som vist ovenfor.
Syntaks for import og eksport 2:
Det er en annen måte å eksportere på, og import og syntaks for det samme er som vist nedenfor:
export = classname; import classname = require(“file path of modulename”)
Når du bruker eksport = for å eksportere modulen din, må importen bruke require(“filbane til modulnavn”) for å importere den.
Her er et fungerende eksempel som viser tilfellet ovenfor:
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 modullaster for å finne importavhengighetene som du har sett i TypeScript eksempler vist ovenfor. Modullasteren som er tilgjengelig er CommonJS for nodejs og Require.js for å kjøre i nettleseren.
For å kompilere kode ved hjelp av CommonJS-modulen, bruk følgende kommando:
tsc --module commonjs testCustomer.ts
For å kompilere kode ved å bruke Requirejs-modulen, bruk følgende kommando:
tsc --module amd testCustomer.ts
De avhengige filene vil bli konvertert til js-fil med kommandoen ovenfor.
Eksempel testCustomer.ts til testCustomer.js ved hjelp 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 Customer.ts til Customer.js ved hjelp 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 den ved å bruke require.js, må du lage en fil kalt main.js, som har referanse 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
Namespace har i utgangspunktet en samling av klasser, grensesnitt, variabler, funksjoner sammen i en fil.
Navneområdesyntaks
namespace name{ export class { } export interface { } export const constname; }
Koden relatert er tilgjengelig under ett navneområde.
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, du har lagt til et grensesnitt StudDetails , funksjon addSpace og en klasse kalt Student.
Får tilgang til navneområdet
Følgende er koden der du bruker navneområdet Studentoppsett.
testStudentSetup.ts
let a = new StudentSetup.Student({ name: "Harry", age: 20 }); console.log("The name is :" + StudentSetup.addSpace(a.getName()));
Klassen, grensesnittet, en funksjon som er tilgjengelig i et navneområde, må henvises til ved å bruke navnet på navneromeksemplet StudentSetup.addSpace for å få tilgang til funksjonen, Studentoppsett.Student for å få tilgang til klassen.
Du kan kompilere begge filene til en js som vist nedenfor:
tsc --outFile namespace.js testnamespace.ts testStudentSetup.ts
Sjekk utdataene i ledeteksten ved å bruke kommandoen nedenfor:
node namespace.js
Det vil vise utdata som:
The name is: H a r r y
Omgivelsesdeklarasjoner i TypeScript
TypeScript lar deg bruke tredjeparts javascript-filer ved å bruke omgivelsesdeklarasjon. Fordelen med denne funksjonen er at du ikke trenger å skrive om og likevel bruke alle funksjonene i biblioteket i TypeScript.
Omgivelsessyntaks
For å deklarere omgivelsesmodul:
declare module moduleName { //code here }
Omgivelsesfilen må lagres som:
filename.d.ts
For å bruke filen filnavn.d.ts i .ts må du referere det som:
/// <reference path="filename.d.ts"/>
Omgivelsestypeerklæringen i TypeScript vil ha en referanse til tredjepartsbiblioteket og vil re-deklarere funksjonene som kreves med sin egen type. Tenk for eksempel at du har et lite javascript-bibliotek, som vist nedenfor:
Tredjemann JavaSkriptfil: testString.js
Eksempel: testString.js
var StringChecks = { isString: function (str) { return typeof str === "string"; }, convertToUpperCase: function (str) { return str.toUpperCase(); }, convertToLowerCase: function (str) { return str.toLowerCase(); }, convertToStringBold: function (str) { return str.bold(); } };
Du har et objekt kalt StringChecks som har funksjoner som isString, convertToUpperCase, convertToLowerCase og converToStringBold.
Oppretting av Ambient Module i TypeScript
Nå vil opprette en ambient-modul som vil ha referanse til ovennevnte js-funksjoner og også legge til typesjekk i henhold til våre krav.
Filnavn: tstring.d.ts
declare module TestString { export interface StringsFunc { isString(str: string): boolean; convertToUpperCase(str: string): string; convertToLowerCase(str: string): string; convertToStringBold(str: string): string; } } declare var StringChecks: TestString.StringsFunc;
Du må definere et modulnavn som TestString og ha eksportert grensesnitt StringsFunc.
isString(str: streng): boolsk
=> Dette tar param som en streng og returtypen vil være boolsk. Når du bruker i .ts-filen din i tilfelle du tilfeldigvis sender param som et tall eller noe annet enn streng, vil det gi deg en kompileringstypefeil.
convertToUpperCase(str:string): streng
=> Dette vil ta argument som streng og returnere en streng. Det samme gjelder convertToLowerCase(str: string)
: streng; og convertToStringBold(str: streng): streng
;
Siden du i javascript-filen har objektnavnet som StringChecks, må vi til slutt referere til det samme i .d.ts-filen som gjøres som:
declare var StringChecks: TestString.StringsFunc;
Bruker Ambient-modulen i TypeScript
Nå her er test.ts-filen der vil bruke ambient-filen tstring.d.ts
Eksempel: test.ts
/// <reference path="tstring.d.ts"/> let str1 = StringChecks.isString("Hello World"); console.log(str1); let str2 = StringChecks.convertToUpperCase("hello world"); console.log(str2); let str3 = StringChecks.convertToLowerCase("HELLO"); console.log(str3); let str4 = StringChecks.convertToStringBold("Hello World"); console.log(str4);
Kompilere TypeScript tsc test.ts til test.js
/// <reference path="tstring.d.ts"/> var str1 = StringChecks.isString("Hello World"); console.log(str1); var str2 = StringChecks.convertToUpperCase("hello world"); console.log(str2); var str3 = StringChecks.convertToLowerCase("HELLO"); console.log(str3); var str4 = StringChecks.convertToStringBold("Hello World"); console.log(str4);
Nå kan du bruke test.js i html-filen og også biblioteksfilen testString.js
<html> <head> <title>Test TypeScript Ambient</title> <script src="testStrings.js"></script> <script src="test.js"></script> </head> <body> </body> </html>
Dette er utgangen som vises i konsollen:
true HELLO WORLD hello <b>Hello World</b>
TypeScript Historie
La se viktige landemerker fra historien til TypeScript:
- Etter to år med intern utvikling kl Microsoft. TypeScript 0.9, utgitt i 2013
- Ekstra støtte for generiske medisiner TypeScript 1.0 ble utgitt på Build 2014
- I juli 2014 ble en ny TypeScript kompilatoren kom som er fem ganger raskere enn den forrige versjonen.
- I juli 2015, støtte for ES6-moduler, navneområde nøkkelord, for, av støtte, dekoratører.
- I november 2016, en ekstra funksjon som nøkkel- og oppslagstyper av kartlagte typer, og hvile.
- 27. mars 2018 ble betingede typer, den forbedrede nøkkelen med krysstyper lagt til i TypeScript.
Hvorfor bruke TypeScript?
Her er det viktige fordeler/fordeler med å bruke TypeScript
- Stort og komplekst prosjekt i JavaSkript er vanskelig å kode og vedlikeholde.
- TypeScript hjelper mye med kodeorganisering og blir likevel kvitt de fleste feilene under kompilering.
- TypeScript støtter JS-biblioteker og API-dokumentasjon
- Det er valgfritt skrevet skriptspråk
- TypeScript Kode kan konverteres til vanlig JavaSkriptkode
- Bedre kodestrukturering og objektorienterte programmeringsteknikker
- Tillater bedre støtte for utviklingstidsverktøy
- Det kan utvide språket utover standard dekoratører, asynkron/avvent
Hvem bruker TypeScript?
Her er noen av de vanligste bruksområdene TypeScript:
- Vinkellaget bruker TypeScript.
- NodeJS og NPM installasjon
- TypeScript Installasjon
- Kompilere TypeScript kode til Javascript
- Kjør kode ved hjelp av Nodejs
- Henrette Javascript i nettleseren
- Kompilere TypeScript kode til Javascript bruker EcmaScript-versjonen
- Du kan enkelt kompilere kode skrevet inn TypeScript til JavaSkript med NodeJS.
- Så til å jobbe med TypeScript du må først laste ned og installere NodeJS.
Oppsummering
- TypeScript er et supersett av JavaManus. TypeScript er rent objektorientert programmeringsspråk som støtter klasser, grensesnitt osv.
- TypeScript støtter alle Ecmascript-funksjonene som er utgitt, og utviklere kan bruke det samme mens de koder.
- Variabler brukes til å lagre verdier, og verdien kan være en streng, tall, boolsk eller et uttrykk.
- In TypeScript, er typen til en variabel kun definert i starten, og gjennom utførelsen må den opprettholde samme type. Eventuelle endringer i den vil føre til en kompileringsfeil under kompilering til javascript.
- En matrise i TypeScript er en datatype der du kan lagre flere verdier.
- Klasse er en ny funksjon lagt til fra ES6 og fremover, så tidligere JavaSkript klassetypefunksjonaliteten ble prøvd ved å bruke en funksjon med prototypefunksjonalitet for å gjenbruke kode.
- TypeScript støtter offentlige, private og beskyttede tilgangsmodifikatorer til dine metoder og egenskaper.
- En av kjerneegenskapene til TypeScript er grensesnitt. Grensesnittet er et sett med en regel definert som må implementeres av enheten som bruker den.
- Funksjoner er et sett med instruksjoner som utføres for å utføre en oppgave.
- TypeScript Enum er et objekt som har en samling av relaterte verdier lagret sammen.