Tutorial de TypeScript: conozca los fundamentos de TypeScript

TypeScript es un superconjunto fuertemente tipado de que se compila en JavaScript simple. Puede utilizar este lenguaje para el desarrollo de JavaScript a escala de aplicación. Además, se puede ejecutar en cualquier navegador, cualquier host y cualquier sistema operativo. En este tutorial de TypeScript, profundizaremos en TypeScript y comprenderemos los conceptos básicos en la siguiente secuencia:

• Introducción a TypeScript
• Tipos de TypeScript
• Variables
• Operadores
• Bucles
• Funciones
• Instrumentos de cuerda
• Matrices
• Interfaces
• Clases
• Objetos
• Caso de uso de TypeScript

Introducción a TypeScript

TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple. TypeScript está puramente orientado a objetos con clases, interfaces y lenguajes de programación tipados estáticamente como C# o . Requiere un compilador para compilar y generar en un archivo JavaScript. Básicamente, TypeScript es la versión ES6 de JavaScript con algunas características adicionales.

Un código TypeScript se escribe en un archivo con extensión .ts y luego compilado en JavaScript usando el compilador. Puede escribir el archivo en cualquier editor de código y el compilador debe estar instalado en su plataforma. Después de la instalación, el comando tsc .ts compila el código TypeScript en un archivo JavaScript simple.

Sintaxis:

var message: string = '¡Bienvenido a Edureka!' console.log (mensaje)

Al compilar, genera el siguiente código JavaScript:

// Generado por mecanografiado 1.8.10 var message = '¡Bienvenido a Edureka!' console.log (mensaje)

Características de TypeScript

• Multiplataforma: El compilador TypeScript se puede instalar en cualquier sistema operativo, como Windows, MacOS y Linux.

  
  
  

• Lenguaje orientado a objetos : TypeScript proporciona funciones como Clases , Interfaces y módulos. Por lo tanto, puede escribir código orientado a objetos para el desarrollo del lado del cliente y del lado del servidor.

• Verificación de tipo estática : TypeScript usa escritura estática y ayuda a verificar la escritura en tiempo de compilación. Por lo tanto, puede encontrar errores al escribir el código sin ejecutar el script.

• Escritura estática opcional : TypeScript también permite la escritura estática opcional en caso de que esté utilizando la escritura dinámica de JavaScript.

• Manipulación DOM : Puede utilizar TypeScript para manipular el DOM para agregar o eliminar elementos.

• ES 6 Features : TypeScript incluye la mayoría de las funciones de ECMAScript 2015 planificado (ES 6, 7), como clase, interfaz, funciones de flecha, etc.

Ventajas de usar TypeScript

• TypeScript es rápido, simple, fácil de aprender y se ejecuta en cualquier navegador o motor JavaScript.

• Es similar a JavaScript y utiliza la misma sintaxis y semántica.

• Esto ayuda a los desarrolladores de backend a escribir front-end codificar más rápido .

• El código TypeScript se puede llamar desde un código JavaScript existente . Además, funciona con bibliotecas y marcos de JavaScript existentes sin problemas.

• El archivo de definición, con extensión .d.ts, proporciona soporte para bibliotecas JavaScript existentes como Jquery, D3.js , etc. Entonces, el código TypeScript puede agregar Bibliotecas JavaScript utilizando definiciones de tipos para aprovechar los beneficios de la verificación de tipos, el autocompletado de código y la documentación en las bibliotecas de JavaScript de tipo dinámico existentes.

• Incluye características de ES6 y ES7 que puede ejecutarse en motores JavaScript de nivel ES5 como Node.js .

Ahora que ha entendido qué es TypeScript, continuemos con este tutorial de TypeScript y echemos un vistazo a los diferentes tipos.

Tipos de TypeScript

El sistema de tipos representa los diferentes tipos de valores admitidos por el idioma. Comprueba el validez de los suministrados valores antes de que sean almacenados o manipulados por el programa.

Se puede clasificar en dos tipos como:

• Incorporado : Esto incluye número, cadena, booleano, vacío, nulo e indefinido.
• Usuario definido : Incluye enumeraciones (enumeraciones), clases, interfaces, matrices y tuplas.

Ahora sigamos con este tutorial de TypeScript y entendamos más sobre las variables.

Tutorial de TypeScript: variables

Una variable es un espacio con nombre en la memoria que se utiliza para almacenar valores.

