Tutorial TypeScript: coneixeu els fonaments de TypeScript

TypeScript és un superconjunt de JavaScript fortament escrit. En aquest tutorial de TypeScript, aprofundirem en els coneixements bàsics.

TypeScript és un superconjunt de tipus fortament escrit que es compila a JavaScript senzill. Podeu utilitzar aquest idioma per al desenvolupament de JavaScript a escala d'aplicacions. A més, es pot executar en qualsevol navegador, qualsevol host i qualsevol sistema operatiu. En aquest tutorial de TypeScript, ens endinsarem en la profunditat de TypeScript i comprendreem els conceptes bàsics de la següent seqüència:



Introducció a TypeScript

TypeScript és un superconjunt de JavaScript mecanografiat que es compila amb JavaScript senzill. TypeScript és purament orientat a objectes amb classes, interfícies i llenguatges de programació de tipus estàtic C # o bé . Requereix un compilador per compilar i generar en fitxer JavaScript. Bàsicament, TypeScript és la versió ES6 de JavaScript amb algunes funcions addicionals.



Un codi TypeScript s'escriu en un fitxer amb .ts extensió i després es compila a JavaScript mitjançant el compilador. Podeu escriure el fitxer en qualsevol editor de codi i cal que el compilador estigui instal·lat a la vostra plataforma. Després de la instal·lació, l'ordre tsc .ts compila el codi TypeScript en un fitxer JavaScript senzill.

Sintaxi:



var message: string = 'Benvingut a Edureka!' console.log (missatge)

En compilar-se, genera el següent codi JavaScript:

// Generat per typescript 1.8.10 var message = 'Benvingut a Edureka!' console.log (missatge)

Característiques de TypeScript

funcions - tutorial mecanoscrit - edureka

  • Multiplataforma: El compilador TypeScript es pot instal·lar a qualsevol sistema operatiu com Windows, MacOS i Linux.



  • Llenguatge orientat a objectes : TypeScript proporciona funcions com Classes , Interfícies i Mòduls. Per tant, pot escriure codi orientat a objectes per al desenvolupament del client i del servidor.

  • Comprovació estàtica de tipus : TypeScript utilitza escriptura estàtica i ajuda a la comprovació de tipus en el moment de la compilació. Per tant, podeu trobar errors mentre escriviu el codi sense executar l'script.

  • Escriptura estàtica opcional : TypeScript també permet l’escriptura estàtica opcional en cas que utilitzeu l’escriptura dinàmica de JavaScript.

  • Manipulació DOM : Podeu utilitzar TypeScript per manipular el DOM per afegir o eliminar elements.

  • ÉS juny Features : TypeScript inclou la majoria de funcions de l'ECMAScript 2015 (ES 6, 7) previstes, com ara classe, interfície, funcions de fletxa, etc.

Avantatges d'utilitzar TypeScript

  • TypeScript és ràpid, senzill, fàcil d’aprendre i funciona amb qualsevol motor de navegador o JavaScript.

  • És similar a JavaScript i utilitza la mateixa sintaxi i semàntica.

  • Això ajuda als desenvolupadors de backend a escriure front-end codi més ràpid .

  • El codi TypeScript es pot cridar des d'un fitxer codi JavaScript existent . A més, funciona amb biblioteques i marcs JavaScript existents sense cap problema.

  • El fitxer Definition, amb extensió .d.ts, proporciona suport per a biblioteques JavaScript existents com Jquery, D3.js , etc. Per tant, es pot afegir codi TypeScript Biblioteques JavaScript utilitzant definicions de tipus per aprofitar els avantatges de la comprovació de tipus, l’autocompleció de codi i la documentació en biblioteques JavaScript de tipus dinàmic existents.

  • Inclou funcions de ES6 i ES7 que es pot executar en motors JavaScript de nivell ES5 com Node.js .

Ara que ja heu entès què és TypeScript, continuem amb aquest tutorial de TypeScript i fem una ullada als diferents tipus.

Tipus TypeScript

El sistema de tipus representa els diferents tipus de valors admesos per l'idioma. Comprova el validesa del subministrat valors abans que siguin emmagatzemats o manipulats pel programa.

Es pot classificar en dos tipus, com ara:

  • Incorporat : Inclou número, cadena, booleà, buit, nul i indefinit.
  • Usuari definit : Inclou enumeracions (enums), classes, interfícies, matrius i tupla.

