¡Descarga Curso de programación en typescript y más Transcripciones en PDF de Lenguajes de Programación solo en Docsity!
Curso de Programación TypeScript.
Semana 1: Conceptos y Prácticas de Programación
en TypeScript.
Entornos de Trabajos. (NODE.js – Visual Code).
Node & TypeScript: La instalación de TypeScript es relativamente simple, únicamente necesitamos la instalación de un servidor NodeJS y con el gestor de paquetes npm para descargarnos el transpilador TypeScript. Para descargar NodeJS hay que ir a nodejs.org y una vez instalado comprobar la instalación mediante el comando: node -v Si nos dice la versión de NodeJS que tenemos proseguiremos con el siguiente paso la descarga de TypeScript para ello abriremos una terminal y escribiremos esto (Windows/Linux/Mac) npm install -g typescript Para comprobar la correcta instalación de TypeScript y la versión que se ha instalado escribimos tsc -v Instalación de los tsd de nodejs npm install tsd -g tsc = TypeScript Console El siguiente paso será crear una carpeta donde trabajar para ello dependiendo de nuestro sistema operativo podremos utilizar un ejecutable u otro para crear una carpeta o simplemente hacerlo desde la interfaz gráfica,
una vez creada navegaremos a través de la terminal a la carpeta recién creada y escribiremos el siguiente comando: tsc --init Con este comando generaremos el archivo de configuración básico que utilizará TypeScript para compilar la información. { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": false }, "exclude": [ "node_modules" ] }. La presencia de este archivo significa que este directorio es la raíz del proyecto. Para que se compile un fichero TypeScripte tienes que utilizar el siguiente comando tsc -w Si al realizar esta instalación ocurre algún error, una alternativa para practicar sería la página de pruebas de TypeScript. Visual Code: Visual Code es un entorno de desarrolladores de Microsoft, pero de código abierto, la razón por la que aparece este entorno de desarrollo, es porque ni más ni menos que Microsoft es el creador de TypeScript, VS Code es un IDE que nos permitirá automatizar tareas para ello abrimos el menú pulsando el F1 y escribimos Configure task Runner hacemos click y seleccionamos tsconfig.json esto nos generará una carpeta llamada y dentro de ella un archivo llamado task.json que sería así: { // See https://go.microsoft.com/fwlink/?LinkId=
problemas que ha venido arrastrando. Alternativas como CoffeScript o LiveScript surgieron para este propósito aunque con un éxito moderado. Microsoft ha decidido dar un paso al frente y lanzar su propia adaptación, que introduce cambios significativos como el tipado estático, clases, interfaces, etc, con una sintaxis similar a Java. TS no es nada por sí mismo, puesto que su código no se compila ni se interpreta, sino que se traduce a JS. Una vez traducido, estaríamos ante código JS nativo interpretable por cualquier software que lo permita, como un navegador web. Hay ciertas características de TS que son traducibles a JS de una forma más o menos análoga, como las clases. Hay otras, en cambio, que no, como las interfaces, las cuales no generan código alguno, es decir, sólo existen para comprobaciones en tiempo de compilación. TS usa características de ECMAScript 3, 5 y 6. Algunas de ellas las traduce de forma nativa a JS, como los getters y setters implícitos de la ECMAScript 5, y con otras no usa las características nativas de JS, como los módulos de la ECMAScript 6. La ECMAScript 6 describe el uso de módulos como una característica nueva de JS con una sintaxis determinada. Con TS también se pueden usar módulos, pero si lo hacemos podemos observar que no traduce el código a la sintaxis del estándar, sino que ni siquiera hace una traducción. Eso es así para poder usar lo nuevo de la ECMAScript 6 en navegadores no compatibles. Pero no todas están presentes en TS. A su vez posee características propias no determinadas en ECMAScript (por el momento) como los genéricos. No todos los navegadores webs con compatibles con todas las funcionalidades de todos los estándares de ECMAScript, por lo que hay que tener cuidado a la hora escribir nuestro código TS, pues el uso de ciertas características lo haría inejecutable en algunos navegadores. Cada archivo .ts se compila en su homólogo .js, incluyendo en él todo el código traducido de TS a JS. Lo que normalmente conviene hacer es unificar todo el código JS resultante en un solo archivo .js que posteriormente distribuiremos. Además, también se crean de forma automática archivos .maps que relacionan los .ts con los .js. Estos son muy útiles para la depuración del código TS.
Realmente TS no se compila ni se interpreta, sino que se traduce.
Programación Estructurada con TypeScript. (Ejercicios).
La programación estructurada es un paradigma de programación orientado a mejorar la claridad, calidad y tiempo de desarrollo de un programa de computadora recurriendo únicamente a subrutinas y a tres estructuras de control básicas: secuencia, selección (if y switch) e iteración (bucles for y while); asimismo, se considera innecesario y contraproducente el uso de la transferencia incondicional (GOTO); esta instrucción suele acabar generando el llamado código espagueti, mucho más difícil de seguir y de mantener, además de originar numerosos errores de programación. Surgió en la década de 1960, particularmente del trabajo de Böhm y Jacopini, y un famoso escrito de 1968: «La sentencia goto, considerada perjudicial», de Edsger Dijkstra. Sus postulados se verían reforzados, a nivel teórico, por el teorema del programa estructurado y, a nivel práctico, por la aparición de lenguajes como ALGOL, dotado de estructuras de control consistentes y bien formadas. Teorema del programa estructurado. El teorema del programa estructurado es un resultado en la teoría de lenguajes de programación. Establece que toda función computable puede ser implementada en un lenguaje de programación que combine sólo tres estructuras lógicas. Esas tres formas (también llamadas estructuras de control) específicamente son: Secuencia: ejecución de una instrucción tras otra. Selección: ejecución de una de dos instrucciones (o conjuntos), según el valor de una variable booleana. Iteración: ejecución de una instrucción (o conjunto) mientras una variable booleana sea 'verdadera'. Esta estructura lógica también se conoce como ciclo o bucle. Este teorema demuestra que la instrucción GOTO no es estrictamente necesaria y que para todo programa que la utilice existe otro equivalente que no hace uso de dicha instrucción. Los científicos de la computación usualmente acreditan el teorema a un artículo de 1966 escrito por Corrado Böhm y Giuseppe Jacopini. Sin embargo,
Recursión: una declaración se ejecuta llamándose repetidamente a sí misma hasta que se cumplen las condiciones de terminación. Si bien en la práctica son similares a los bucles iterativos, los bucles recursivos pueden ser más eficientes desde el punto de vista computacional y se implementan de manera diferente como una pila en cascada. Subrutinas: Subrutinas: Las unidades a las que se puede llamar, como procedimientos, funciones, métodos o subprogramas, se utilizan para permitir que una sola declaración haga referencia a una secuencia. Bloques Los Bloques se utilizan para permitir que grupos de declaraciones se traten como si fueran una sola declaración. Los lenguajes "estructurados en bloques" tienen una sintaxis para encerrar estructuras de alguna manera formal, como una declaración if entre paréntesis. if..fi como en ALGOL 68, o una sección de código entre corchetes BEGIN..END, como en PL/I y Pascal, sangría de espacio en blanco como en Python, o las llaves {...} de C y muchos lenguajes posteriores. Fundamentación teórica El teorema del programa estructurado proporciona la base teórica de la programación estructurada. Señala que la combinación de las tres estructuras básicas, secuencia, selección e iteración, son suficientes para expresar cualquier función computable. Esta observación no se originó con el movimiento de la programación estructurada. Estas estructuras son suficientes para describir el ciclo de instrucción de una unidad central de procesamiento, así como el funcionamiento de una máquina de Turing. Por lo tanto, un procesador siempre está ejecutando un «programa estructurado» en este sentido, incluso si las instrucciones que lee de la memoria no son parte de un programa estructurado. Ventajas de la programación estructurada. Entre las ventajas de la programación estructurada sobre el modelo anterior (hoy llamado despectivamente código espagueti), cabe citar las siguientes:
Los programas son más fáciles de entender, pueden ser leídos de forma secuencial y no hay necesidad de tener que rastrear saltos de líneas (GOTO) dentro de los bloques de código para intentar entender la lógica interna. La estructura de los programas es clara, puesto que las instrucciones están más ligadas o relacionadas entre sí. Se optimiza el esfuerzo en las fases de pruebas y depuración. El seguimiento de los fallos o errores del programa (debugging), y con él su detección y corrección, se facilita enormemente. Se reducen los costos de mantenimiento. Análogamente a la depuración, durante la fase de mantenimiento, modificar o extender los programas resulta más fácil. Los programas son más sencillos y más rápidos de confeccionar. Se incrementa el rendimiento de los programadores. Sequence en TypeScript. Las Variables: Las variables en TS sirven para lo mismo que en todos los lenguajes de programación: para almacenar información. Y como su nombre indica pueden variar su contenido durante toda la ejecución del programa. Para crearlas se utiliza la palabra clave var seguido de un nombre identificativo. A esto se le llama declarar una variable. var nombre; Puedes declarar una variable en cualquier momento. Aunque lo más recomendable es que se declaren todas antes de empezar la lógica que estemos desarrollando. De esta forma conseguiremos un código mejor estructurado y legible. Nombres de variables Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo). Además el primer carácter no puede ser un número. Ejemplos correctos de variables: var variable1;
El futuro estándar añade un nuevo operador llamado let que permite la declaración de variables de ámbito de bloque. TS no da soporte a este operador. var nombre; /* Es accesible desde cualquier parte / function ambito(): void { var apellidos; / Sólo es accesible en la función / nombre = "Carlos" / Podemos acceder a nombre */ } Constantes. En contraposición a las variables están las constantes, que como su nombre indica, no se les pueden modificar su valor una vez inicializadas. TS no da soporte a constantes como tal. Aunque se puede simular en algunas circunstancias. Variables con tipo Un tipo identifica lo que almacena una variable. No es lo mismo un número que una letra. Las variables en TS son estáticamente tipadas. Esto quiere decir que a la hora declararla podemos establecer qué tipo de datos contiene. La sintaxis para tipar una variable es la siguiente: var variable: tipo; Podemos obviarlo ya que si no lo hacemos se hará de forma automática por inferencia. Mi recomendación es que se haga para aproximarnos a la forma de trabajar de muchos otros lenguajes. Todos los tipos provienen de uno superior llamado Any. El tipo Any se refiere a cualquier cosa. Si declaramos una variable sin tipar sería lo mismo que hacerlo con Any. var variable: any; var variable;
Esto hará que podamos asignarle cualquier dato: numérico, caracteres, etc. Tipos primitivos y envoltura
- Nota: Las especificaciones técnicas de TS no diferencian explícitamente los primitivos de los envoltura. Se van a presentar de esta forma más cercana a Java para una mejor compresión. Los tipos primitivos son los elementales que nos proporciona un lenguaje de programación y cuyos valores son guardados en la posición de memoria que se le asigna. A su vez tenemos los tipos envoltura (wrapper en inglés) que no son más que clases que se han construido alrededor de estos primitivos para dotarlos de más funcionalidades. En TS los tipos primitivos y los envoltura poseen el mismo nombre pero con la diferencia de que estos últimos se escriben con la primera letra en mayúsculas. Primitivo Envoltura Uso number Number Números: enteros y decimales string String Caracteres o cadenas boolean Boolean Sólo admiten true o false Si declaramos una variable con un tipo primitivo, no la podemos inicializar con el tipo envoltura aunque sí se puede hacer lo inverso. var variable1: Boolean = new Boolean(true); // Legal var variable2: boolean = variable1; // Ilegal boolean/Boolean var variable3: boolean = true; // Legal var variable4: Boolean = variable3; // Legal
JS no tipamos la variable, podemos inicializarla con el primitivo o el envoltura. ¿Cuándo usar uno u otro? Vayamos por partes: Con respecto a number/Number , con el primero se pueden usar los operadores aritméticos y con el segundo no. Es algo exclusivo de TS ya que en JS es perfectamente válido por lo que estamos ante otra comprobación en tiempo de compilación. Esto supone un gran inconveniente. var x: Number = new Number(1); var y: Number = new Number(1); var z: Number = x + y; // Error Para los tipos boolean/Boolean y string/String la elección es más complicada. No existen diferencias más allá de las incompatibilidades de inicialización. Pero teniendo en cuenta que es preferible usar number a Number, son recomendables boolean y string para conseguir coherencia en el código. Además los primitivos también nos permiten usar los métodos útiles que incorporan los tipos envoltura por lo que no perdemos funcionalidad. Esto es así porque JS hace una conversión de tipos. Lo hace en una fracción de segundo sin que nos demos cuenta de ello. A su vez también hace lo inverso, convertir los envoltura a primitivos. Eso es necesario para poder usar lo operadores aritméticos. Pero aunque JS lo permita, TS lo comprueba en tiempo de compilación y lo muestra como un error. Si queremos obtener el valor primitivo de un envoltura debemos usar el método valueOf(): var envoltura:String = new String("cadena envoltura"); var primitivo = envoltura.valueOf(); Ese método devuelve el tipo Object de TS var envoltura:String = new String("cadena envoltura"); var primitivo:Object = envoltura.valueOf(); // Correcto var primitivo2:string = envoltura.valueOf(); // Error
Si queremos hacer cálculos con Number lo más fácil, en realidad, es convertirlos: var envoltura:Number = new Number(2); var envoltura2: Number = new Number(2); var suma:number = +envoltura + +envoltura2; Otros tipos Void Sólo sirve para determinar que una función no devuelve ningún valor. También se podrían tipar variables con void pero carece de sentido. Null No se puede tipar una variable con Null. Sólo puede ser el valor de la variable. Cualquier tipo de variable puede contener el valor null. Representa valor nulo. var variable: Boolean = null; Undefined Representa variables no inicializadas. También podemos asignar el valor undefined a una variable de cualquier tipo: var variable: Boolean = undefined; Enum Es una forma más amigable de representar los números. enum Animales { Perro, Gato, Conejo }; var perro = Animales.Perro; Perro representaría el 0, Gato el 1 y así sucesivamente. Function En TS, como en JS, una función también es un objeto y se puede almacenar como tal. var funcion: Function; Array Los arrays son colecciones de datos. Podemos declarar un array de dos formas:
Es un tipo dinámico. Esto quiere decir que le podemos crear más claves- valor en tiempo de ejecución. var objeto: Object = {}; objeto["clave1"] = "valor1"; Hay que tener en cuenta las claves sólo pueden ser numéricas o cadenas de caracteres. El campo valor, sin embargo, puede ser de cualquier tipo. Tipos nombrados y referencia Podemos crear nuestros propios tipos de datos con clases, interfaces o enumerados. Es una característica básica de la programación orientada a objetos. Se les suele dar el nombre de tipos referencia aunque en TS obtienen este nombre cuando son usados. Si sólo los hemos creado se les llama tipos nombrados (Named Types). En este grupo entran los tipos envoltura pues son realmente clases para manejar con más facilidad los tipos primitivos. Inferencia de tipos Inferir, según la RAE se define como: “Sacar una consecuencia o deducir algo de otra cosa”. En este sentido se refiere a la capacidad de deducción del compilador a la hora de asignar tipos de forma automática a variables no tipadas explícitamente, según ciertas circunstancias. Inferencia básica Es la que ocurre cuando “se nos olvida” tipar una variable que hemos inicializado. var cadena = "inferencia"; El compilador tipa de forma automática la variable cadena porque sabe que su contenido es un string. Si inicializamos de forma literal, la inferencia del tipo será de primitivos. Si inicializamos con el constructor de las clases de envoltura, la inferencia será del tipo de la envoltura. var x = 3; // Tipado con number var y = new Number(3); // Tipado con Number
Expresiones tipadas por el contexto El tipado contextual es una característica de TS que nos ahorra cierto trabajo. Si tenemos una función: var func: (x: number) => string = (x) => "func"; En la inicialización de la función no hemos especificado el tipo del parámetro pero no haría falta porque TS, gracias al tipado contextual, sabe que es un number. Esto también ocurre en el sentido contrario: var func = (x: number) => "func"; Ahora no hemos especificado nada a la hora de definir la función pero, de nuevo, TS sabe reconstruir la definición a partir de la inicialización. Si no lo hacemos ni en un lado ni en otro, es imposible para TS saber de qué se trata por lo que lo tipa con Any. var func = (x) => "func"; El mejor tipo común Hay situaciones en las no hemos tipado un array y lo hemos rellenado de valores de distinto tipo: var x = ["uno", null, "dos"]; El compilador, para tipar por inferencia, elige la mejor opción. En este caso hay dos elecciones posibles: string y Null. Como Null es compatible con cualquier tipo, elige tipar el array con string. En consecuencia x sería un string[] (array de strings). Any como tipo general Si introducimos una variable any en el array, el mejor tipo común será any[] var x: any; var array = [x, "Carlos", true]; // Resultado any[]
class C extends A { } var array = [new B(), new C()]; // B[] Aunque B y C sean subclases de A, al no estar A explícitamente en el array, no puede escogerla como mejor tipo común. typeof Este operador es muy útil pues nos informa del tipo de dato de una variable. El resultado que nos devuelve es un string. var cadena: string = "probando typeof"; // “string” Hay que tener cuidado con esto: var cadena: String = new String("probando typeof"); Si hacemos typeof cadena, el resultado será “object”. ¿Por qué? Pues porque realmente es un object ya que String es una clase de envoltura. La única forma de poder saber el tipo de dato específico es inicializando las variables literalmente. No importa si tipas la variable con string o String, lo importante es lo que le asignes. Devolverá string: var cadena1: String = "probando typeof"; var cadena2: string = "probando typeof"; Devolverá object var cadena: String = new String("probando typeof"); Esto es aplicable no sólo a String, sino a todos los demás como Number, Boolean… Con este operador también podemos tipar una variable con el tipo de otra. Es lo que se conoce en TS como tipos consulta. var x: number = 5; var z: typeof x = 2; Incluso lo podemos hacer por inferencia. var x = 5;
var z: typeof x = 2; Aunque no hayamos especificado el tipo de x, el intérprete sabe que es del tipo number por lo que podemos hacer que z sea de ese tipo. El uso de la memoria Los valores primitivos son alojados en una zona de la memoria directamente. Los tipos referencia, sin embargo, reservan un espacio de memoria cuya dirección se almacena en esa variable. En ese espacio se guardan otras direcciones de memoria que apuntan a los atributos. Hay que tener en cuenta que el propio lenguaje puede ofrecer tipos de datos referencia como, por ejemplo, los envoltura: String, Number o Boolean. Esto tiene consecuencias como la comparación de objetos o el paso de los mismos como argumentos de funciones. Operadores. Operadores unarios Los operadores unarios son aquéllos que sólo necesitan un operando para poder ser usados. Operadores ++ y -- Sólo para Any, number y enum. Son los llamados incremento (++) y decremento (--). Sirven para sumar o restar una unidad a un número. A su vez, dependiendo de dónde lo escribamos, pueden ser preincremento/predecremento o postincremento/postdecremento. var num: number = 0; Y le hacemos un postincremento: num++ // 1 Lo mismo ocurriría si hacemos: ++num // 1 La diferencia entre el pre y post, es el orden. En pre, primero se ejecuta el operador.
