Una pequeña guía de instalación, configuración y ejercicios de programación en TypeScript, para realizar una transicion ordenada del desarrollo tradicional en HTML a Angular JS así como para adaptarse al entorno, lenguaje y establecer un flujo de trabajo para trabajar con AngularJS y Typescript, utilizando el entorno de desarrollo ATOM.
Typescript (TS) facilita el desarrollo y trabajo en equipo, compila sobre JS, y toma (casi) todo lo bueno de ECMAScript 6 (ES6), dentro de su entorno de trabajo, TS es desarrollado por Microsoft.
- Tipos de variables
- Errores en tiempo de escritura
- Auto completado dependiendo de la variable
- Método estático de programación
- Clases y módulos (antes de ES6)
- Errores de variables no definidas
- Objeto con propiedades no esperadas
- Errores porque no se entiende el código de el de alado
- Errores de sobre escritura de variables, clases, funciones o *constantes
- Errores porque código colisiona con el de otro
- Cache del navegador mantiene JS viejos
- Errores de mayúsculas o minúsculas en lugares in correctos
- Errores por que el IDE no indica que se puede o no hacer
- Nos damos cuenta hasta que corre el programa
Configuración de espacio de trabajo para AngularJS+Typescript
https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi
https://www.google.com/chrome/browser/desktop/index.html
-g comando para instalar de manera global
npm install -g typescript
npm install -g @angular/cli
en caso de actualizar Angular CLI
npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest
Ionic 2 usa Angular2 (es como un Bootstrap especializado)
npm install -g cordova ionic
https://atom.io/download/windows_x64
Una vez instalado, Instalar los siguientes Atom packages:
- angular2 typescript snippets (GregOnNet)
- atom bootstrap 3 (f)
- v-bootstrap4 (thevuong)
- atom-typescript (TypeStrong)
- file-icons 2.0.15 (file-icons)
- font-awsome-nippetset (kevdotbadger)
- minimap (atom-minimap)
- platformio ide terminal (platformio)
- ng2-snippets ()
- autocomplete-js-import (DanielaGarcia-Carrillo)
- pigments (abe33)
Configurar el paquete
- autocomplete-js-import (DanielaGarcia-Carrillo)
Sección "Import types for autocompletion"
Remover palomita a: Commonjs "require"
El folder TypeScript contiene distintos ejemplos/ejercicios 01_Plantilla_Base contiene la estructura de archivos básica para iniciar a escribir código.
Se debe editar el archivo app.TS y compilar para poder generar un archivo app.JS Este último está incorporado al index.html y el resultado puede previsualizado la consola del navegador (Chrome) por medio de la tecla F12
Las aplicaciones escritas en TS compilan por medio del uso de la consola de Atom botón + (Esquina inferior izquierda)
Una vez abierta la consola escribir
tsc app -w
El comando -w permite a Atom realizar un monitoreo continuo cada que se guarda el archivo TS Ctrl + S, si este se remueve se realizara una compilación de única vez