Ara continuem amb aquest tutorial TypeScript i entenem més sobre les variables.

Tutorial TypeScript: variables

Una variable és un espai anomenat a la memòria que s'utilitza per emmagatzemar valors.

La sintaxi del tipus per declarar una variable a TypeScript inclou dos punts (:) després del nom de la variable, seguit del seu tipus. De manera similar a JavaScript, fem servir el fitxer paraula clau var per declarar una variable.

Hi ha quatre opcions quan declarem una variable:

var [identificador]: [type-annotation] = valor
var [identificador]: [tipus-anotació]
var [identificador] = valor
var [identificar]

Exemple:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('empleat id' + empid)

En compilar-se, generarà el següent codi JavaScript:

// Generat per typescript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('empleat id:' + empid)

Sortida:

nom: Margarida
identificador d'empleat: 1001

Passem ara al següent tema del nostre tutorial TypeScript.

Operadors

Un operador s'utilitza per definir les funcions que es realitzaran a les dades. Les dades sobre les quals treballen els operadors s’anomenen operands. Hi ha diferents tipus de operadors a TypeScript com ara:

  • Operadors aritmètics
  • Operadors lògics
  • Operadors relacionals
  • Operadors de bits
  • Operadors de tasques

Operadors aritmètics

Operadors Descripció

Addició (+)

retorna la suma dels operands

Resta (-)

retorna la diferència dels valors

Multiplicació (*)

retorna el producte dels valors

Divisió (/)

realitza l'operació de divisió i retorna el quocient

Mòdul (%)

realitza l'operació de divisió i retorna la resta

Increment (++)

Incrementa el valor de la variable en un

Decrement (-)

Disminueix el valor de la variable en un

Exemple:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Diferència:' + res) res = num1 * num2 console.log ('Producte:' + res)

Sortida:

Suma: 12
Diferència: 8
Producte: 20

Operadors lògics

Operadors Descripció

I (&&)

Retorna true només si totes les expressions especificades tornen true

O (||)

Això torna cert si almenys una de les expressions especificades torna certa

NO (!)

Retorna la inversa del resultat de l’expressió.

Exemple:

var avg: number = 20 var percentatge: number = 90 console.log ('Valor de la mitjana:' + avg + ', valor del percentatge:' + percentatge) var res: boolean = ((avg> 50) && (percentatge> 80 )) console.log ('(avg> 50) && (percentatge> 80):', res)

Sortida:

Valor de la mitjana: 20, valor del percentatge: 90
(mitjana> 50) && (percentatge> 80): fals

Operadors relacionals

Operadors Descripció

>

Més gran que

<

Menys de

> =

Superior o igual a

<=

Menor o igual a

==

Igualtat

! =

No és igual

Exemple:

var num1: number = 10 var num2: number = 7 console.log ('Valor de num1:' + num1) console.log ('Valor de num2:' + num2) var res = num1> num2 console.log ('num1 superior a num2: '+ res) res = num1

Sortida:

Valor de num1: 10
Valor de num2: 7
num1 superior a num2: cert
num1 menor que num2: fals

Operadors bitwise

Operadors Descripció

A bit a bit I (&)

realitza una operació booleana AND a cada bit dels seus arguments enters.

OR a bits (|)

Realitza una operació OR booleana en cada bit dels seus arguments enters.

XOR a bits (^)

Realitza una operació OR exclusiva booleana en cada bit dels seus arguments enters.

Bitwise NOT (~)

Es tracta d'un operador unari i funciona invertint tots els bits de l'operand.

Desviació a l'esquerra (<<)

Mou tots els bits del seu primer operand cap a l'esquerra pel nombre de llocs especificats al segon operand.

Maj a la dreta (>>)

El valor de l’operand esquerre es mou cap a la dreta pel nombre de bits especificat per l’operand dret.

Maj a la dreta amb zero (>>>)

es pot fer una gran quantitat d'objectes a Java

És similar a l'operador >>, tret que els bits desplaçats a l'esquerra sempre són nuls.

Exemple:

var a: number = 2 // Presentació de bits 10 var b: number = 3 // Presentació de bits 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', resultat)

Sortida:

(a & b) => 2
(a | b) => 3

Operadors de tasques

Operadors Descripció

Tasca simple (=)

Assigna valors de l’operand del costat dret a l’operand del costat esquerre

