TypeScript y en qué se diferencia de JavaScript

TypeScript es un lenguaje de programación tipificado estáticamente que se presenta como una extensión de JavaScript. El código TypeScript se compila en código JavaScript que se puede ejecutar tanto en el lado del cliente (navegador) como en el lado del servidor (nodejs). La calidad del código generado es comparable al código escrito por un desarrollador profesional con amplia experiencia.

El compilador multiplataforma de TypeScript es de compilación rápida y se distribuye bajo la licencia de Apache y colaboradores de todo el mundo, lo que lleva a la tradición de lanzar una nueva versión cada dos meses.

A pesar de esta periodicidad, las versiones siguen siendo compatibles durante mucho tiempo y, después de mucho tiempo, el comportamiento obsoleto sigue estando disponible cuando se activan indicadores especiales del compilador.

Por lo tanto, no debe temer que el proyecto se vea privado de nuevas funciones de lenguaje debido a las diferencias de versiones de TypeScript.

Bueno, muchos desarrolladores de compiladores significan que con cada nueva versión, el compilador recibe actualizaciones en todas las áreas, ya sea construcciones de sintaxis u optimización de la velocidad de compilación y ensamblaje del proyecto.

Ventajas de mecanografiado

Escritura estática fuerte

JavaScript no está fuertemente tipado. TypeScript viene con un sistema de inferencia de tipo y escritura estática opcional sobre TLS (Servicio de lenguaje TypeScript).

TLS puede determinar el tipo de variable declarada sin un tipo en función de su valor.

POO mejorado

Tanto JS como TS tienen soporte para programación orientada a objetos: clases, objetos, herencia. Sin embargo, TypeScript ha dado un paso más y aprovecha más las capacidades de OPP.

Hay varias capacidades, por ejemplo:

• Definición de campos en el constructor
• Tipo de conversión
• Clases abstractas
• Generalización.

Compilacion

JavaScript es un lenguaje interpretado. Por lo tanto, debe ejecutarse para comprobar que todo funciona bien. Esto significa que está codificando sin la capacidad de detectar errores. Por lo tanto, debe pasar horas tratando de encontrar errores en su código.

El transportador de TypeScript proporciona funcionalidad de comprobación de errores. TypeScript compilará el código y generará errores de compilación si encuentra errores de sintaxis. Esto ayuda a resaltar los errores antes de ejecutar el script.

Componentes de TypeScript

TypeScript se basa en los siguientes tres componentes:

1. Compilador de mecanografiado – (TSC) convierte las instrucciones escritas en TypeScript a su equivalente en JavaScript.
2. El lenguaje compuesto por anotaciones de tipo, sintaxis y palabras clave.
3. Servicio de idiomas. Esta capa de componentes se encuentra en la parte superior del compilador principal de TypeScript y proporciona la funcionalidad que necesita para trabajar en IDE y editores de texto: finalización de declaraciones, formato y esquema de código, resaltado de sintaxis y más. El servicio de lenguaje también proporciona refactorización de código: cambio de nombre de variables, depuración y compilación incremental.

Conceptos básicos de mecanografiado

Bueno, echemos un vistazo a los elementos básicos de TypeScript y explorémoslos para comprender cómo trabajar con este lenguaje de programación.

Variables y constantes

Puede usar la palabra clave var para definir variables, al igual que en JavaScript. Otra forma de definir una variable es usar el let palabra clave, agregada a JavaScript en ES 2015.

Usando let se prefiere porque evita algunos problemas asociados con la declaración de variables. Mediante el uso varpodemos definir una variable con el mismo nombre dos veces o más.

var x = "hi" 
console.log(x);
var x = "do";
console.log(x);

Entonces, si el programa es grande, entonces no podemos rastrear el hecho de que dicha variable ya ha sido declarada, lo cual es una fuente de errores potenciales. Un problema similar se puede resolver con letsi la variable ya ha sido declarada, se indicará un error.

let x = "hi";
console.log(x);
let x = "do"; // an error, variable x is already declared
console.log(x);

Además de las variables, TypeScript tiene constantes, puede establecer un valor para ellas solo una vez. La palabra clave const se usa para definir constantes:

const y = 1;
y = 2; // an error, you cannot change the value of the constant y

Modificadores de acceso

Los modificadores de acceso le permiten ocultar el estado de un objeto del acceso externo y controlar el acceso a ese estado. Hay tres modificadores en TypeScript: público, protegido y privado.

Si no asigna ningún modificador, las propiedades y funciones se determinan automáticamente para usar el modificador público.

privado. Los elementos con este modificador solo están disponibles en la clase en la que están definidos.

class Person { 
	private name: string;
	constructor(name: string) {
		this.name= name;
	}
	public print(): void {
		console.log(`Name: ${this.name}`);// cannot be accessed, cause name is private
	}
}
let bob = new Person("Bob");
bob.print();

La propiedad de nombre usa el modificador privado, por lo que no podemos usarla fuera de la clase, por ejemplo, consola.log (bob.nombre).

protegido. Los elementos con este modificador están disponibles desde la clase en la que están definidos y desde las subclases/clases derivadas.

arreglos

Los arreglos se definen usando el [] expresión y están fuertemente tipados. Es decir, si inicialmente la matriz contiene cadenas, en el futuro solo podrá funcionar con cadenas.

Matriz de solo lectura

TypeScript también le permite definir matrices cuyos elementos no se pueden modificar. Para esto, el ReadonlyArray<> type se utiliza, para el cual el tipo de elementos de matriz se indica entre paréntesis angulares.

A diferencia del tipo Array, para el ReadonlyArray tipo, no podemos aceptar un constructor. En su lugar, debe pasar los valores como una matriz regular:

const colors: ReadonlyArray = ["Green", "Red"];

tuplas

Con el tipo de tupla, puede declarar una matriz de longitud conocida con tipos conocidos como elementos. Al recuperar un elemento de una matriz de este tipo, TypeScript determinará automáticamente su tipo en función de la descripción.

A diferencia de las matrices, las tuplas pueden almacenar valores de diferentes tipos.

La sintaxis de matriz se utiliza para definir una tupla:

let user: [string, number]; // consists of a string and a number

Funciones

TypeScript también define una función usando la palabra clave function, pero agrega funcionalidad adicional para trabajar con funciones.

En particular, ahora podemos determinar el tipo de los parámetros pasados ​​y el tipo del valor de retorno.

function add(x: number, y: number){
let addition = x + y;
console.log(addition);
 }

Objetos

Un objeto es una instancia que contiene muchos pares clave-valor. Los valores pueden ser valores o funciones escalares, o incluso una matriz de otros objetos.

Sin embargo, a pesar de que este es en realidad el mismo objeto que podríamos usar en JavaScript, debido a la tipificación estricta de TS, tenemos limitaciones en este caso. En particular, si tenemos el siguiente código:

let cat = { name: "Bob", age: 4};
cat = { name: "Alex" };  // Error

TypeScript le permite hacer que las propiedades sean opcionales. Para hacer esto, después del nombre de la propiedad, debe poner «?».

let cat : { name?: string; age: number }; // The name property is optional

Conclusión

Si aún no ha probado TypeScript, es muy recomendable que lo pruebe. Para los desarrolladores de JavaScript, proporcionará muchas funciones que simplificarán el trabajo: ahorrará mucho tiempo y reducirá significativamente los errores.