Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular 2+
Code

Comenzando con Angular 2 y TypeScript

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

Angular 2 dio vuelta el mundo del desarrollo front-end cuando fue lanzado, trayendo un número de prácticas de desarrollo de aplicaciones nuevas o recientes en un framework poderoso y fácil de usar. En la versión 2, el equipo de Angular comenzó desde el principio con un sistema completamente nuevo. Muchas de las ideas detrás de Angular siguen siendo las mismas, pero la API y la experiencia de desarrollo son muy diferentes.

En este video tutorial de mi curso, Comenzando con Angular 2, veremos como funciona TypeScript con Angular 2. También te mostraré la sintaxis básica de TypeScript.

Comenzando con Angular 2 y TypeScript

Cómo se acomoda TypeScript con Angular 2

Angular 2 está construído en TypeScript, que utiliza la sintaxis de ES6 y compila en JavaScript vainilla. JavaScript estándar ES5 también es TypeScript válido, así que puedes seguir utilizando tu código existente.

Donde difiere TypeScript es en el sistema de tipificado. Aunque es opcional, te recomiendo utilizar el sistema de tipificado en tus proyectos. Un sistema tipificado ayuda en los grandes proyectos identificando el tipo esperado de valor en tu código.

Esto se extiende a arrays y objetos y permite a un editor como Visual Studio Code reconocer el valor esperado. Esto es útil en un gran proyecto o cuando otros desarrolladores estén trabajando con tu código. En lugar de preguntarte qué data deberías utilizar en una variable genérica, con tipificado sabrás que tipo de valor utilizar.

TypeScript en Acción

Antes de mirar un poco de la sintaxis de TypeScript, vamos a discutir los archivos tsconfig.json y typings.json que incluiremos en nuestro proyecto.

El archivo tsconfig.json

tsconfigjson file code

Primero, el archivo tsconfig.json que controla nuestro archivo TypeScript se compilará. El objetivo en las opciones del compilador le dicen a este que genera JavaScript ES5.

module determina el estilo del cargador de módulos que vamos a utilizar; otras opciones comunes son JS, AMD y UMD. moduleResolution decide cómo se resuelven los módulos, y sourceMap genera el archivo de mapa correspondiente que vincula el JavaScript generado con su fuente en TypeScript. El emitDecoratorMetadata y experimentalDecorators nos permite utilizar decoradores en nuestra app. Discutiremos más acerca de los decoradores en un momento. removeComments determina si los comentarios que añadimos serán removidos cuando se compile, y finalmente tenemos el noImplicitAny. Esto controla como el compilador se comportará cuando no pueda inferir un tipo. Como TypeScript tiene tipificado opcional, si no proveemos ningún tipo, necesita averiguar el tipo asado en cómo utilizamos la variable.

Con noImplicitAny configurado como false, el compilador asignará por defecto any para un tipo que no pueda determinar. Si lo configuramos como true, TypeScript reportará un error cuando no pueda determinar el tipo. Luego tenemos el bloque de exclude, que excluirá cualquier archivo que queremos que el compilador ignore.

Adicionalmente a los módulos núcleo que contienen los archivos TypeScript, también incluimos algunos archivos en la carpeta typings. Esto es porque hay dos tipos de tipos que fueron instalados, entonces tenemos que ignorar uno de ellos.

El archivo typings.json

Si vamos a typings.json, vemos el es6-shim. Esto representa un tipificado que se ha agregado a nuestro proyecto.

typingsjson file code

El compilador de TypeScript no entiende métodos que pueden estar incluidos en librerías externas. Cuando esto sucede, el compilador te dará un error. Para arreglar esto, podemos obtener tipificados para la librería que estamos utilizando así TypeScript comprende los métodos en el compilador.

En este caso, la bandera de ambiente y las dependencias asociadas indican que el archivo de tipificado proviene de DefinitelyTyped. DefinitelyTyped es un gran repositorio de archivos de tipificado para las librerías más populares. En nuestro archivo typings.json, tomamos el tipificado del archivo es6-shim. El número al final representa el ID del commit del archivo de tipificado. Los tipificados fueron instalados en la instalación posterior y el archivo de tipificado se copió luego a la carpeta typings para nosotros.

