TypeScript Dia 2 - Gramática y Sintáxis

Vídeo Guía

Vídeo 2: Typescript Dia 2- Gramática y Sintaxis

hola a todos y bienvenidos a este segundo vídeo sobre Typescript, en esta ocasión vamos a hablar sobre toda la gramática y la sintaxis de Typescript, vamos a hablar desde tipos de datos, tipos dinámicos, objetos, namespaces, módulos entre otros, espero que sea de su total agrado.

Empecemos hablando sobre inferencia de tipos

alt text

En este slide pueden ver como declaramos una variable con la palabra var, luego le ponemos un nombre a esa variable y finalmente la setiamos, en este caso esta variable es de tipo number pero es porque Typescript infiere a partir del valor, cual es el tipo de dato.
Ahora hablemos sobre anotaciones, o simplemente digamos definir el tipo

alt text

entonces se define un tipo simplemente después del nombre de la variable dos puntos y un tipo, ese tipo puede ser number, puede ser String, puede ser date por ejemplo o pueden ser objetos también, objetos que nosotros mismos definamos y luego se pueda asignar un valor.
Veamos algunos ejemplos:
Primero var any1 simplemente es una variable que puede ser de cuarto tipo

alt text

El segundo es var num1 : number estamos definiendo explícitamente el tipo;

alt text

El tercer ejemplo var num2 : number = 2 estamos definiendo el tipo y setiando el valor;

alt text

En el cuarto es inferencia de tipos, estamos diciendo var num3 = 3 pero no estamos definiendo el tipo, entonces Typescript infiere que esa variable es de tipo number;

alt text

En el cuarto estamos haciendo lo mismo, pero tambien estamos haciendo una operación, una suma entre dos números entonces en num4 viene siendo un numero;

alt text

En el quinto estamos sumando un numero con un string, entonces Typescript infiere que es una concatenación, estamos juntando dos strings, un string es string, el otro es un numero pero Typescript convierte en string

alt text

Y por ultimo tenemos una variable que explícitamente estamos definiendo que es de tipo numero, le asignamos un valor que es la suma de un numero, mas un string en este caso habría un error de compilación.

alt text

Veamos algunos ejemplos:

  1. Entonces tenemos aquí un namespace que lo vamos a ver mas adelante
  2. Declaramos una variable x con un valor 1 esto es inferencia de datos
  3. Luego declaramos una variable y sin anotaciones y sin setiar un valor, osea que es de tipo any
  4. Luego declaramos una variable firstname y le asignamos un String, aquí también hay inferencia de tipo Datos porqalt textue sería un String
  5. Luego declaramos una variable de tipo lastName le ponemos la anotación de tipo string ósea que explícitamente un String
  6. Luego la variable num1= 100 inferencia de datos nuevamente, luego la variable num2 con anotación de tipo, entonces el tipo de datos esta explicito
  7. Por ultimo tenemos una función en la que recibimos tres variables, estas tres variables están con anotaciones es decir explícitamente debemos recibir números, de lo contrario esto sería un error de compilación.

alt text

Entonces simplemente este no me deja asignar ese tipo porque la variable o el valor sdas no se puede asignar a un tipo número

alt text

Lo mismo aquí, así tenga un valor numérico pero esta con la comilla entonces no es permitido. Eso es todo lo que tiene que ver con la gramática de los datos, anotaciones e inferencias

Tipos de datos Dinámicos y Estáticos

Hablemos sobre tipos de datos dinámicos y estáticos. En Javascript es 100 por ciento tipo de datos dinámicos, en Typescript es estáticos pero es opcional igual podemos declarar variables sin definir el tipo, lo bueno de Typescript con respecto a Javascript es que es la seguridad del tipo a la hora de compilar entonces digamos que el compilador nos avisa, nos da los errores cuando estoy tratando de setiar variables que no son del tipo adecuado mientras que en Javascript es type safety ocurre en tipo de ejecución o depuración.
Entonces veamos un ejemplo, ya lo habíamos visto antes, pero aquí vamos a suponer que la persona es cualquier tipo entonces

alt text

var person en este caso es un any pero podría ser un objeto, le asignamos un string y luego podemos hacer un substring sobre esa variable sobre ese objeto, luego le asignamos un 1, ese 1 por inferencia es un número y si intento hacerle un substring a un número, obviamente me va a salir un error, porque el método substring no existe en el tipo de datos number.
Y hablando un poco de declaraciones de ambiente en Typescript existen los que son los archivos typings, esos archivos typings definen y nos ayudan con el intellisense a la hora de escribir nuestro código

alt text