La sintaxis de tipos para declarar una variable en TypeScript incluye dos puntos (:) después del nombre de la variable, seguidos de su tipo. Similar a JavaScript, usamos el var palabra clave para declarar una variable.

Hay cuatro opciones cuando declaramos una variable:

var [identificador]: [anotación de tipo] = valor

var [identificador]: [anotación de tipo]

var [identificador] = valor

var [identificar]

Ejemplo:

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

Al compilar, generará el siguiente código JavaScript:

// Generado por mecanografiado 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('employee id:' + empid)

Salida:

nombre: Daisy
ID de empleado: 1001

Ahora pasemos al siguiente tema de nuestro tutorial de TypeScript.

Operadores

Se utiliza un operador para definir funciones que se realizarán en los datos. Los datos sobre los que trabajan los operadores se denominan operandos. Hay diferentes tipos de operadores en TypeScript como:

• Operadores aritméticos
• Operadores logicos
• Operadores relacionales
• Operadores bit a bit
• Operadores de Asignación

Operadores aritméticos

Ejemplo:

var num1: número = 10 var num2: número = 2 var res: número = 0 res = num1 + num2 console.log ('Suma:' + res) res = num1 - num2 console.log ('Diferencia:' + res) res = num1 * num2 console.log ('Producto:' + res)

Salida:

Suma: 12
Diferencia: 8
Producto: 20

Operadores logicos

Ejemplo:

var avg: número = 20 var porcentaje: número = 90 console.log ('Valor de avg:' + avg + ', valor de porcentaje:' + porcentaje) var res: boolean = ((avg> 50) && (porcentaje> 80 )) console.log ('(promedio> 50) && (porcentaje> 80):', res)

Salida:

Valor de promedio: 20, valor de porcentaje: 90
(promedio> 50) && (porcentaje> 80): falso

Operadores relacionales

Ejemplo:

var num1: número = 10 var num2: número = 7 console.log ('Valor de num1:' + num1) console.log ('Valor de num2:' + num2) var res = num1> num2 console.log ('num1 mayor que num2: '+ res) res = num1
 Salida: 
Valor de num1: 10 
 Valor de num2: 7 
 num1 mayor que num2: verdadero 
 num1 menor que num2: falso
 Operadores bit a bit 
 Operadores 
 Descripción 
 Y (&) bit a bit 
realiza una operación booleana AND en cada bit de sus argumentos enteros.
 O bit a bit (|) 
Realiza una operación booleana OR en cada bit de sus argumentos enteros.
 XOR bit a bit (^) 
Realiza una operación OR exclusiva booleana en cada bit de sus argumentos enteros.
 Bit a bit NOT (~) 
Este es un operador unario y opera invirtiendo todos los bits del operando.
 Shift izquierdo (<<) 
Mueve todos los bits de su primer operando a la izquierda el número de lugares especificado en el segundo operando.
 Desplazamiento a la derecha (>>) 
El valor del operando izquierdo se mueve hacia la derecha el número de bits especificado por el operando derecho.
 Cambio a la derecha con cero (>>>) 
Es similar al operador >>, excepto que los bits desplazados hacia la izquierda son siempre cero.
 Ejemplo: 
var a: número = 2 // Presentación de bits 10 var b: número = 3 // Presentación de bits 11 var resultado resultado = (a & b) console.log ('(a & b) =>', resultado) resultado = ( a | b) console.log ('(a | b) =>', resultado)
 Salida: 
(a & b) => 2 
 (a | b) => 3
 Operadores de Asignación 
 Operadores 
 Descripción 
 Asignación simple (=) 
Asigna valores del operando del lado derecho al operando del lado izquierdo
 Sumar y asignar (+ =) 
Agrega el operando derecho al operando izquierdo y asigna el resultado al operando izquierdo.
 Restar y asignar (- =) 
Resta el operando derecho del operando izquierdo y asigna el resultado al operando izquierdo.
 Multiplicar y asignar (* =) 
Multiplica el operando derecho por el operando izquierdo y asigna el resultado al operando izquierdo.
 Dividir y asignar (/ =) 
Divide el operando izquierdo con el operando derecho y asigna el resultado al operando izquierdo.
 Ejemplo: 
var a: número = 12 var b: número = 10 a = b consola.log ('a = b:' + a) a + = b consola.log ('a + = b:' + a) a - = b consola .log ('a- = b:' + a)
 Salida: 
