Giter VIP home page Giter VIP logo

edteam-typescript's Introduction

TypeScript desde Cero

Mira el desarrollo del proyecto desde cero en el curso: ed.team/typescript.

Entorno de desarrollo

Las siguientes herramientas son necesarias:

  • Git
  • Node.js
  • Visual Studio Code

Clonar el Repositorio

git clone https://github.com/luixaviles/edteam-typescript.git
cd edteam-typescript

Instala dependencias

npm install

Ejecutando la aplicación localmente

El presente proyecto tiene las configuraciones necesarias para poder correr los scripts resultantes(archivos js) desde el browser o bien usando el motor JavaScript de Node.

tsconfig.json

  • Permite redireccionar la salida a un directorio específico. En nuestro caso, usaremos la carpeta dist.
  • Especifica la versión de salida para el código JavaScript. En este caso, usamos es5 ya que esta especificación es soportada por prácticamente todos los motores JavaScript de la actualidad. Ver este link para mayor referencia.
  • También es posible especificar que archivos se toman en cuenta o no para el proceso de compilación. Vea las propiedades files, include y exclude en la documentación

webpack.config.js

En nuestro caso, este archivo establece configuraciones básicas para poder cargar dinámicamente, desde el browser, el resultado de nuestro código TypeScript.

  • entry: Especifica el archivo de entrada para el proceso.
  • output: Especifica la salida para el archivo anterior.
  • module.rules: En esta sección especificamos el loader que usaremos para nuestro proyecto TypeScript, vía webpack: ts-loader.
  • devServer.port: Especificamos el puerto que usaremos para nuestra aplicación cliente.

Probando scripts desde el browser

Ejecuta el siguiente comando desde una terminal:

npm run dev
  • Observa la salida del comando anterior.
  • Abre tu navegador preferido(en nuestro caso Google Chrome).
  • Abre la consola del browser para ver la salida de nuestros scripts.
  • Carga la siguiente URL: http://localhost:8000.
  • Observa la salida en la consola del browser.
  • Aplica cambios en el archivo src/app.ts.
  • Objserva nuevamente la salida en la terminal y en la consola del browser. Verás que nuestros cambios se recargan de manera automática :-)

Prueba tus scripts usando Node.js

Ejecuta el siguiente comando desde una terminal:

tsc
  • Verifica que la salida del comando sea limpia, no deben existir errores.
  • Verifica los archivos generados en el directorio dist
  • Ejecuta el script de tu preferencia usando el comando node. Por ejemplo:
node dist/app.js
  • Observa la salida en la terminal.

edteam-typescript's People

Contributors

luixaviles avatar

Watchers

James Cloos avatar  avatar Giovanni Benvenutto avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.