entonces por aquí tenemos declare var document, en Typescript el linb.d.ts es referenciado por defecto y contiene toda la referencias para el document object model y JavaScript, ósea todas las variables que son document, window, y todo lo que sea como del navegador o cosas globales de JavaScript las tendremos por defecto y podemos utilizarla en nuestro código sin hacer una referencia explícita al archivo de typings, si vamos a utilizar otro como jquery o nodecode tenemos que referenciar explícitamente ese archivo.

alt text

En JavaScript simplemente utilizamos document. Title sin necesidad de declarar la variable como tal porque ya está en el contexto.
Aquí tenemos un ejemplo con Jquery

alt text

Entonces en la parte izquierda referenciamos jquery.d.ts luego declaramos una variable con el nombre pesos que todos sabemos en Jquery que el nombre pesos es document y simplemente a partir de ahí podemos utilizar dentro de Typescript, Jquery como si fuera JavaScript común y corriente ósea no hay ninguna complejidad la única diferencia es hacer la referencia, en la parte derecha lo vemos con JavaScript y no tenemos que hacer nada adicional simplemente declaramos una variable y luego setiamos esa variable con el signo pesos div en un texbox en un input Field.
Y por ultimo también podemos representar cualquier variable con el tipo any, el tipo any es de cualquier tipo pero explicito entonces

alt text

En este caso estamos diciendo que data es de tipo any, entonces Typescript no va hacer chequeos de tipos de dato cuando le estemos asignando valores a esta variable.
Entonces veamos unos ejemplos, por ejemplo en dynamic types exactamente lo que teníamos en la diapositiva,

alt text

Entonces tenemos una variable persona de tipo any

alt text

Luego le asignamos un valor que Typescript infiere que es un string, luego hacemos un substring sobre ese tipo y esto no va a devolver un error.

alt text

Luego hacemos o le asignamos el valor 1 qe es de tipo number si intentamos hacer un substring en ese momento sacaría un error.

alt text

Luego declaramos un objeto con el mismo nombre person pero en este caso es un objeto complejo porque tiene dos campos, en el campo name, tiene el campo age y si intentamos hacer un substring también nos generaria un warning.

Con respecto a las declaraciones de ambiente,

alt text

Entonces aquí estamos referenciando dentro de typings knockout y miren que simplemente asignamos una variable ko, el tipo knockout Static que es una interface, con click derecho y la definición podemos ir a ver lo que hay en ese archivo typings

alt text

Es decir todos los métodos, todas las propiedades, todos los campos que podemos utilizar y esto nos ayuda enormemente a la hora de escribir el código con el intellisense, declarations este es el archivo javascript ya convertido

alt text

miren que aquí estamos utilizando la variable ko y utilizamos métodos por ejemplo ko.observable y a ver que más tenemos por aca, miren que por acá, miren que por acá declaramos un objeto llamado guy con dos campos y luego simplemente podemos obtener el valor de uno de los campos con el valor guy.fullname y el me trae el valor. Que más les puedo mostrar, creo que esto es todo por este capítulo, en el siguiente video empezaremos a hablar sobre esto.

Tipos de Datos Primitivos

Ahora vamos a hablar un poco sobre tipos de datos primitivos, en Typescript existe obviamente el number, el boolean y el string, esto ya lo habíamos visto como definir una variable de un tipo especifico que es simplemente el nombre de la variable dos puntos y el tipo que puede ser number, boolean o string

alt text

Arreglos e Indexers

Hablando sobre arreglos e indexers entonces en Typescript también podemos crear arreglos simplemente poner el nombre de la variable dos puntos el tipo y luego con los corchetes define que es un array , entonces de esta manera estamos definiendo que John, Dan, Aaron y Fritz son objetos de un arreglo de strinngs y luego en la parte inferior como en otros lenguajes de programacion simplemente con los corchetes y el numero obtenemos uno de los valores, este nnumero es en base 0 osea que cero traería el primer objeto de ese arreglo.

alt text

Tipos Primitivos - Null

Todos los tipos de Datos pueden asignar a null entonces asi sean tipados y no tipados es var num : number igual a null lo mismo va a ser igual con el string, va a ser igual con boolean o lo podemos igual hacer con tipos de datos, predefinidos por nosotros por ejemplo customer que vendría siendo un objeto desarrrollado por nosotros. Tambien podemos definir un undefined, es importante que sepan que null de por si es un tipo y es un subtipo de todos los primitivos excepto void y undefined.

alt text

Tipos Primitivos - Undefined

alt text

Undefined también lo podemos definir pues también lo podemos asignar como si fuera un valor pero undefined a su vez es un tipo de todos los tipos, es un subtipo de todos los tipos.