Afegeix i assigna (+ =)

Afegeix l’operand dret a l’operand esquerre i assigna el resultat a l’operand esquerre.

Restar i assignar (- =)

Resta l'operand dret de l'operand esquerre i assigna el resultat a l'operand esquerre.

Multiplicar i assignar (* =)

Multiplica l’operand dret amb l’operand esquerre i assigna el resultat a l’operand esquerre.

Divisió i assignació (/ =)

Divideix l’operand esquerre amb l’operand dret i assigna el resultat a l’operand esquerre.

Exemple:

var a: número = 12 var b: número = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b consola .log ('a- = b:' + a)

Sortida:

a = b: 10
a + = b: 20
a - = b: 10

Aquests van ser els diferents operadors. Ara continuem amb el nostre tutorial TypeScript i coneixem els bucles.

Bucles

Pot haver-hi situacions en què calgui executar un bloc de codi diverses vegades. A bucle La sentència ens permet executar una sentència o un grup de sentències diverses vegades.

Els bucles TypeScript es poden classificar com:

Per a bucle

El per a bucle és una implementació d'un bucle definitiu.

Sintaxi:

for (primera expressió segona expressió tercera expressió) {// sentències que s'han d'executar repetidament}

Aquí, la primera expressió s’executa abans que comenci el bucle. La segona expressió és la condició perquè s’executi el bucle. I la tercera expressió s’executa després de l’execució de cada bloc de codi.

Exemple:

per (permeti i = 0 i<2 i++) { console.log ('Execute block statement' + i) }

Sortida:

Executeu la sentència de bloc 0
Executeu la sentència de bloc 1

Mentre que Loop

El bucle while executa les instruccions cada vegada que la condició especificada es valora com a veritable.

Sintaxi:

while (expressió de condició) {// bloc de codi a executar}

Exemple:

deixem que i: número = 1 mentre (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Sortida:

Execució d’instruccions de bloc núm. 1
Execució de la sentència de bloc núm. 2

Feu-ho .. Mentre feu el bucle

El bucle do & hellipwhile és similar al bucle while, tret que no avalua la condició per primera vegada que s'executa el bucle.

Sintaxi:

fer {// bloqueig de codi per executar} while (expressió de condició)

Exemple:

deixem que i: number = 1 do {console.log ('Núm. d'execució de sentències de bloc' + i) i ++} mentre que (i<3)

Sortida:

Execució d’instruccions de bloc núm. 1
Execució de la sentència de bloc núm. 2

A part d’aquestes, hi ha les instruccions break i continue a TypeScript que s’utilitzen en un bucle.

Declaració de trencament

La sentència break s’utilitza per treure el control d’una construcció. L’ús de la sentència break en un bucle ajuda el programa a sortir del bucle.

Exemple:

var i: número = 1 mentre (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

Sortida:

El primer múltiple de 5 entre 1 i 10 és: 5

Declaració de continuació

La sentència continue omet les sentències posteriors a la iteració actual i torna el control al començament del bucle.

Exemple:

assignació de memòria dinàmica en c ++
var num: número = 0 recompte de var: número = 0 per a (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Sortida:

El recompte de valors senars entre 0 i 10 és: 5

Aquests eren els diferents bucles de TypeScript. Ara, continuem amb el nostre tutorial TypeScript i entenem les funcions.

Funcions

A JavaScript, funcions són una de les parts més importants ja que és un llenguatge de programació funcional. Les funcions garanteixen que el programa es pugui mantenir i reutilitzar i que s’organitzi en blocs llegibles. Tot i que TypeScript proporciona el concepte de classes i mòduls, les funcions continuen sent una part integral del llenguatge.

Funcions anomenades

Una funció anomenada s'utilitza per declarar i cridar una funció pel seu nom.

Exemple:

display de funció () {console.log ('TypeScript Function')} display ()

Sortida:

Funció TypeScript

Funció anònima

Una funció anònima és aquella que es defineix com a expressió. Aquesta expressió s’emmagatzema en una variable. Aquestes funcions s’invoquen mitjançant el nom de la variable on s’emmagatzema la funció.

Exemple:

let greeting = function () {console.log ('TypeScript Function')} greeting ()

Sortida:

Funció TypeScript

Funció de fletxa

Les notacions de fletxa grassa s’utilitzen per a funcions anònimes, és a dir, per a expressions de funcions. També s’anomenen funcions lambda en altres idiomes.

Sintaxi:

(param1, param2, ..., paramN) => expressió

Si utilitzeu la fletxa grassa (=>), es redueix la necessitat d’utilitzar la paraula clau ‘funció’ Els paràmetres es passen entre claudàtors angulars i l'expressió de funció s'inclou entre claudàtors {}.

Exemple:

let sum = (x: number, y: number): number => {return x + y} sum (10, 30) // retorna 40

Funció de sobrecàrrega

TypeScript proporciona el concepte de sobrecàrrega de funcions. Per tant, podeu tenir diverses funcions amb el mateix nom però diferents tipus de paràmetres i tipus de retorn.

Exemple:

funció add (a: string, b: string): funció add string (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // retorna 'Hello Edureka' add ( 10, 10) // retorna 20

A l'exemple anterior, tenim la mateixa funció add () amb dues declaracions de funcions i una implementació de funcions. La primera signatura té dos paràmetres de tipus string, mentre que la segona firma té dos paràmetres del número de tipus.

Aquests són els diferents tipus de funcions. Ara, continuem amb el nostre tutorial TypeScript i entenem les cadenes de TypeScript.

Tutorial TypeScript: cadenes

El és un altre tipus de dades primitiu que s'utilitza per emmagatzemar dades de text. Els valors de cadena estan envoltats de cometes simples o cometes dobles.

Sintaxi:

var var_name = nova cadena (cadena)

Hi ha diferents propietats dels mètodes disponibles a l’objecte String, com ara:

  • constructor - Retorna una referència a la funció String que ha creat l'objecte
  • Llargada - Retorna la longitud de la cadena
  • Prototip - Aquesta propietat us permet afegir propietats i mètodes a un objecte

Exemple:

let name = new String ('Welcome to Edureka!') console.log ('Message:' + name) console.log ('Length:' + name.length)

Sortida:

Missatge: Benvingut a Edureka.
Llargada: 19

Mètodes de cadena

La llista de mètodes en objecte de cadena inclou:

Mètode Descripció

charAt ()

Retorna el caràcter a l'índex especificat

charCodeAt ()

Torna un número que indica el valor Unicode del caràcter a l'índex donat

concat ()

Combina el text de dues cadenes i retorna una cadena nova

índex de()

Retorna l'índex dins de l'objecte String de trucada de la primera aparició del valor especificat

lastIndexOf ()

Retorna l'índex dins de l'objecte String de trucada de l'última aparició del valor especificat

match ()

S'utilitza per fer coincidir una expressió regular amb una cadena

localeCompare ()

Retorna un número que indica si una cadena de referència ve abans o després o és la mateixa que la cadena donada per ordre de classificació

cerca()

S'executa la cerca d'una coincidència entre una expressió regular i una cadena especificada

replace ()

S'utilitza per trobar una coincidència entre una expressió regular i una cadena, i per substituir la subcadena coincident per una nova cadena

llesca ()

Extreu una secció d'una cadena i retorna una cadena nova

split ()

Divideix un objecte de cadena en una matriu de cadenes separant la cadena en subcadenes

substr ()

Retorna els caràcters d'una cadena que comença a la ubicació especificada a través del nombre especificat de caràcters

subcadena ()

Retorna els caràcters d'una cadena entre dos índexs a la cadena

toLocaleLowerCase ()

Els caràcters d'una cadena es converteixen en minúscula respectant la configuració regional actual

toLocaleUpperCase ()

Els caràcters d'una cadena es converteixen en majúscules respectant la configuració regional actual

toLowerCase ()

Torna el valor de la cadena de trucada convertit en minúscula

toUpperCase ()

Retorna el valor de la cadena de trucada convertit a majúscules

toString ()

Retorna una cadena que representa l'objecte especificat

el valor de()

Retorna el valor primitiu de l'objecte especificat

Exemple:

let str: string = 'Benvingut a Edureka' str.charAt (0) // retorna 'w' str.charAt (2) // retorna 'l' 'Benvingut a Edureka'.charAt (2) retorna' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // retorna 'welcomeEdureka' str1.concat ('', str2) // retorna 'welcome Edureka' str1.concat ('' to '' ') // retorna' benvingut a '

Ara que ja coneixeu les cadenes, continuem amb aquest tutorial de TypeScript i entenem les matrius.

Matrius a TypeScript

An matriu és un tipus especial de tipus de dades que emmagatzema diversos valors de diferents tipus de dades seqüencialment mitjançant una sintaxi especial. Els elements de matriu s’identifiquen mitjançant un enter únic anomenat subíndex o índex de l’element.

Sintaxi:

var array_name [: datatype] // declaració array_name = [val1, val2, valn ..] // inicialització

Exemple:

let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]

Mètodes de matriu

Aquí hi ha una llista de diferents mètodes de matriu que es poden utilitzar per a diferents propòsits:

Mètode Descripció

filter ()

Crea una nova matriu amb tots els elements d'aquesta matriu per a la qual la funció de filtratge proporcionada torna cert

cada()

Retorna cert si tots els elements d'aquesta matriu compleixen la funció de prova proporcionada

concat ()

Retorna una nova matriu composta per aquesta matriu unida a altres matrius

índex de()

Retorna el primer o el mínim índex d'un element dins de la matriu igual al valor especificat

per cadascú()

Crida una funció per a cada element de la matriu

unir-se ()

Uneix tots els elements d'una matriu en una cadena

lastIndexOf ()

Retorna l'últim o el màxim índex d'un element dins de la matriu igual al valor especificat

mapa ()

Crea una nova matriu amb els resultats de trucar a una funció proporcionada en tots els elements d'aquesta matriu

push ()

Afegeix un o més elements al final d'una matriu i retorna la nova longitud de la matriu

pop ()

Elimina l'últim element d'una matriu i torna aquest element

reduce ()

Apliqueu una funció simultàniament contra dos valors de la matriu d'esquerra a dreta per reduir-la a un valor únic

reduceRight ()

Apliqueu una funció simultàniament contra dos valors de la matriu de dreta a esquerra per reduir-la a un valor únic

revers ()

Inverteix l'ordre dels elements d'una matriu

shift ()

Elimina el primer element d'una matriu i torna aquest element

llesca ()

Extreu una secció d'una matriu i retorna una matriu nova

alguns ()

Torna cert si almenys un element d'aquesta matriu compleix la funció de prova proporcionada

sort ()

Ordena els elements d'una matriu

toString ()

Retorna una cadena que representa la matriu i els seus elements

empalme ()

Afegeix i / o elimina elements d'una matriu

unshift ()

Afegeix un o més elements a la part frontal d'una matriu i retorna la nova longitud de la matriu

Exemple:

var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // sortida: Tara name.push ('Rachel') console.log (nom) // sortida: ['John', 'Daisy', 'Rachel']

Ara anem endavant amb aquest tutorial TypeScript i coneixem les interfícies.

Interfícies TypeScript

La interfície és una estructura que defineix el contracte a la vostra sol·licitud. Defineix la sintaxi de les classes a seguir. Només conté la declaració dels membres i és responsabilitat de la classe derivant definir els membres.

Exemple:

interfície Empleat {empID: number empName: string getSalary: (number) => number // function arrow getManagerName (number): string}

A l'exemple anterior, el fitxer Empleat interfície inclou dues propietats empID i empName . També inclou una declaració de mètode getSalaray utilitzant un funció de fletxa que inclou un paràmetre numèric i un tipus de retorn numèric. El getManagerName es declara mitjançant una funció normal.

TypeScript Classes

TypeScript va introduir classes perquè puguin aprofitar els avantatges de tècniques orientades a objectes com l’encapsulació i l’abstracció. El compilador TypeScript compila la classe en TypeScript amb funcions JavaScript simples per treballar en plataformes i navegadors.

Una classe inclou el següent:

  • constructor
  • Propietats
  • Mètodes

Exemple:

classe Empleat {empID: number empName: string constructor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}

Herència

Suporta TypeScript Herència ja que és la capacitat d’un programa per crear noves classes a partir d’una classe existent. La classe que s’amplia per crear classes més noves s’anomena classe pare o super classe. Les classes de nova creació s’anomenen classes secundàries o secundàries.

Una classe hereta d’una altra classe mitjançant la paraula clau ‘extends’. Les classes fills hereten totes les propietats i mètodes, excepte els membres privats i els constructors de la classe pare. Però TypeScript no admet herències múltiples.

Sintaxi:

class child_class_name estén parent_class_name

Exemple:

classe Person {name: string constructor (name: string) {this.name = name}} class Employee extends Person {empID: number constructor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Nom = Jason, identificador d'empleat = 701

Ara que ja coneixeu les classes, continuem amb aquest tutorial TypeScript i aprenem sobre Objectes.

Objectes en TypeScript

Un objecte és una instància que conté un conjunt diferent de parells clau-valor. Els valors poden ser valors o funcions escalars o fins i tot una matriu d'altres objectes.

Sintaxi:

var nom_objecte = {clau1: “valor1”, // valor escalar clau2: “valor”, clau3: funció () {// funcions}, clau4: [“contingut1”, “contingut2”]

Un objecte pot contenir valors escalars, funcions i estructures com ara matrius i tuples.

Exemple:

var persona = {firstname: 'Danny', cognom: 'Green'} // accedeix als valors de l'objecte console.log (person.firstname) console.log (person.lastname)

En compilar-se, generarà el mateix codi a JavaScript.

Sortida:

Danny
Verd

Aquests van ser els diferents elements importants de TypeScript. Ara, continuem amb aquest tutorial TypeScript i donem un cop d’ull a un exemple per entendre el cas d’ús.

Tutorial TypeScript: cas d'ús

Aquí aprendrem com convertir un existent a TypeScript.

Quan compilem un fitxer TypeScript, produeix el fitxer JavaScript corresponent amb el mateix nom. Aquí hem d’assegurar-nos que el nostre fitxer JavaScript original que actua com a entrada no pugui estar al mateix directori, de manera que TypeScript no els anul·li.

El procés per migrar de JavaScript a TypeScript inclou els passos següents:

1. Afegiu el fitxer tsconfig.json al projecte

Cal afegir un fitxer tsconfig.json al projecte. TypeScript utilitza un fitxer tsconfig.json per gestionar les opcions de compilació del projecte, com ara els fitxers que voleu incloure i excloure.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Integrar-se amb una eina de compilació

La majoria dels projectes JavaScript tenen una eina de compilació integrada com gulp o webpack. Podeu integrar projectes amb webpack de les maneres següents:

  • Executeu l'ordre següent al terminal:
$ npm instal·leu awesome-typescript-loader source-map-loader

A la integració de paquets web, utilitzeu awesome-typescript-loader combinat amb source-map-loader per facilitar la depuració del codi font.

com configurar java classpath
  • En segon lloc, combineu la propietat de configuració del mòdul al nostre fitxer webpack.config.js per incloure els carregadors.

3. Mou tots els fitxers .js a fitxers .ts

En aquest pas, heu de canviar el nom del fitxer .js a .ts. De la mateixa manera, si el fitxer utilitza JSX, haureu de canviar el nom a .tsx. Ara, si obrim aquest fitxer en un editor que admet TypeScript, és possible que alguns dels codis comencin a produir errors de compilació. Per tant, convertir fitxers un per un permet gestionar els errors de compilació més fàcilment. Si TypeScript troba algun error de compilació durant la conversió, encara pot traduir el codi.

4. Comproveu si hi ha errors

Després de moure el fitxer js al fitxer ts, immediatament, TypeScript iniciarà la comprovació de tipus del nostre codi. Per tant, és possible que obtingueu errors de diagnòstic al codi JavaScript.

5. Utilitzeu biblioteques JavaScript de tercers

Els projectes JavaScript utilitzen biblioteques de tercers com ara o Lodash. Per tal de compilar fitxers, TypeScript ha de conèixer els tipus de tots els objectes d’aquestes biblioteques. Els fitxers de definició de tipus TypeScript per a biblioteques JavaScript ja estan disponibles a DefinitelyTyped. Per tant, no cal instal·lar aquest tipus externament. Només heu d’instal·lar aquells tipus que s’utilitzen al nostre projecte.

Per a jQuery, podeu instal·lar la definició:

$ npm install @ types / jquery

Després, feu els canvis al projecte JavaScript, executeu l'eina de compilació. Ara, hauríeu de compilar el projecte TypeScript en JavaScript senzill que es pugui executar al navegador.

Amb això, hem arribat al final d’aquest tutorial de TypeScript. Espero que hagueu entès tots els elements importants de TypeScript.

Consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).

Tens alguna pregunta? Esmenteu-lo a la secció de comentaris de 'Tutorial TypeScript' i us respondrem.