Tipificado de Valores

Ahora que entendemos lo que tenemos que configurar en lo que respecta al compilador de TypeScript, echemos un vistazo al lenguaje en si mismo. Lo primero que vamos a mirar es el tipificado de valores.

tempts file code

Aquí tenemos los tipos básicos que utilizamos en JavaScript, pero hemos agregado identificadores que le dicen al compilador qué tipo de valor se utilizó en la variable.

Si tratamos de guardar un número en la variable myName, tendremos un error. Esto se mantendrá siendo verdadero si queremos guardar el tipo equivocado en cualquier variable. También podemos utilizar any para especificar que cualquier tipo está disponible para esta variable.

También podemos utilizar void como un tipo, típicamente para devolver el tipo de una función que no retorna un valor.

Finalmente, podemos utilizar un array como tipo. Usamos el tipo de elementos dentro del array seguido de corchetes para indicar que este es un tipo array.

También podemos escribir un tipo array de la siguiente manera:

A continuación tenemos la interfaz, que nos permite definir un contrato en nuestro código acerca de la forma de nuestros valores.

Aquí creamos una interfaz simple, pero para entenderla mejor, utilicemos esta interfaz.

Sample interface code

En la función, estamos especificando la interfaz como la forma para el argumento que pasamos a nuestra función Luego creamos un objeto para utilizar. La última línea lo sacará de nuestro título si compliamos y ejecutamos esto.

Solo se nos requiere utilizar la propiedad título en esta interfaz. Agregamos otra propiedad, pero TypeScript no le importa en tanto tengamos la propiedad título incluida en este objeto. Si no la tenemos, tendremos un error. También puedes notar que el orden de las propiedades no importa mientras que el valor requerido esté presente.

Clases

La siguiente parte de TypeScript que necesitas entender son las clases. En TypeScript, podemos utilizar las clases para construir aplicaciones en una forma orientada a objetos. Angular 2 impulsa esto utilizando clases como la columna vertebral del framework.

En lugar de aprender una sintaxis específica del framework, la sintaxis de Angular 2 está basada en TypeScript. De esta manera, no te limitas a aprender Angular 2 ya que la sintaxis será útil cuando desarrolles por fuera de Anguar 2. En su forma más básica, una clase se crea de la siguiente manera:

Cualquier lógica tanto como una función constructur se puede incluir en esta clase.

Ahora extendemos esto en Angular 2 a través del uso de los decoradores, como @Component ({}).  Este decorador agrega metadata que le dice a la aplicación que esta clase es un componente de Angular. Construiremos nuestras aplicaciones agregando metadata para nuestros componentes, servicios, directivas, etc. Todo lo que construimos en Angular 2 se basará en una clase. Exploraremos más en profundidad esto mientras construimos nuestras aplicaciones.

Finalmente, a medida que construimos nuestra aplicación, estaremos corriendo el script NPM start. Esto lanzará nuestra aplicación en nuestra vista previa y ejecutará el compilador en modo watch. Cualquier cambio se compilará y se reflejará en la vista previa. Estos son todos los básicos de TypeScript que necesitas saber para comenzar con Angular 2.

De todas maneras mira en la documentación de TypeScript para aprender más, ya que solo raspe la superficie de las características disponibles. También aprenderás mucho más en el resto del curso - mira a continuación.

Mira el Curso Completo

En el curso completo, Comenzando con Angular 2, aprenderás como construir una aplicación web simple desde el comienzo - empezando por la estructura y la configuración de herramientas. Aprenderás a utilizar la variación estáticamente-tipificada de TypeScript para crear componentes, servicios y directivas de Angular 2. En el camino verás como implementar lo fundamental de una aplicación single-page moderna: incluyendo routing, acceso APIs externas, input del usuario y validación.

Ya seas un desarrollador experimentado de Angular queriendo hacer el salto a la última versión, un un nuevo desarrollador que quiere crear sitios web con la última tecnología, este curso es un gran punto de inicio para aprender Angular 2.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.