Tag Archives: TypeScript

programación

Soporte para TypeScript en Vuejs

Este artículo es una traducción de la documentación oficial. Mis notas estarán debidamente identificadas.

Soporte para TypeScript

A partir de la versión de Vue 2.5.0 en adelante se ha mejorado significativamente las declaraciones de tipos para que operen con el API default basado en objectos. Al mismo tiempo se ha introducido algunos cambios que requieren se realice una debida actualización. Leer el siguiente artículo para más detalles.

Nota: Con esta introducción se reafirma el compromiso del equipo de Vue para mantener un ambiente saludable y ágil a la hora de trabajar con TypeScripte dentro de Vue.

Declaración oficial en los paquetes de NPM

Un sistema de tipado estático puede ayudar a prevenir muchos potenciales errores de runtime, especialmente cuando la aplicación continúa creciendo. Es por esto que Vue ofrece soporte oficial a las declaraciones para tipado estático en TypeScript – no solo para el core de Vue, sino también para las librerías vue-router y vuex.

Dado que estas están publicadas en NPM, y la versión más reciente de TypeScript sabe como resolver las declaraciones de tipo en los paquetes de NPM, esto significa que cuando se instala a través de NPM, no se necesita ninguna herramienta adicional para habilitar TypeScript en Vue.

Nota: Actualmente TypeScript cuenta con una rica colección de tipos gracias al esfuerzo del colectivo Definitely Typed y a la aceptación en general de la comunidad.

Configuración recomendada