Ahora veamos ejemplos

alt text

Entonces tenemos una variable de nombre data y que puede ser de tipo any, tenemos una variable info y tenemos una variable dosomething que es de tipo function y luego tenemos una variable val que va a traer lo que retorne function, en este caso retorna arg y como arg no esta definido es de tipo any entonces este var si ustedes ponen el mouse encima sobre Typescript entonces es de tipo any.

alt text

Luego en la parte inferior declaramos variables age de tipo number, score de tipo number, hasData de tipo boolean isBald de tipo function y podemos utilizar esas variables de tipo function para asignarles su valor de retorno a otra function por ejemplo hasHair es diferente diferente a isBald lo esta negando doblemente

alt text

Luego en la parte inferior vemos como declaramos una variable de tipo arreglos de string y setiamos su valor con corchetes donde el primer dato es John, el segundo Dan, el tercero es Aaron y el cuarto Fritz.

alt text

Luego en la parte inferior vemos como a cualquier tipo de datos incluyendo el any podemos asignarle el valor nulo o incluso al tipo de dato Customer que vendría a ser como una especie de objeto que en este momento no lo estamos definiendo que objeto también se le puede asignar el valor null.

alt text

y lo mismo podemos hacer con undefined, entonces undefined no es lo mismo que null, también se le puede asignar a las variables como tal.

alt text

Tipos de Objetos

Ahora vamos a hablar sobre tipos de objetos o variables de tipo object, también podemos decirlo así entonces una variable puede ser de tipo function, puede ser del tipo de una clase, un módulo, una interface e incluso tipos literales, esos objetos podría por contener propiedades que son públicos o privados de estas propiedades podrían ser requeridas o opcionales y en la parte de las firmas de esos métodos podríamos tener constructores, podríamos tener funciones e indexers como tal. Entonces unos ejemplos sencillos var square y luego este objeto tiene dos campos con dos propiedades que son h y w, luego tenemos una variable points que explícitamente le estamos diciendo que es un object donde hay dos propiedades x y y, en el tercer ejemplo estamos viendo una variable multiply que es de tipo function, simplemente le estamos declarando a una variable una function que podríamos utilizar mas adelante, luego en la parte inferior estamos utilizando otra variable multiplymore le estamos diciendo explícitamente que el tipo es un function y en la segunda línea le estamos diciendo que multiplymore es igual a tal function,

alt text

Viéndolo un poco mas en el detalle en el código entonces tenemos estos dos ejemplos que ya habíamos visto en el slide, en el tercero estamos definiendo una variable de tipo object con variables x y y pero como es un tipo object también puedo asignar ese pointstring a otros digamos a un objeto con otras propiedades diferentes por ejemplo full, en el cuarto ejemplo tenemos una variable rectángulo que va a tener varias propiedades, tiene h tiene w y a su vez tiene una función que se llama calcular área

alt text

En la parte inferior vemos como a una variable SquareIt le asignamos una función, mas adelante vemos la misma variable, simplemente que la función declaramos parámetros de entrada o de entrada tipados es decir de tipo number como tal.

alt text

Miren este que es bastante especial squareIt le declaramos que es de tipo function y a function le vamos a ingresar como parámetro un objeto rect que tiene dos propiedades 2 number perdón h y w, h es de tipo number y es obligatorio y w tiene este signo de interrogación es de tipo number no es obligatorio es decir yo podría llamar a esta función con este ejemplo que ven en la parte inferior squareIt y solamente le mando h, o le mando h y w como en la parte inferior, esto es todo con respecto a la declaración de variables de tipo object.

alt text

Funciones

Ahora vamos a hablar de funciones, entonces las funciones tienen parámetros, esos parámetros pueden ser tipados y no tipados, pueden ser requeridos y opcionales , también existen funciones de tipo arrow o expresiones de funciones de tipo arrow es decir que en una sola línea podemos declarar la función y el cuerpo de esta función, entonces en algunas funciones que son sencillas esto hace el código mas curtido y mas fácil de leer, recuerden que también hay funciones con su tipo de retorno que puede ser void.
Entonces en la parte superior vemos una función típica de Typescript donde tiene dos variables, de dos parámetros de entrada tipados como number,
En la parte inferior vemso como podemos hacer una variable de tipo arrow, una función de tipo arrow, es decir como si fuera una expresión land de C Sharp donde declaramos la función, lee lo parámetros, luego con la flecha. El es igual y el signo mayor que definimos el cuerp, h por w entonces no tenemos que escribir ni las llaves, ni el return entonces se simplifica bastante.

alt text