a = b: 10 
 a + = b: 20 
 a - = b: 10
Estos fueron los diferentes operadores. Ahora sigamos con nuestro Tutorial de TypeScript y aprendamos sobre los bucles.
 Bucles 
Puede haber situaciones en las que un bloque de código deba ejecutarse varias veces. UN lazo declaración nos permite ejecutar una declaración o grupo de declaraciones varias veces.
Los bucles de TypeScript se pueden clasificar como:
 En bucle 
los en bucle es una implementación de un bucle definido.
 Sintaxis: 
for (primera expresión segunda expresión tercera expresión) {// sentencias que se ejecutarán repetidamente}
Aquí, la primera expresión se ejecuta antes de que comience el ciclo. La segunda expresión es la condición para que se ejecute el ciclo. Y la tercera expresión se ejecuta después de la ejecución de cada bloque de código.
 Ejemplo: 
para (sea i = 0 i<2 i++) { console.log ('Execute block statement' + i) }
 Salida: 
Ejecutar sentencia de bloque 0 
Ejecutar sentencia de bloque 1
 Mientras bucle 
El ciclo while ejecuta las instrucciones cada vez que la condición especificada se evalúa como verdadera.
 Sintaxis: 
while (expresión de condición) {// bloque de código a ejecutar}
 Ejemplo: 
sea ​​i: número = 1 mientras (i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 Salida: 
Ejecución de declaración de bloque n. ° 1 
Ejecución de sentencia de bloque n. ° 2
 Hacer .. mientras bucle 
El bucle do & hellip while es similar al bucle while, excepto que no evalúa la condición la primera vez que se ejecuta.
 Sintaxis: 
do {// bloque de código a ejecutar} while (expresión de condición)
 Ejemplo: 
  
let i: number = 1 do {console.log ('Bloquear el número de ejecución de la sentencia' + i) i ++} while (i<3)
 Salida: 
Ejecución de declaración de bloque n. ° 1 
Ejecución de sentencia de bloque n. ° 2
Aparte de estos, están las declaraciones break y continue en TypeScript que se utilizan en un bucle.
 Declaración de ruptura 
La sentencia break se usa para tomar el control de una construcción. El uso de la instrucción break en un bucle ayuda al programa a salir del bucle.
 Ejemplo: 
var i: número = 1 mientras (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
 Salida: 
El primer múltiplo de 5 entre 1 y 10 es: 5
 Continuar declaración 
La instrucción continue omite las instrucciones subsiguientes en la iteración actual y devuelve el control al comienzo del ciclo.
 Ejemplo: 
var num: número = 0 var count: número = 0 para (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 Salida: 
El recuento de valores impares entre 0 y 10 es: 5
Estos fueron los diferentes bucles en TypeScript. Ahora, avancemos con nuestro Tutorial de TypeScript y comprendamos las funciones.
 Funciones 
En JavaScript, funciones son una de las partes más importantes, ya que es un lenguaje de programación funcional. Las funciones garantizan que el programa se pueda mantener y reutilizar, y que esté organizado en bloques legibles. Si bien TypeScript proporciona el concepto de clases y módulos, las funciones siguen siendo una parte integral del lenguaje.
 Funciones nombradas 
Una función nombrada se usa para declarar y llamar a una función por su nombre de pila.
 Ejemplo: 
function display () {console.log ('Función TypeScript')} display ()
 Salida: 
Función TypeScript
 Función anónima 
Una función anónima es aquella que se define como una expresión. Esta expresión se almacena en una variable. Estas funciones se invocan utilizando el nombre de variable en el que está almacenada la función.
 Ejemplo: 
let greeting = function () {console.log ('Función TypeScript')} greeting ()
 Salida: 
Función TypeScript
 Función de flecha 
Las notaciones de flechas gruesas se utilizan para funciones anónimas, es decir, para expresiones de función. También se denominan funciones lambda en otros idiomas.
 Sintaxis: 
(param1, param2, ..., paramN) => expresión
El uso de la flecha gruesa (=>) elimina la necesidad de utilizar la palabra clave 'función'. Los parámetros se pasan entre corchetes angulares y la expresión de la función se incluye entre corchetes {}.
 Ejemplo: 
let sum = (x: número, y: número): número => {return x + y} sum (10, 30) // devuelve 40
 Sobrecarga de funciones 
TypeScript proporciona el concepto de sobrecarga de funciones. Por lo tanto, puede tener varias funciones con el mismo nombre pero diferentes tipos de parámetros y tipos de retorno.
 Ejemplo: 
function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hola', 'Edureka') // devuelve 'Hola Edureka' add ( 10, 10) // devuelve 20
En el ejemplo anterior, tenemos la misma función add () con dos declaraciones de función y una implementación de función. La primera firma tiene dos parámetros de tipo cadena, mientras que la segunda firma tiene dos parámetros del número de tipo.
Estos son los diferentes tipos de funciones. Ahora, sigamos con nuestro Tutorial de TypeScript y comprendamos las cadenas en TypeScript.
 Tutorial de TypeScript: cadenas 
los  es otro tipo de datos primitivo que se utiliza para almacenar datos de texto. Los valores de cadena están rodeados por comillas simples o comillas dobles.
 Sintaxis: 
var var_name = nueva cadena (cadena)
Hay diferentes propiedades de métodos disponibles en el objeto String, como:
 Constructor - Devuelve una referencia a la función String que creó el objeto.
 Longitud - Esto devuelve la longitud de la cadena.
 Prototipo - Esta propiedad le permite agregar propiedades y métodos a un objeto
 Ejemplo: 
let name = new String ('¡Bienvenido a Edureka!') console.log ('Mensaje:' + nombre) console.log ('Longitud:' + nombre.length)
 Salida: 
Mensaje: ¡Bienvenido a Edureka! 
 Longitud: 19
 Métodos de cadena 
La lista de métodos en el objeto String incluye:
 Método 
 Descripción 
 charAt () 
Devuelve el carácter en el índice especificado
 charCodeAt() 
Devuelve un número que indica el valor Unicode del carácter en el índice dado
 concat () 
Combina el texto de dos cadenas y devuelve una nueva cadena
 índice de() 
Devuelve el índice dentro del objeto String que llama de la primera aparición del valor especificado
 lastIndexOf () 
Devuelve el índice dentro del objeto String que llama de la última aparición del valor especificado
 partido() 
Se usa para hacer coincidir una expresión regular con una cadena
 localeCompare() 
Devuelve un número que indica si una cadena de referencia viene antes o después o es la misma que la cadena dada en el orden de clasificación
 buscar() 
Esto ejecuta la búsqueda de una coincidencia entre una expresión regular y una cadena especificada.
 reemplazar() 
Se usa para encontrar una coincidencia entre una expresión regular y una cadena, y para reemplazar la subcadena coincidente con una nueva subcadena
 rebanada() 
Extrae una sección de una cadena y devuelve una nueva cadena
 división() 
Divide un objeto String en una matriz de cadenas separando la cadena en subcadenas
 substr () 
Devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres
 subcadena () 
Devuelve los caracteres en una cadena entre dos índices en la cadena
 toLocaleLowerCase () 
Los caracteres dentro de una cadena se convierten a minúsculas respetando la configuración regional actual
 toLocaleUpperCase () 
Los caracteres dentro de una cadena se convierten a mayúsculas respetando la configuración regional actual
 toLowerCase () 
Devuelve el valor de la cadena de llamada convertido a minúsculas
 toUpperCase () 
Devuelve el valor de la cadena de llamada convertido a mayúsculas
 Encadenar() 
Devuelve una cadena que representa el objeto especificado.
 valor de() 
Devuelve el valor primitivo del objeto especificado.
 Ejemplo: 
let str: string = 'Bienvenido a Edureka' str.charAt (0) // devuelve 'w' str.charAt (2) // devuelve 'l' 'Bienvenido a Edureka'.charAt (2) devuelve' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // devuelve 'welcomeEdureka' str1.concat ('', str2) // devuelve 'welcome Edureka' str1.concat ('' to ' ') // devuelve' bienvenido a '
Ahora que conoce las cadenas, continuemos con este tutorial de TypeScript y comprendamos las matrices.
 Matrices en TypeScript 
Un formación es un tipo especial de tipo de datos que almacena múltiples valores de diferentes tipos de datos secuencialmente usando una sintaxis especial. Los elementos de la matriz se identifican mediante un número entero único llamado subíndice o índice del elemento.
 Sintaxis: 
var array_name [: datatype] // declaración array_name = [val1, val2, valn ..] // inicialización
 Ejemplo: 
let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]
 Métodos de matriz 
Aquí hay una lista de diferentes métodos de matriz que se pueden usar para diferentes propósitos:
 Método 
 Descripción 
 filtrar() 
Crea una nueva matriz con todos los elementos de esta matriz para los que la función de filtrado proporcionada devuelve verdadero
 cada() 
Devuelve verdadero si cada elemento de esta matriz satisface la función de prueba proporcionada
 concat () 
Devuelve una nueva matriz compuesta por esta matriz unida con otras matrices
 índice de() 
Devuelve el primer o el mínimo índice de un elemento dentro de la matriz igual al valor especificado
 para cada() 
Llama a una función para cada elemento de la matriz.
 unirse() 
Une todos los elementos de una matriz en una cadena
 lastIndexOf () 
Devuelve el último o mayor índice de un elemento dentro de la matriz igual al valor especificado
 mapa() 
Crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de esta matriz
 empujar() 
Agrega uno o más elementos al final de una matriz y devuelve la nueva longitud de la matriz
 pop() 
Elimina el último elemento de una matriz y devuelve ese elemento
 reducir() 
Aplicar una función simultáneamente contra dos valores de la matriz de izquierda a derecha para reducirla a un solo valor
 reduceRight () 
Aplicar una función simultáneamente contra dos valores de la matriz de derecha a izquierda para reducirla a un solo valor
 marcha atrás() 
herencia múltiple en java con ejemplo
Invierte el orden de los elementos de una matriz
 cambio() 
Elimina el primer elemento de una matriz y devuelve ese elemento
 rebanada() 
Extrae una sección de una matriz y devuelve una nueva matriz
 algunos() 
Devuelve verdadero si al menos un elemento de esta matriz satisface la función de prueba proporcionada
 ordenar() 
Ordena los elementos de una matriz
 Encadenar() 
Devuelve una cadena que representa la matriz y sus elementos.
 empalme() 
Agrega y / o elimina elementos de una matriz
 unshift () 
Agrega uno o más elementos al frente de una matriz y devuelve la nueva longitud de la matriz
 Ejemplo: 
var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // salida: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // salida: Tara name.push ('Rachel') console.log (name) // salida: ['John', 'Daisy', 'Rachel']
Ahora sigamos adelante con este tutorial de TypeScript y aprendamos sobre las interfaces.
 Interfaces TypeScript 
La interfaz es una estructura que define el contrato en su aplicación. Define la sintaxis que deben seguir las clases. Contiene solo la declaración de los miembros y es responsabilidad de la clase derivada definir los miembros.
 Ejemplo: 
interfaz Empleado {empID: número empName: string getSalary: (número) => número // función de flecha getManagerName (número): string}
En el ejemplo anterior, el Empleado la interfaz incluye dos propiedades empID y empName . También incluye una declaración de método getSalaray usando un función de flecha que incluye un parámetro numérico y un tipo de retorno numérico. los getManagerName El método se declara utilizando una función normal.
 Mecanografiado  Clases 
TypeScript introdujo clases para que puedan aprovechar los beneficios de las técnicas orientadas a objetos como la encapsulación y la abstracción. El compilador de TypeScript compila la clase en TypeScript en funciones simples de JavaScript para que funcione en todas las plataformas y navegadores.
Una clase incluye lo siguiente:
 Constructor 
 Propiedades 
 Métodos 
 Ejemplo: 
clase Empleado {empID: número empName: constructor de cadena (ID: número, nombre: cadena) {this.empName = nombre this.empID = ID} getSalary (): número {return 40000}}
 Herencia 
Soporta TypeScript Herencia ya que es la capacidad de un programa para crear nuevas clases a partir de una clase existente. La clase que se amplía para crear clases más nuevas se denomina clase padre o superclase. Las clases recién creadas se denominan clases secundarias o subclases.
Una clase hereda de otra clase usando la palabra clave 'extiende'. Las clases secundarias heredan todas las propiedades y métodos excepto los miembros privados y los constructores de la clase principal. Pero TypeScript no admite la herencia múltiple.
 Sintaxis: 
class child_class_name amplía parent_class_name
 Ejemplo: 
class Person {nombre: constructor de cadena (nombre: cadena) {this.name = nombre}} class Empleado extiende Persona {empID: constructor de números (empID: número, nombre: cadena) {super (nombre) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Nombre = Jason, ID de empleado = 701
Ahora que conoce las clases, sigamos adelante con este tutorial de TypeScript y aprendamos sobre los objetos.
 Objetos en TypeScript 
Un objeto es una instancia que contiene un conjunto diferente de pares clave-valor. Los valores pueden ser valores o funciones escalares o incluso una matriz de otros objetos.
 Sintaxis: 
var nombre_objeto = {clave1: 'valor1', // valor escalar clave2: 'valor', clave3: función () {// funciones}, clave4: ['contenido1', 'contenido2']
Un objeto puede contener valores escalares, funciones y estructuras como matrices y tuplas.
 Ejemplo: 
var person = {firstname: 'Danny', lastname: 'Green'} // acceder a los valores del objeto console.log (person.firstname) console.log (person.lastname)
Al compilar, generará el mismo código en JavaScript.
 Salida: 
Danny 
 Verde
Estos fueron los diferentes elementos importantes de TypeScript. Ahora, sigamos con este tutorial de TypeScript y echemos un vistazo a un ejemplo para comprender el caso de uso.
 Tutorial de TypeScript: caso de uso 
Aquí, aprenderemos cómo convertir un  a TypeScript.
Cuando compilamos un archivo TypeScript, produce el archivo JavaScript correspondiente con el mismo nombre. Aquí, debemos asegurarnos de que nuestro archivo JavaScript original que actúa como entrada no pueda estar en el mismo directorio para que TypeScript no los anule.
El proceso para migrar de JavaScript a TypeScript incluye los siguientes pasos:
 1.Añadir el archivo tsconfig.json al proyecto 
Necesita agregar un archivo tsconfig.json al proyecto. TypeScript usa un archivo tsconfig.json para administrar las opciones de compilación del proyecto, como los archivos que desea incluir y excluir.
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}
 2. Integrar con una herramienta de construcción 
La mayoría de los proyectos de JavaScript tienen una herramienta de compilación integrada como gulp o webpack. Puede integrar proyectos con webpack de las siguientes formas:
Ejecute el siguiente comando en la terminal:
$ npm instala el cargador-mapa-fuente-impresionante-mecanografiado-cargador
En la integración de paquetes web, se utiliza el cargador-mecanografiado-impresionante combinado con el cargador-mapa-fuente para una depuración más sencilla del código fuente.
En segundo lugar, combine la propiedad de configuración del módulo en nuestro archivo webpack.config.js para incluir cargadores.
 3. Mueva todos los archivos .js a archivos .ts 
En este paso, debe cambiar el nombre del archivo .js a archivo .ts. De manera similar, si el archivo usa JSX, deberá cambiarle el nombre a .tsx. Ahora, si abrimos ese archivo en un editor que admita TypeScript, algunos de los códigos pueden comenzar a dar errores de compilación. Por lo tanto, convertir archivos uno por uno permite manejar los errores de compilación con mayor facilidad. Si TypeScript encuentra algún error de compilación durante la conversión, aún puede traducir el código.
 4. Compruebe si hay errores 
Después de mover el archivo js al archivo ts, inmediatamente, TypeScript iniciará la verificación de tipos de nuestro código. Por lo tanto, es posible que obtenga errores de diagnóstico en el código JavaScript.
 5. Utilice bibliotecas de JavaScript de terceros 
Los proyectos de JavaScript utilizan bibliotecas de terceros como  o Lodash. Para compilar archivos, TypeScript necesita conocer los tipos de todos los objetos en estas bibliotecas. Los archivos de definición de tipos de TypeScript para bibliotecas JavaScript ya están disponibles en DefinitelyTyped. Por lo tanto, no es necesario instalar este tipo de forma externa. Necesita instalar solo aquellos tipos que se utilizan en nuestro proyecto.
Para jQuery, puede instalar la definición:
$ npm install @ types / jquery
Después de esto, realice los cambios en el proyecto de JavaScript, ejecute la herramienta de compilación. Ahora, debe tener el proyecto TypeScript compilado en JavaScript simple que se puede ejecutar en el navegador.
Con esto, hemos llegado al final de este Tutorial de TypeScript. Espero que haya entendido todos los elementos importantes de TypeScript.
 Revisar la     por Edureka.  La capacitación para la certificación de desarrollo web lo ayudará a aprender a crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3). 
 Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del “Tutorial de TypeScript” y nos comunicaremos con usted.