TypeScript parte 1: variables, constantes y tipos adicionales

Esta es la parte 1 de una guía para aprender TypeScript desde cero en poco tiempo.

TypeScript es un superconjunto de JavaScript que extiende el lenguaje agregando tipos y otras funcionalidades.

Características de TypeScript:

• Creado por Microsoft
• Lanzado en 2012
• Soporta bibliotecas JavaScript
• Orientado a objetos
• Extensión de archivo .ts
• Desarrollado para aumentar la calidad y tener una mejor arquitectura en aplicaciones web utilizando JavaScript

TypeScript nos ayuda a:

• Crear ‘guardias’ para posibles cambios incorrectos en el código
• Detectar problemas fácilmente
• Evitar problemas relacionados con el tipo y el formato
• Tener una mejor estructura en el código
• Tener pautas de código en nuestros proyectos

Podemos empezar a utilizar TypeScript en el navegador: https://www.typescriptlang.org/play

Requisitos para esta guía:

• Sistema operativo: Windows, Linux, macOS
• Node.JS 16.x >
• Editor de código (VS Code, Sublime)

Proyecto desde cero

Para ejecutar TypeScript por primera vez sin proyectos creados, podemos crear un archivo .ts con un código de ejemplo y ejecutar el siguiente comando para convertir este archivo TypeScript a JavaScript.

npx --package typescript tsc --outDir dist [FileName].ts

Para crear nuestro propio proyecto desde cero, primero, naveguemos a una carpeta vacía y creemos un archivo con la extensión .ts y luego ejecutemos los siguientes comandos:

npm init -y
npm install typescript --save-dev

Editemos el archivo package.json y una sección de script para tsc:

"scripts": {
    "tsc": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

A continuación, debemos ejecutar el siguiente comando para crear el archivo .tsconfig.json

run tsc -- --init

Este archivo tiene una configuración predeterminada, pero podemos cambiarla según sus necesidades. Para más información puedes Visita: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Finalmente, ejecutemos el siguiente comando para compilar sus archivos TypeScript y ejecutar el código JavaScript final:

npm install
npm run tsc
node FileName.js

Ejecutar ejemplos uno por uno

Para aprender TypeScript con la ayuda de ejemplos prácticos podemos ir a: https://github.com/Mteheran/TypeScriptGuide y ejecutar los siguientes comandos

npm install
npm run tsc
node FileName.js

Podemos seguir la guía desde el primer archivo, leer los comentarios para comprender el contexto y generar el archivo JavaScript y ver los cambios utilizando npm run tsc
node [FileName].js

Ahora que conocemos los conceptos generales relacionados con TypeScript comencemos a aprender paso a paso todas las características.

1. Variables

Usamos dos puntos “:” para asignar un tipo a una variable.

let number1: number;
let total: number;

Typescript podemos inferir el tipo en función del conjunto de valores asignado. En este caso no es necesario especificar el tipo y para este ejemplo será número.

let percentage = 100;

Podemos crear constantes estableciendo el valor después de asignar el tipo

const messageResult: string = "The current percentage is:";

No se puede asignar un nuevo valor a una constante después de creada. La siguiente línea mostrará un error:

const messageResult: string = "The current percentage is:";
messageResult = "";

Si intentamos establecer un valor tipo string en number1, obtendremos un error y esta es una ventaja de usar TypeScript

let number1: number;
number1 = "This message";

TypeScript admite el tipo booleano. Este valor puede ser true o false

let IsADeveloper: boolean;
IsADeveloper = true;
console.log(`"Is the user a developer? " ${IsADeveloper}`);

Una variable puede tener varios tipos. Este concepto se denomina Union en TypeScript. Utilice el carácter de pipe ‘|’ para definir varios tipos en una variable:

let chapterName : string | number;
chapterName = "Number 1";
chapterName = 1;

2. Tipos adicionales

undefined cuando la variable no tendrá un valor

let emptyVariable : undefined;

Un tipo nulo para valores vacíos. Esto es útil cuando deseamos utilizar una variable con un tipo específico que también puede ser null.

let nullVariable: null;
let description: string | null;

Usando any se puede asignar cualquier tipo de valor a la variable. Debe tratar de usarse lo menos posible

let genericValue: any;
genericValue = 10;
genericValue = "Ten";

Usar void con una función que no devuelve un valor o devuelve un valor indefinido

function noReturnsValue() : void
{
    console.log("This functions doesn't return a value");

}

Usamos never cuando que la función nunca devuelve un valor

function errorFunction(errorMsg: string): never { 

    throw new Error(errorMsg); 

} 
//call error function here
errorFunction("messsage");

Referencia: https://dev.to/mteheran/typescript-ultimate-guide-for-beginners-1dlo

Repositorio: https://github.com/Mteheran/TypeScriptGuide