Void

Recuerden que void como tal es un tipo de datos que se retorna. Lo podemos definir,en este caso la función Greetme recibe un string de nombre msg pero no retorna nada, entonces es importante a la hora de declarar nuestras funciones

alt text

Y por último, antes de empezar a mostrar digamos que el código de este semi capitulo es importante que sepan que todo Javascript puede ser puesto dentro de un Typescript, en el primer vídeo de este modulo lo habíamos hecho, cualquier código que yo escirba en Javascript puedo copiarlo y pegarlo dentro de un archivo .ts entoccnes es importante.

alt text

Ahora vamos a entrar al código, hablemos sobre funciones, entonces tenemos por aquí una función la misma del slide y luego en una sola línea definimos el cuerpo con este array function o array expresión.

alt text

Luego tenemos lo mismo aquí la variable helloworld que es de tipo function, no la tenemos explicito pero recibe un string que es opcional por el signo de interrogación y retorna void, entonces miren que podemos hacer el hello world con un parámetro de entrada o heloworld sin ese parámetro de entrada,

alt text

Luego tenemos lo mismo el SquareIt es una función que recibe un objeto rect el cual debe tener un tipo number h y opcionalmente un tipo w que es también un number y devuelve un number.

alt text

Ahora si pasamos digamos que a las funciones pero al hablar de interfaces entonces tenemos por ejemplo una interface que es Squaring function y va a tener una función que devuelve number, aquí tenemos a SquareIt basic que es de tipo function y es igual a el parámetro de entrada y el cuerpo de esa función seria num por num.

alt text

Tenemos aquí otra interface de nombre rectángulo que tiene un number obligatorio y otro number w que es opcional, enn vez de declarar como lo habíamos visto en el slide un objeto rectángulo que recibe un objeto de objetos dentro del objeto que es w ya lo p podemos hacer por medio de la interface, entonces miren que aaca este tipo de dAtos de parámetro de entrada es una interface, entonces luego podemos declarar variables de tipo de esa interface donde asignamos el valor h y opcional el w lo tenemos en el segundo ejemplo tenemos h y w explícitamente,

alt text

Mas abajo tenemos una interface de tipo persona, es importante que ustedes sepan asignar como en Csharp o Java las interfaces pueden tener propiedades pero también pueden tener funciones y luego declaramos un objeto p de tipo persona donde setiamos todos los métodos, todas las propiedades perdón de ese objeto y también declaramos las funciones aquí simplemente las estamos haciendo que la firma ya aquí estamos diciendo como se calcula esa función que es lo que tiene que hacer esa función en especifico.

alt text

alt text

luego podemos declarar un objeto de tipo pet y podemos utilizar esas funciones como tal calcular pets. Aquí hay inferencia de datos porque no estamos diciendo que pets es de tipo person en este caso pero como p es de tipo person entonces simplemente hay inferencia, entonces vean que aquí podemos llamar otras funciones dentro de ese mismo objeto,

alt text

Lo mismo aquí tenemos una interface de nombre SessionEval con dos funciones writing and calculatewriting y luego podemos digamos que crear una función cuyo tipos de datos de retorno es excepción eval y dentro de la función vamos a implementar esas funciones como tal.

alt text

más adelante declaramos una variable s de tipo excepcionevaluator donde podemos utilizar los métodos que acabamos de sobreescribir y escribir los datos en el log o en laconsola digamoslo asi.

alt text

Esto es todo respecto a la gramática la sintaxis , ya con esto digamos que podemos empezar a escribir programas completos como lo hacíamos en Csharp desde el punto de vista de la estructura, es decir desde declarar los pocos es decir todos los objetos, todos los tipos declarar funciones declarar al namespace no lo vemos en este, pero lo vamos a ver mas adelante, podemos ya crear funciones con su tipos de datos específicos, a veces los parámetros pueden ser opcionales, ya sabemos como declarar interfaces con propiedades y funciones que luego van a ser implementadas dentro de un objeto que implemente la interface como tal, hablamos sobre tipo de datos dinámicos, sobre la gramática, sobre los tipo de datos primitivos, hablamos sobre objetos tipados o de tipo object como tal creo que en este capitulo queda bastante claro toda la sintaxis espero que les haya gustado y nos veremos en el capitulo 3 de Typescript. Recuerden que esto es un vídeo de toda la serie de volviéndonos expertos en Sharepoint Framework donde la primera serie era utilizar VS CODE desde cero, la segunda serie que es esta Typescript, este e el segundo vídeo de la serie, luego vendrá otra serie que será React y por ultimo nos concentraremos en Sharepoint Framework como tal