// tsconfig.json
{
  "compilerOptions": {
    // esto se alinea con el soporte de Vue en el navegador 
    "target": "es5",
    // permite una inferencia más estricta para las propiedades de datos en `this`
    "strict": true,
    // si se usa webpack 2+ o rollup, para aprovechar el método tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Tenga en cuenta que debe incluir strict: true (o al menos noImpllicitThis: true, que es parte del flag strict) para aprovechar la verificación de tipo para this en los métodos de los componentes, de lo contrario, siempre se tratará como tipo any.

Consulte la documentación de TypeScript para más detalles sobre las opciones del compilador.

Herramientas para desarrollo

Creación de proyectos

Vue CLI 3 puede generar proyectos compatibles con TypeScript. Para comenzar:

# 1. Instalar Vue CLI si aún no lo ha instalado
npm install --global @vue/cli

# 2. Crear un nuevo proyecto, luego seleccione la opción "Manually select features"
vue create mi-proyecto

Soporte en el editor

Para desarrollar aplicaciones usando Vue y TypeScript, se recomienda usar Visual Studio Code, el cual cuenta con soporte nativo para TypeScript. Si usas componentes en modo sigle-file (SFCs), instala la increíble extensión Vetur, que proporciona inferencia de TypeScript dentro del SFC y ofrece una gran cantidad de excelente opciones.

WebStorm también cuenta con soporte nativo para ambos, TypeScript y Vue.

Nota: Vetur es una estupenda herramienta para Vue. Aún si no deseas utilizar TypeScript es una extensión que deberías explorar y añadir al repertorio.

Uso básico

Para que TypeScript infiera adecuadamente los tipos dentro de un componente en Vue, necesitas definir los componentes usando Vue.component o Vue.extend:

import Vue from 'vue'

const Component = Vue.extend({
  // inferencia de tipo habilitada
})

const Component = {
  // aquí NO habrá inferencia de tipos,
  // porque TypeScript no puede inferir que esto son opciones para un componente Vue.
}

Componentes Vue utilizando el modelo Class-Style

Si prefieres una API basada en clases para declarar componentes, puedes usar el decorador oficial vue-class-component:

import Vue from 'vue'
import Component from 'vue-class-component'

// El decorador @Component le indica a la clase que es un componente Vue
@Component({
  // Todas las opciones del componente se definen aquí
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // La data inicial puede ser declarada como propiedades de la instancia
  message: string = 'Hello!'

  // Los métodos del componente pueden ser declarado como métodos de la instancia
  onClick (): void {
    window.alert(this.message)
  }
}

Nota: Los decoradores usan una sintaxis especial a través del símbolo @ y se colocan inmediatamente antes de que se decore el código. En la programación orientada a objetos, el patrón decorador (también conocido como Wrapper, nombre alternativo al patrón Adapter) es un patrón de diseño que permite agregar comportamiento a un objeto individual, ya sea estática o dinámicamente, sin afectar el comportamiento de otros objetos de la misma clase. Al momento de redactar este artículo, JavaScript no cuenta con apoyo nativo para decoradores. Existe la propuesta para añadirlo al spec y actualmente se encuentra en el borrador, “Stage 2 Draft / May 23, 2018”.

Aumento de tipos para uso en plug-ins

Los plug-ins pueden agregarse a las propiedades globales/instancia de Vue y a las opciones de los componentes. En estos casos, se necesitan declaraciones de tipo para hacer que los plug-ins se compilen en TypeScript. Afortunadamente, hay una característica de TypeScript para aumentar los tipos existentes llamada aumento de módulos (module augmentation.).

Por ejemplo, para añadir una propiedad a la instancia llamada $myProperty de tipo cadena:

// 1. Asegurate importar 'vue' antes de la declaración aumentada para los tipos
import Vue from 'vue'

// 2. Especifique el archivo con los tipos que desea aumentar 
//    Para el constructor Vue este se encuentra en types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Utilice la propiedad aumentada en Vue
  interface Vue {
    $myProperty: string
  }
}

Luego de incluir el código anterior como un archivo de declaraciones (algo parecido a my-property.d.ts) en tu proyecto, puedes usar myProperty en la instancia de Vue.

var vm = new Vue()
console.log(vm.$myProperty) // Esto debería compilar sin problema

También puedes declarar propiedades globales adicionales y opciones en los componentes:

import Vue from 'vue'

declare module 'vue/types/vue' {
  // Propiedades Globales pueden ser definidas
  // en la interface `VueConstructor`
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions se define en types/options.d.ts
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }
}

Las declaraciones anteriores permiten que el siguiente código pueda ser compilado:

// Propiedad Global
console.log(Vue.$myGlobal)

// Opción adicional
var vm = new Vue({
  myOption: 'Hello'
})

Anotación de tipos para resultados

Debido a la naturaleza circular de los archivos de declaración de Vue, TypeScript puede tener dificultades para inferir los tipos de ciertos métodos. Por esta razón, es posible que deba anotar el tipo del resultado en métodos como render y computed.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // necesita una anotación debido al uso de `this` en el resultado
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // necesita una anotación
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` es inferido pero `render` necesita la anotación
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

Si encuentra que la inferencia de tipo o la resolución del método no funciona, anotar ciertos métodos puede ayudar a resolver estos problemas. Usar la opción --noImplicitAny ayudará a encontrar muchos de estos métodos no anotados.

Nota: Es importante destacar que el uso de tipos no es un requisito para todos los proyectos. Utilizar TypeScript tampoco lo es. Las ventajas son inmensas pero la curva de aprendizaje puede ser atropellada si no se evalúa correctamente al momento de introducirlo en el proyecto o al equipo de trabajo. Tómese su tiempo y no tema en experimentar con esta tecnología.

micro notas

Micro Notas #11

A través de estas micro notas hablo brevemente de aquellas noticias o enlaces que me han parecido curiosas y relevantes al mundo de la programación y la tecnología.

How DNS works – colorida y muy animada manera de aprender el proceso detrás del funcionamiento de un Domain Name Server. Si tienes curiosidad en saber que ocurre una vez accedes el url a través del navegador este recurso es estupendo. Prácticamente cubre todos los actores envueltos en proceso de resolver el domain name, el camino hasta el server final y de nuevo el regreso a casa.

Matrix Multiplication – Por esa misma línea de aprender como funcionan las cosas, este proyecto muestra de forma visual como funciona la multiplicación de matrices. Buen proyecto si estás aprendiendo Typescript.

Consejos para reforzar la destreza de la programación – A través de los artículos Proof You Can Become a Better Programmer y Tips for Self-Learning Programming podrás obtener buenos consejos para mejorar las destrezas de programación. Lo que me ha gustado de estos artículos es el contraste de como llegar al mismo fin por diferentes caminos.

programación

Primeros pasos usando TypeScript

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft (así como oyes). Es un superconjunto estricto de JavaScript, y añade, de manera opcional, tipado estáticos y herramientas que ayudan a desarrollar a través de metodologías de programación orientada a objetos basado en clases. Anders Hejlsberg, quien es el arquitecto principal de C# y creador de Delphi y Turbo Pascal, trabaja en el desarrollo de TypeScript. TypeScript puede ser utilizado para desarrollar aplicaciones en JavaScript para el lado del cliente o en el servidor a través de Node.js.

Instalar

El primer requisito para utilizar TypeScript es installar Node.js. La forma mas conveniente de instalación es a través de npm, el package manager que viene por default con Node.js. Existen muy buenas referencias de como instalar Node.js tanto para OSX como para Windows. Así que no vamos a entrar en detalles de como instalar Node.js. Voy a suponer que Node.js se encuentra instalado un funcionando. Una vez confirmemos que Node.js y npm están accesible en nuestro ambiente de desarrollo podemos proceder a instalar TypeScript. Vayamos al terminal (si estas en Windows te recomiendo usar Git Bash).

npm install -g typescript

Esta instrucción instalará TypeScript de forma global. Si deseas trabajar con la versión más reciente (beta) puedes utilizar el siguiente comando:

npm install -g typescript@next

Si decides trabajar con la versión nightly (beta) de TypeScript ésta puede tener alguno que otro bug e incompatibilidades que no existen en la versión estable.

Para confirmar en que versión de TypeScript estamos trabajando usamos el siguiente comando:

tsc --version

¿Cómo compilar?

TypeScript sencillamente produce código en plain JavaScript. Podemos compilar el código de dos maneras, a través del terminal o usando algún IDE que automáticamente compile el código. Si utilizas Visual Studio 2013 ó 2015  puedes utilizar TypeScript directamente y todo sucede y funcionará por arte de magia, sin mucho esfuerzo de tener que trabajar mano a mano con el compilador. También puedes compilar TypeScript usando las herramientas de building más populares para el desarrollo web que se usa hoy en día (Grunt, Gulp, Bower, etc.). Antes de llegar a utilizar alguna de esas herramientas vamos a ver como compilamos a través del terminal.

Desde el terminal podemos compilar de forma cavernícola con tan solo ejecutar el siguiente código:

tsc greeter.ts

Pero como ya puedes imaginar es realmente tedioso tener que ir al terminal cada vez que deseamos compilar. Si estas desarrollando en OSX puedes utilizar la opción de –watch que provee el compilador para vigilar el folder de la aplicación y así cada vez que salves un cambio de tu aplicación, el proyecto automáticamente compilará. Sorpresivamente la función de –watch aún no está implementada nativamente en Windows. En Windows hay que depender de Node.js.

En OSX puedes usar la siguiente opción:

tsc -w greeter.ts

En Windows tienes que recurrir a Node.js a través del siguiente comando:

node "c:\el\path\al\compilador\tsc.js" -w greeter.ts

Mientras tanto crucemos los dedos para que puedan mejor la experiencia en Windows.

¿Y la opción elegante?

Cuando pienso en esa opción elegante es la que comúnmente conocemos como el botón mágico que cuando lo presionamos todo fluye maravillosamente por arte de magia y el mundo es mil veces más feliz. Para crear toda esa magia vamos a implementar un workflow automático usando Gulp. De igual forma como mencioné hace un rato sobre la instalación de Node.js, existen muy buenas referencias para instalar y configurar Gulp. Por el momento vamos a limitarnos a lo básico.

Gulp es de esas cosas que realmente hace maravillas. Además de Gulp vamos a utilizar una herramienta para compilar TypeScript de Ivo Gabe de Wolff, ivogabe/gulp-typescript. Este plug-in es el que mencionan en el wiki oficial de TypeScript como una opción para compilar automáticamente TypeScript usando Gulp. Empecemos con Gulp.

Para instalar Gulp globalmente:

npm install gulp –g

Ahora si comienza lo interesante. Vamos a crear un folder llamado WebProject (realmente puede ser cualquier cosa) y como parte de nuestro proyecto usaremos Gulp. En el terminal ejecutaremos el siguiente comando dentro del folder WebProject.

npm install gulp

Esto habilitará Gulp para que lo podamos usar en nuestro proyecto. Ahora instalemos el compilador de TypeScript para Gulp:

npm install gulp-typescript

Ahora vamos a proceder a crear el archivo de configuración para Gulp, gulpfile.js. Le he añadido algunos comentado al archivo para que puedas observar donde y como colocar las funcionalidades que estaremos usando.

var gulp = require('gulp');
var ts = require('gulp-typescript');

// Task para compilar TypeScript
gulp.task('typescript', function () {
    // Seleccionar todos los archivos .ts
    var tsResult = gulp.src('./*.ts')
    .pipe(ts({
    noImplicitAny: true
 }));
    // Destino del proyecto compilado
    return tsResult.js.pipe(gulp.dest('built/local'));
});

// Task para observar los cambios al proyecto
gulp.task('watch', function() {
    // Observar proyecto
    gulp.watch('./*.ts', ['typescript']);
});

// Trigger a los tasks
gulp.task('default', ['typescript', 'watch']);

Supongamos que tenemos el siguiente código TypeScript en el archivo greeter.ts dentro de nuestro folder WebProject:

// TypeScript
function greeter(person: string) {
    return "Hello, " + person;
}
var user = "Jaime Olmo";
document.body.innerHTML = greeter(user);

Ahora con tan solo ir al nuestro proyecto en el terminal y escribir gulp automáticamente se compilará nuestro código cada vez que presionemos la opción de save.

Gulp and

Conclusión

TypeScript realmente luce prometedor. Si dominas JavaScript utilizar TypeScript será un grato paseo. En mi opinión Microsoft realmente está tratando de crear ese ambiente de desarrollo multi-plataforma y con esta propuesta podemos ver que se están tomando muy en serio lograr dicha meta. Son cada vez más los grupos y compañías que están comenzando a mover sus proyectos en JavaScipt a código de TypeScript ya que uno de los problemas que resuelve TypesScript es precisamente la facilidad de manejar proyecto masivos escritos en JavaScript. Angular 2 es uno esos proyectos. Con la versión 2 a la vuelta de la esquina, y sabiendo que se está desarrollando usando TypeScript no dudo que se convierta muy pronto en una herramienta de muy alta demanda.

Si deseas explorar un poco más sobre TypeScript te recomiendo el curso “Introduction to TypeScript” de edX. A mi TypeScript me tiene muy entretenido.