Introducción práctica al Javascript (JS) y al Typescript (TS)

1. Descripción del curso: Hola a todos, gracias por acompañarme. Esta es la descripción general del curso para JavaScripts prácticos y TypeScript. Entonces, ¿por qué deberías aprender TypeScript o JavaScript? Es un lenguaje muy, muy versátil y de uso común. Por lo tanto, es utilizado por los desarrolladores de back-end para crear lógica del lado del servidor. También es utilizado por la mayoría de los sitios web front-end. Por lo que es utilizado por los desarrolladores front-end para crear sitios web y aplicaciones. Y eso incluye las aplicaciones móviles. Y es comúnmente utilizado por todos los desarrolladores para el scripting. Entonces, ¿qué es JavaScript? Javascript es un lenguaje mecanografiado dinámicamente, entonces eso significa que no hay ninguna comprobación de tipo en la muestra de código. Verás, verás que estamos declarando una variable llamada a. estamos asignando a, que es un número. Pero entonces también puedes ver que puedes asignarlo a una cadena. Esto quiere decir que el lenguaje es muy, muy flexible. Y eso es bueno por varias razones porque te permite iterar y escribir código muy rápido. Pero puede causar muchos problemas, sobre todo en bases de código grandes. Entonces algo como esto. Digamos que quieres decir que una constante b es igual a a veces a. Digamos que esto está en alguna parte separada del código. Ahora bien, esto va a estar bien si a es un número, así puedes multiplicar dos por cualquier número. Pero y si a es una cadena, entonces esto arrojará un error y no sabrás que hay un error hasta realmente ejecutes ese trozo de código. Entonces ingrese TypeScript. Typescript es esencialmente una capa de tipo estático que se encuentra por encima de JavaScript. Mejoró JavaScript al agregar ese tipo de comprobación, que lo hace más resistente a los errores y facilita la resolución de problemas. Entonces, por ejemplo, en TypeScript, declararías una constante a, que es hola, una cadena. Y verás que esto es muy, muy similar a cómo se ve el código JavaScript. Pero digamos que intentas declarar otra constante, tal vez en alguna otra parte del código base llamada b. Y dices, bien, B es ocho veces dos. Esto realmente arrojará un error incluso antes de ejecutar el código. Entonces sabes de inmediato que esto no va a funcionar y que debes arreglar el error que te atrapó antes de que lo necesites para empujar algo, digamos a la producción. Creo que es la razón principal para querer aprender TypeScript con JavaScript y usar una TypeScript. primer enfoque es que base del código moderno utiliza casi exclusivamente TypeScript. Si vas a trabajar en la mayoría de las empresas, sus bases de código, ya habremos hecho la transición a TypeScript. Javascript realmente está empezando a convertirse en una reliquia del pasado. Entonces claro, metas. Quiero que aprendas a codificar, no a memorizar. Google existe por una razón. Y como desarrollador, estarás usando Google el tiempo. Estarás usando StackOverflow todo el tiempo. El objetivo de aprender a programar no es memorizar todo el conjunto de documentación para un idioma específico o para una API específica que estés usando. Un buen desarrollador puede descomponer un problema complejo en pedacitos que puedes resolver poco a poco. Entonces pueden resolver estas piezas utilizando conocimientos fundamentales. Entonces esto es lo que les voy a enseñar chicos dentro de este curso. Y un buen desarrollador también puede referirse a la documentación. Cuando me refiero a la documentación todo el tiempo, uso Google todo el tiempo. Eso es lo que debes esperar hacer. Creo que tú, como desarrollador, conviertes en el más valioso cuando sabes resolver problemas, no cuando aprendes a memorizar. Entonces, en conclusión, el objetivo de este curso es equiparte con los fundamentos y enseñarte a pensar como programador, cómo resolver problemas y cómo abordarlos usando conocimientos muy fundamentales que aprenderás a lo largo de este curso. Para mantener las cosas simples, para la mayoría de los ejercicios, usaremos un patio de juegos en línea TypeScript. Al final del curso, repasaremos cómo configurar un proyecto real y cómo incorporar dependencias externas. Entonces código que otras personas han escrito para ayudarte a codificar. Vamos a usar TypeScript, lang.org slash play. Es un patio de juegos en línea para el código TypeScript que puedes usar directamente en tu navegador. Y puedes ejecutar el código que escribes directamente en el navegador. Entonces esto significa que no hay que configurar nada en este momento. Puedes escribir todos los ejercicios dentro de este patio de recreo. Entonces te recomiendo que vayas a ese enlace y lo revises y juegues con él. De hecho, lo haremos rápidamente ahora mismo. Al cambiar al enlace, verás que tienes un editor de código bastante básico. Aquí es donde puedes escribir todo tu código. Y viene prepoblado ya con algún código de ejemplo. Entonces verás que no tienes que preocuparte por los detalles. Pero esencialmente aquí mismo, estamos declarando una cadena llamada variable de ejemplo. Le estamos asignando la cadena hola mundo. Y Console.log es una forma de JavaScript o TypeScript para que imprima algo en la consola o en los laboratorios. Entonces verás este pequeño botón de Ejecutar aquí. Si haces clic en ese botón Ejecutar, verás que las orejetas, se imprimirá Hello world. Así que juega con este sitio web. Debería ser bastante sencillo y obtienes un editor de texto bastante básico y usaremos a lo largo del curso. Entonces ustedes en la siguiente. 2. Sintaxis básica: Hola a todos. En esta lección vamos a repasar alguna sintaxis básica de código. Una instrucción en TypeScript es esencialmente un solo comando. Es una cosa que quieres correr a la vez. Y el motor esencialmente se bajó todas las declaraciones y las ejecutó en orden. Por lo general, se terminan con punto y coma. No es necesario, pero es muy buena práctica hacerlo. Y generalmente separados por nuevas líneas. Similar a usar punto y coma. En realidad no es necesario separar las declaraciones por una nueva línea si son terminadas por un punto y coma. Pero es muy buena práctica terminar siempre las declaraciones por y coma y separar siempre las declaraciones por nuevas líneas. Entonces en este ejemplo que tenemos, verás que en la línea uno, esa es una declaración bastante básica hemos visto antes console.log. Y lo que esto va a hacer es esencialmente imprimir en la consola. Esta línea es una declaración. La línea dos es muy similar. Pero si saltas al número 4.5, verás que si separas las declaraciones por nuevas líneas, en realidad no tienes que terminarlas por punto y coma. Verás que faltan el punto y coma ahí en las líneas 4.5, pero funcionará completamente bien. También puedes voltearlo al revés. Se puede decir en el número siete que puede terminar las declaraciones por punto y coma, pero colocarlas en la misma línea. Entonces la línea número siete es muy válida y solo lo hará console.log. O podemos hacer esto en costo de ese registro, que funciona por el punto y coma. Y este código se ejecutará. Pero veamos la línea número ocho. No estamos usando un punto y coma ni una nueva línea. Entonces esa línea, la línea número ocho en realidad arrojará un error. No se puede ejecutar este archivo porque no se pueden juntar dos declaraciones con las que las separan. Bueno, en realidad puedes usar nuevas líneas a tu favor dentro de una sola declaración. Verás líneas tienden a herramienta que no estamos terminando una declaración entre estas líneas. La sentencia se termina en el punto y coma en la línea número 12, pero se puede insertar una nueva línea para ayudar a la legibilidad. Esto es agradable cuando tienes una declaración muy larga porque puedes dividirlos en trozos grandes que puedes leer muy fácilmente sin que desborde tu pantalla. Entonces, de hecho, saltemos al editor y pongamos esto a prueba. Así que entra en el TypeScript Playground. Vamos a probarlo. Voy a eliminar lo que ya hay y usar console.log. Hola. Veremos que esto realmente va a funcionar si corro. Pero verás que no hay punto y coma. Inserto un punto y coma ahí. Todavía va a correr. Si agrego otra declaración con punto y coma, seguirá funcionando. Y claro que puedo optar por terminar estos con punto y coma y muchas veces es una buena práctica hacerlo. Incluso puedo colocar estas declaraciones en una nueva línea. ¿Por qué? Porque se terminan con punto y coma. Pero si ves eso, si elimino ese primer punto y coma, ahora estás poniendo dos declaraciones en una línea y estás diciendo que ambos console.logs son técnicamente una declaración. Entonces con esto, en realidad levantará la mañana porque hay que terminar esa primera declaración ya sea por punto y coma o por una nueva línea. Entonces verás que si pasas el cursor sobre, verás que se espera un punto y coma. Y en realidad te ayuda a resolver el problema. Mediante la inserción de un punto y coma. Ya has resuelto ese problema. Y ahora puedes ejecutar este archivo. Bien, así que saltando de nuevo a las diapositivas, la siguiente pieza de sintaxis de código básico o comentarios. Estos ayudan, por supuesto, para una mejor legibilidad. Cuando tienes piezas complejas de código, generalmente ingresa comentarios para explicarle a otros desarrolladores y a tu yo futuro lo que estás haciendo. Hay dos formas de relacionarse para escribir un común. Uno. Si tu comentario está en una sola línea, puedes usar dos barras. Y eso denota un comentario sobre la línea única. O si quieres comentar varias líneas, puedes iniciar el comentario usando una barra y un astérix y terminó con un astérix y una barra diagonal. Probemos esto muy rápido. Así que saltando al editor, intenta escribir un comentario. Veamos sobre el editor lo resaltará en verde, diciendo que este es un comentario esencialmente diciéndote, el desarrollador que esto en realidad no hará nada. Cuando lo ejecutes, verás que en realidad nada se imprime en la consola. No hay nada nuevo que se esté imprimiendo la consola porque este guión en realidad no está haciendo nada. Probemos ahora un comentario de bloque. Entonces estoy empezando con un slash y el astérix. Puedo escribir lo que quiera aquí. Y siempre que quiera terminar con eso, hago el astérix y el slash. Entonces eso es esencialmente en términos de sintaxis básica del código, las dos piezas más fundamentales son realmente declaraciones y comentarios. Entonces los ejercicios para esto serán bastante breves. Primero, intente usar el registro de la consola. Entonces, en el patio de recreo, intenta registrar HelloWorld e intenta registrar el número 42. Lo bueno del registro de la consola es que en realidad pueden registrar la mayoría de las cosas. Así que no tienes que hacer ningún juego con cuerdas como podrías hacer con otro idioma. Se pueden poner 42 directamente en los registros de la consola. Así que pruébalo. A continuación, intente escribir un comentario de una sola línea y un comentario de bloque. Entonces un comentario de bloque significa comentario de múltiples líneas. Pruébalo. Házmelo saber si tienen alguna duda y los veré chicos en la siguiente. 3. Introducción a los primitivos: Hola chicos, bienvenidos de nuevo. En esta lección vamos a repasar primitivas. primitivos son tipos básicos integrados en el lenguaje. Entonces un ejemplo de una primitiva es el tipo de número, que representa un número por ejemplo dos o 3.5. Y al componer primitivas, eres capaz de crear estructuras más complejas para incorporar a tu programa. Las variables y constantes contienen valores, y a menudo estos valores son estos primitivos. Un valle puede ser casi cualquier cosa. Nuevamente, esto puede incluir primitivas como un número, objeto o una matriz, y estos también pueden contener funciones. Así que vamos a profundizar en todas estas primitivas así como funciones más adelante en el curso. Pero por ahora, solo piensa en una variable y una constante como un nombre para algo que agrupó valor. Se pueden declarar variables y constantes usando var, let o comentarios. De nuevo, vamos a repasar esto más adelante. Cada constante de barra diagonal variable tiene un nombre para que puedas referirte a ella más adelante en tu programa o en algún otro lugar de tu programa. La mayor diferencia entre variables y constantes, como su nombre indica, es que las variables pueden cambiar, mientras que las constantes no pueden. Declaras variables con barra o plomo. Pero de manera realista nunca usarías realmente var. Siempre usa lead y eres libre de Google en todas las diferencias entre declaración con var o let. Pero de manera realista, solo quédate con let y ya estamos listos para irnos. Las variables se pueden reasignar a diferentes valores del mismo tipo. Esto solo es cierto en JavaScript, pero lo es en TypeScript, que es a lo que nos estamos pegando por ahora. Digamos que tienes una variable que contiene el número. Llamemos a esta variable a. se le puede asignar primero y valor de cinco. Y luego más adelante en el programa, se puede reasignarlo a un valor de diez. Las constantes, por otro lado, se definen con const y no pueden ser reasignadas. La regla general es que debes usar constantes a menos que sea absolutamente necesario. Es mucho más fácil depurar tu programa y razonar sobre tu programa si tienes constantes en lugar de variables. ¿Bien? Entonces algunas convenciones de nomenclatura. Las variables y constantes generalmente se nombran en camelCase. Entonces algo así como precio es igual a diez, o FirstName es Frank con nombre en mayúscula. Constantes por otro lado, a veces pueden ser en caso de serpiente mayúscula. Esto es muy raro y realmente no lo veo muy a menudo. Entonces, si te apegas a CamelCase, por lo general, bueno para ir. Entonces, profundicemos rápidamente en algunos ejemplos de declarar variables y usarlas. Bien, así que en el patio de recreo que tenemos aquí, vamos a declarar primero una variable. Una variable, como recordarás, declarada con la palabra clave left. Entonces vamos a darle un nombre. Así que nombrémosle mi variable y le asignemos un valor de diez. Ahora, intentemos registrar myvariable. Y si corro, verás que está registrando décima. Entonces el valor de mi variable es el número diez. Ahora las variables se pueden reasignar, así que intentemos eso. Vamos a asignarlo a 20, y luego volvamos a registrarlo en la consola. ganar el código, verás que diez y luego 20 se imprime en la consola porque el valor de mi variable comienza a las diez y luego se reasigna a 20. Ahora intentemos declarar constantes. Entonces utilizo la palabra clave const, y la nombraré mi constante y vamos a darle un valor de cadena. Entonces un SDF. Intenta registrarlo. Y verás que se imprime un FCF en la consola. Pero intentemos cambiar. Entonces técnicamente, si mi constante es una constante, entonces no deberías poder cambiarla. Pongamos eso a prueba. Verás que obtienes un error. Y si pasas el cursor sobre él, dice, no puedo asignar a mi constante porque es una constante. Y en realidad puedes ejecutar esto. Una rápida demostración de nomenclatura de variables, así como la declaración de variables y constantes con let y const. Bien, volvamos a las diapositivas que concluyen nuestra introducción a las primitivas así como a las variables y constantes. Entonces algunos ejercicios que he dicho aquí, deberían ser bastante sencillos. Dales una oportunidad a esos y siéntete libre de contactar si tienes alguna duda, veré chicos en la siguiente. 4. Primitivos: cuerda: Hola chicos, En esta lección, vamos a repasar nuestra primera primitiva y habrá cadenas. Todas las cadenas son, es un trozo de texto. Se pueden declarar tres vías. Están envueltos por comillas simples, comillas dobles o backticks. Entonces, las comillas simples y las comillas dobles se usan indistintamente. Pero las garrapatas traseras se utilizan para la interpolación de cadenas. Entonces eso significa colocar el valor de otra variable o constante dentro de la propia cadena. En TypeScript, string es un nombre de tipo TypeScript. Vamos a repasar el ejemplo. Así que primero, estamos declarando una variable con la palabra clave let, estamos llamando algunos textos y estamos diciendo que dos puntos y cadena le dice a TypeScript que estamos declarando una variable de cadena. Lo estamos asignando a hola. Y estamos declarando una constante, algún número de 42 que vamos a usar después. Entonces la cadena de dos puntos le dice type script que algunos textos son de tipo string. Pero en realidad si asignas hola de inmediato, no necesitas la cadena de dos puntos porque TypeScript puede inferir que el tipo de algunos textos ya es una cadena porque ya la estás rellenando con un cadena. Porque algunos textos es una variable. Puedes reasignarlo. Puedes reasignarlo al mundo. Por lo que el valor de algunos textos será mundial después de ese punto. Se puede reasignar de nuevo. Y así verás que estamos declarando algunos textos con comillas simples. Lo estamos reasignando con comillas dobles. Y realmente no hay diferencia entre las dos formas de declaración. Pero para la interpolación de cadenas, que es lo que estamos haciendo en la última línea ahí. Estamos usando backticks. Para usar interpolación de cadenas. Lo que haces es envolver tus backticks de tensión y donde quieras que llene el valor de alguna otra variable o constante. Empiezas con el signo del dólar y los dos paréntesis. Verás que estamos poniendo el valor del número de suma dentro de esa cadena. Y si fueras a console.log algunos textos, a diría que algún número es 42 porque estás reemplazando ese signo de dólar y el paréntesis con el número de suma intermedio con el valor real de algún número, que es 42. Ahora vamos a saltar a algunos ejemplos dentro del patio de recreo. Muy bien, entonces ahora intentemos declarar una constante de tipo string y escribir mi pantalla. Y estamos dando un tipo ts de cadena. Estamos dando en variable versus una cadena. Entonces estamos diciendo explícitamente que el tipo de micrófono aquí es cadena. Entonces, si tuviera que reemplazar esto con un número, en realidad verá que este error está fuera diciendo que el número no es asignable para escribir cadena. Pero digamos que lo estás declarando enseguida. En realidad no necesitas la declaración de tipo TypeScript porque TypeScript solo empieza a inferir que el tipo de MyString ya es una cadena porque ya la estás rellenando. Ahora vamos a declarar otra cadena. Solo estamos creando una constante, mi otra cadena con el valor de esto como otra cadena. Intentemos la primavera y la fibrilación. Entonces solo voy a console.log enseguida. De nuevo con interpolación de cadenas, hay que usar backticks. Entonces eso es lo que estoy haciendo aquí. Digo que el primero es que empezamos con el signo del dólar y los dos corchetes angulares es mi cadena. Y luego la segunda es otra cadena. Porque puedo, pienso en lo que se va a imprimir aquí. ¿Cómo funciona la interpolación de cadenas es esa la declaración de dónde interpolar? Entonces, por ejemplo, el signo de dólar con los corchetes y mi cadena será reemplazada en tiempo de ejecución con el valor real. Entonces a medida que pasemos por esa cadena, primero dos puntos, y luego vas a reemplazar el valor de mi pantalla. Se va a leer el primer colon. Esta es una cuerda y lo mismo con la segunda. Intentemos ejecutarlo. Y verás que esto es como esperaríamos. Ahora volvamos a las diapositivas. Muy bien, así concluye la sección sobre cuerdas. Aquí tenemos un ejercicio relacionado con la interpolación de cadenas. Esto en realidad requerirá algo de búsqueda en Google. Quiero que encuentres dos formas diferentes de crear el script de tipo cadena JavaScript con dos constantes separadas. Así que intenta hacer eso y comunícate si tienes alguna duda. Los veré en la siguiente. 5. Primitivos - Boolean: Hola chicos. En esta sección vamos a repasar lo primitivo booleano, booleano o simplemente verdadero o falso. Booleano con la minúscula b es el nombre del tipo de script de tipo. Puedes crear un booleano y convertirlo de otro tipo. Entonces, por ejemplo, puede convertir un número a un verdadero o falso usando el constructor booleano B mayúscula o usando dos signos de exclamación frente a la propia variable. Desafortunadamente, los booleanos pueden llegar a ser bastante complicados en JavaScript y TypeScript. Y nos sumergiremos en esto un poquito más adelante en las diapositivas. Repasemos el ejemplo. Puedes declarar un booleano como lo harías con cualquier variable simplemente dándole el nombre de tipo o incluso omitiendo el nombre de tipo si lo estás asignando a un verdadero o falso de inmediato. Entonces en las líneas 2.3, verás que estamos declarando un booleano como lo harías con cualquier otra variable. Por supuesto, el nombre del tipo es opcional si estás asignando un verdadero o verdadero o falso de inmediato. En las líneas 6.7, sin embargo, las cosas sí se ponen bastante interesantes. Verás que en realidad podemos lanzar un booleano de otro tipo. Y eso significa que estás convirtiendo un tipo al tipo booleano. Entonces verás que si console.log booleano de dos, es cierto, pero un booleano de cero es falso. Entonces esto es realmente muy raro y no es similar a otros lenguajes donde un booleano es simplemente un verdadero o falso en TypeScript en JavaScript, realidad puedes convertir un booleano de otro tipo. Y hay algunos casos de borde muy raros que encontrarás en línea y también repasaremos algunos de ellos más adelante en las diapositivas. Sin embargo, por el bien de los números, debes saber que cualquier otro número además de cero se convertirá en verdadero y solo cero se convertirá en falso. Similar a otros idiomas, puedes crear un booleano usando una comparación. Entonces, por ejemplo, las líneas 1.2 es bastante simple, ¿verdad? Dices que es para mayores de dos y claro que eso es cierto. Es cuatro menos o igual a dos, y eso es falso. Pero si console.log es cuatro igual a la cadena cuatro, verás que en realidad imprime true. Lo cual puede ser un poco contrario a la intuición porque no pensarías que un número cuatro es igual a la cadena para. Pero de alguna manera esto es cierto en TypeScript. Por lo que esto nos lleva al tema de la estricta igualdad. A diferencia de otros idiomas, hay que igualar a los operadores en TypeScript. Una es la igualdad básica, que es dos signos iguales. Cuando usas esto, si los tipos son diferentes. Entonces, por ejemplo, si está comparando un número y una cadena, escriba script realmente se convertirá al mismo tipo y luego comparará los valores. En contraste, la estricta igualdad con el triple signo igual significa que los tipos deben ser los mismos para que una comparación te dé verdad. Y una regla general es siempre, siempre, usar siempre estricta igualdad en TypeScript. Donde más podrías encontrarte con muchos bichos. Entonces entrando en el ejemplo allí, la primera declaración, así que la línea número tres es básicamente igual a la cadena porque esto es realmente cierto porque TypeScript convertirá la cadena para dos, el número cuatro, y lo hace a través del constructor de números como hemos visto anteriormente en las diapositivas. Y claro, cuando convierte el número 44 es igual a cuatro y eso te dará verdad. No obstante, si usas igualdad estricta, porque el número cuatro no es del mismo tipo que la cadena para esto te dará false, que es lo que normalmente esperarías. Ahora esto también lleva al siguiente tema, que es si algo es veraz o falso. Porque puedes convertir cualquier cosa en JavaScript y TypeScript a un Booleano. las cosas se les llama verdad si se pueden convertir a Verdadero y se les llama falsey si se pueden convertir a Falso. Y nuevamente, esto se vuelve muy, muy complicado, que es la fuente de muchos bichos que vemos en producción. Así que en los ejemplos estamos usando la sintaxis de alternativas para lanzar un booleano. Entonces usando el signo de exclamación doble, verás que porque cero se convierte en falso, lo llamamos falsey, y porque dos convierte a verdadero, lo llamamos verdad. Entonces, en general, los booleanos son bastante simples, pero sí hay que tener cuidado veracidad y la imaginería. Aquí hay algunos ejercicios. Para el primero, asigne una variable, llámela Ae, al valle de si dos negativos es menor o igual a cero. Entonces tienes que usar una comparación aquí. Prueba el registro de consola a y no es lo que esperarías para intentar determinar si la cadena vacía, así que nada en la cadena es veraz o falso. Y trate de comparar la diferencia entre usar el operador de igualdad básica y el operador de igualdad estricta. Y compara la cadena vacía con el número cero. Los veré en la siguiente. 6. Primitivos: nula y indefinido: Hola chicos. En esta lección vamos a pasar a primitivas nulas e indefinidas. A nivel base, tanto nulo como indefinido te dan un valor por nada, lo cual es un poco raro pensar en ello. A menudo se usan en un tipo de unión TypeScript, que entraremos en detalles un poco más adelante. La diferencia entre usar null e undefined es que normalmente usarías null para indicar que no hay valor. Mientras que undefined significa que el valor no es un asignado. Hay una sutil diferencia entre los dos. Pero por ahora, solo piensa en nulo e indefinido como un valor para no representar nada. Ahora vamos al ejemplo. Verás que en la línea número tres, estamos declarando una variable a con el tipo de número o nula. Y a este operador OR, que es una línea vertical recta, se le llama crear un tipo de unión. Eso lo verás en el ejemplo aquí. Podemos asignarlo inicialmente nulo, pero también podemos asignarlo a, y podemos asignarlo a bloque nulo nuevamente. Entonces esto esencialmente le dice script de tipo que tanto los números como el tipo nulo son absolutamente válidos para la variable a. entremos en tipos de unión de bit más. Entonces, como he mencionado, un tipo de unión te da una condición de pedido en múltiples tipos base y no hay límite para este número de tipos base. Entonces en el ejemplo aquí, nuevo, la variable a, o ahora diciendo que puede ser ya sea un número o una cadena o nula. Inicialmente le asignamos el valor de string, pero verás que en las líneas 3.4, también podemos asignarlo a un número o podemos asignarlo a null. Ahora bien, en este caso específico, realmente necesitas la declaración de tipo. Entonces necesitas los dos puntos para el número o una cadena, o null, o si lo asignas a una cadena de inmediato, entonces TypeScript pensará que a solo puede ser de tipo cadena dando la definición de tipo explícita para el tipo de unión. Le dices a TypeScript que, bien, esto es una cadena al principio, pero también permite que a se le asignen dos números y permite que a se asigne a nulo. Repasando un poco de veracidad e inquietud, tanto nulas como indefinidas en tu falsy. Y lo que eso significa es que cuando conviertes undefined y null a un booleano, van a reservar convertir a false. Ahora, curiosamente, si intentas comparar nulo e indefinido entre sí con igualdad básica ya que nos estamos uniendo en línea número tres es undefined, igual a null. Eso es realmente cierto. Mientras que si tienes igualdad estricta, undefined no es igual a null porque son de diferentes tipos. De nuevo, sé que esto se vuelve un poco confuso, pero estas son algunas cosas que solo necesitas saber a mano porque son peculiaridades con el lenguaje mismo. Ahora, pasando a algunos ejercicios, intenté encontrar un tipo que pueda ser ya sea un número o indefinido. Entonces, por ejemplo, definir una constante a y hacerla tomando valores tanto de número como indefinido. En segundo lugar, intenté encontrar un tipo que pueda ser uno de los siguientes. Así cadena, nulo e indefinido. Puedes intentar asignarlo a una variable y asegurarte que lo que estás haciendo es correcto asignando una cadena, firmando en nulo y asignándolo indefinido. En los tres casos debe ser código válido y no debe haber errores de TypeScript. Bien, chicos, avíseme si tienen alguna duda y los veré en la siguiente. 7. Primitivos: arenas: Hola chicos, En esta lección vamos a repasar matrices. Las matrices son simplemente listas de cosas. Vamos a sumergirnos directamente en un ejemplo porque demostrar un aumento se realiza mejor mirando el código. Entonces, la sintaxis de script type para declarar una matriz es tener el tipo base seguido de los dos corchetes. O alternativamente, también puedes usar la matriz con una mayúscula a con el tipo base dentro de los corchetes angulares, como verás en el comentario en la línea uno y la línea número dos, estamos declarando primero R, que es una matriz numérica. Verás que estamos usando el primer tipo de TypeScript, type declaration. Así que usando el número con los dos corchetes, y estamos creando una matriz vacía. Esto significa que primero, R simplemente va a ser una lista de números y no tiene elementos dentro de esta lista al principio cuando se inicializa. En la línea número tres, estamos declarando segundo arte. Estamos usando la sintaxis alternativa con un rayo. Estamos haciendo exactamente lo mismo, creando una matriz vacía de números para el segundo brazo. Recordarás que antes, cuando estábamos usando otros tipos de primitivas, en realidad no necesitas usar la declaración de tipo TypeScript con dos puntos y el tipo si estás inicializando el constante de inmediato. Pero esto no es cierto una matriz vacía porque si le das una matriz vacía, TypeScript no sabe qué tipo de elementos quieres poner en esa matriz. Entonces, si desea que se escriba su matriz, debe declarar el tipo explícitamente para las matrices. Sin embargo, si no está inicializando con una matriz vacía, en realidad puede hacer que TypeScript inferya el tipo. Así que en la línea número ocho, si tienes cadena r y la poblas con hello and world, TypeScript realmente puede inferir que cadena r es de tipo string array. Las matrices también se pueden anidar. Entonces echemos un vistazo a la línea número 14. El tipo lee de izquierda a derecha. Entonces primero tenemos matriz numérica. Entonces, cada elemento base aquí es una matriz numérica, y tenemos una matriz de matrices de números, lo que significa que tenemos una matriz anidada de matrices. Se vuelve un poco confuso, pero ya verás a lo que me refiero con el ejemplo aquí. Verás que tenemos una lista, pero cada elemento dentro de esa lista es una lista en un mismo. Entonces el primer elemento es la lista con 1.2 y el segundo elemento de la lista es otra lista con 3.4. Entonces algunas operaciones básicas de matriz. Entonces, para acceder a un miembro de la matriz por su posición, simplemente usa el nombre de la variable de matriz y luego usa los corchetes con el índice al que desea acceder. Ahora similar a otros idiomas, los índices empiezan en cero. Entonces verás por la imagen aquí que el primer elemento dentro de la matriz tiene índice de cero, el segundo tiene un índice de uno, y así sucesivamente y así sucesivamente. Entonces digamos que tienes un rayo son con 12345, tuviste acceso al tercer miembro de la matriz que tiene el valor tres, usando nuestros corchetes. Y a continuación, se puede obtener la longitud de una determinada matriz usando r longitud de punto. Entonces, por ejemplo , de la imagen, si lo llamaras r longitud de punto allí, tendrías cinco devueltos. Puede agregar al final de la matriz usando r dot push. Y dentro de esos corchetes ahí puedes poner lo que quieras empujar al final de la matriz. También puede eliminar un elemento del final de la matriz usando r punto pop. Este método realmente devolverá el elemento que fue reventado. Entonces, si llamaras a r punto pop en el rayo en la imagen ahí, el resultado sería cinco porque ese es el último elemento. Y nuestro después de ese punto solo tenemos 1234. Y digamos que iba a llamar a r longitud de punto después volvería cuatro porque la longitud de la matriz es ahora para algunos ejemplos más para repasar la información anteriormente en las diapositivas. En la línea número dos, estamos creando una matriz numérica. Entonces como mencioné, para declarar una matriz vacía y tener TypeScript dar el número son un tipo, que decir explícitamente que número r es de tipo array de números. Y en línea número cuatro, porque estamos dando algunos elementos inicialmente en la matriz de tipo string. Typescript sabe que string args es una lista de cadenas. La línea número seis entra en índice para acceder. Entonces digamos que quieres acceder al primer elemento de cadena. ¿Utilizas los corchetes con cero porque los índices empiezan en cero? Y lo que eso devolverá es el primer elemento de la matriz, que es hola. A continuación entrando en la propiedad length, verás que si llamamos al número r dot length, es cero porque es una matriz vacía. Y luego digamos, bien, queremos empujar un elemento uno en la matriz numérica. Recordarás que push colocará un elemento al final de la matriz y realidad devolverá la nueva longitud de la matriz. Entonces nuevo largo ahora es uno. Y después de empujar, verás que el número r es ahora una lista de elementos únicos con uno. Dentro de ella. Y si usas el operador length quiere más, verás que la longitud es ahora uno porque has agregado un miembro a la matriz. Así que volviendo a la cadena son si fueras a llamar pop y recordarás que pop elimina el último elemento de la matriz y lo devuelve. Verás que el último elemento de cadena aquí es world, porque ese es el elemento que se ha eliminado del final de la matriz. Y si tuvieras que registrar la cadena están de nuevo, verás que el mundo ha sido eliminado. Entonces es una lista de elementos únicos con hola dentro de ella. Así que repasemos todo por el patio de recreo. Intentemos declarar una matriz booleana. Por lo tanto, matriz completa. Ahora bien, si no le doy mecanografía, verás que si pasas el cursor sobre bull array, es de escribir alguna o una lista de alguna. Es de tipo una lista de cualquiera. Y luego repasaremos el cualquier tipo. Pero esta no es una gran práctica si tienes una matriz vacía. Entonces porque sabemos que será una lista de booleanos, sigamos adelante y definamos eso ahora mismo. Entonces usamos el primer tipo de sintaxis. Entonces verás que también podemos usar los impactos alternativos de usar array con los corchetes angulares. Ahora bien, si tuviera que declarar bool son y poner algunos valores dentro de él. Verás que al pasar el cursor sobre TypeScript inferirá que Bulara es de tipo matriz booleana. Ahora, intentemos empujar algo en esta matriz. Entonces agregando un elemento al final. Vamos a empujar el valor de false. Entonces ahora si console.log, será r debería ser lo que esperamos. Tan verdadero, falso y falso. Y si registramos su nueva longitud, ¿qué esperamos? Entonces tuvimos dos miembros y luego empujamos a otro. Entonces la longitud debería ser tres corriendo eso. Y es de nuevo lo que esperábamos. Ahora, intentemos conseguir el último miembro. Entonces estoy llamando pop, que eliminará al último miembro de la matriz. Sigamos adelante y console.log el resultado de eso. Entonces, ¿qué pasa cuando saltas de la matriz? ¿Qué devuelve el pop? Y en realidad devolverá el último elemento que se eliminó de la matriz. Y también vamos a registrar la matriz en sí después del pop, la operación está hecha. Entonces probemos eso. Entonces veamos las dos últimas líneas. Verás que el valor de r punto pop, que elimina el último elemento, será falso porque ese fue el último elemento aquí. Entonces está quitando falso y lo está devolviendo, y lo está cerrando la sesión. Entonces si cerramos la sesión de pool están al final después de la operación pop, verás que solo contiene true y false porque a través de la llamada de pop, hemos eliminado el último valor falso del matriz. Bien, así que esa fue una demostración rápida. Volvamos a las diapositivas, entremos en algunos ejercicios. Así que primero define una matriz vacía que contiene tanto elementos de cadena como de número. Un poco de una pista aquí puedes usar un tipo de unión para definir son. Ahora intenta empujar hola e intenta empujar también. Debido a que r puede contener tanto tipos de cadena como de número, esto debería funcionar sin ningún error. Y ahora intenta asignar el valor de una nueva constante Ae al resultado de r dot pop. ¿Es lo que esperas? Y trata de pasar el cursor sobre a para ver qué TypeScript infiere de a a B en términos de mecanografía. Por último, asignamos el valor de una constante, nuestra longitud, a los resultados de nuestra longitud de punto. ¿Eso es lo que esperas? En segundo lugar, defina una matriz booleana que contenga los siguientes miembros. Verdadero, verdadero, falso, falso. Tercero, ¿qué pasa si intentas acceder a un índice de matriz que no existe? Entonces dado el ejemplo aquí, Digamos que ha declarado una matriz de r es igual a uno en una matriz numérica. ¿Qué pasa si intentas acceder al tercer elemento índice de dos? Intenta cerrar la sesión y ver qué devuelve. Por último, intente definir una matriz numérica de 123.4. Ahora bien, este ejercicio requerirá que hagas algo de Google. Así que intenta encontrar documentación para el tipo de matriz JavaScript o TypeScript de estos perros encuentra una manera de eliminar el elemento uno. Entonces este es el primer elemento de la matriz. En cambio va a durar. Aquí no se puede usar pop. Ahora, nuevamente a partir de la documentación, encuentra la manera de volver a agregar el elemento uno al principio. Entonces no puedes usar push porque push va al final de la matriz. ¿Puedes intentar poner uno al principio? Hazme saber si tienes alguna duda y los veré chicos en la siguiente. 8. Primitivos: objetos: Hola chicos, en esta lección vamos a repasar objetos. Vamos a aprender objetos a través de un ejemplo. Y ese ejemplo es definir un auto. En nuestro primer intento, usemos lo que sabemos. Definamos la propiedad por separado. Así podemos definir la marca, modelo y año prefijándolos con auto. Y claro, estos son tipos que ya hemos visto antes. Por lo que Kármico es de tipo cadena ya que su modelo de automóvil y año de automóvil es de tipo número. Pero como puedes imaginar, si tuvieras que pasar este auto en tu código, se te puede salir de control bastante rápido porque tienes que pasar todos estos campos individualmente. Entonces aquí viene el objeto. Cada objeto es un grupo lógico de información. Y un objeto es simplemente un mapeo de una clave a un valor. Y cada mapeo de clave a un valor se llama la propiedad del objeto. Entonces, redefinamos el auto. Entonces cada una de estas filas a continuación define una propiedad. Tendríamos una llave de hacer con un valor de Honda, una clave de modelo con el valor de cívico, y una clave del año con el valor de 2022. Entonces, ¿cómo hacemos esto en TypeScript? Las interfaces y los tipos definen la forma de un objeto dentro de TypeScript. La convención habitual es camello caso los nombres de las propiedades, también llamadas claves. Entonces tenemos dos formas diferentes de definir el automóvil, y estas dos suelen usarse indistintamente. El primero, utilizamos la interfaz de palabras clave. Decimos que la interfaz se llama coche. Y decimos, bien, make es una propiedad del auto con una cuerda tipo. Igual que el modelo. El modelo tiene un tipo de cadena. Y para año, año tiene un tipo de número. Alternativamente, podemos usar el tipo de palabra clave. Pero ten en cuenta que necesitamos un signo igual después del auto para definir un tipo versus no necesitas el signo igual para una interfaz. Hacemos exactamente lo mismo cuando usamos un tipo en lugar de una interfaz. Y en este contexto, significan lo mismo. Ahora, un tipo TypeScript solo define la forma de un objeto. No crea un objeto. Así que ahora intentemos crear el objeto. Otra vez. Verás que estamos usando la palabra clave const. Estamos diciendo const mi auto. Y esta vez, en lugar de que mi auto sea un tipo de cadena booleana o número, estamos diciendo que es un tipo de auto, que es una interfaz personalizada o tipo que hemos definido anteriormente. Ahora podemos decir, bien, para este auto específico, mis fabricantes de autos, modelos Honda, cívico, y el año es 20.22. Entonces verás que estamos definiendo con const y no electo, lo que significa que no podemos redefinir mi auto a otro auto. No obstante, podemos cambiar las propiedades de mis tarjetas, así podemos cambiar la propiedad make de mi auto a, digamos Ford. Y eso está totalmente permitido si es una constante. Entonces eso es una cosa a tener en cuenta. Ahora. Vamos a profundizar en los objetos a través de ejemplos. Primero, ¿cómo cambiamos una propiedad y cómo accedemos incluso a una propiedad? Entonces esto vuelve a la advertencia que teníamos en la diapositiva anterior. Estamos definiendo mi auto otra vez. Pero no se puede redefinirlo porque es una constante si se define como una variable. Entonces usando left, puedes redefinir mi auto en la línea número ocho a otra cosa. Sin embargo, hay dos formas acceder a una propiedad en el objeto. El primero, la sintaxis de punto, que es lo que estás haciendo en la línea número 13. Entonces decimos mi auto dot make y en este caso estamos reasignando la marca de mi auto de Conda para pagar. Esto se llama acceso al estilo punto. La siguiente manera de acceder a una propiedad es usando el acceso de estilo índice. Entonces esto es similar a acceder a algo dentro una matriz con el índice, de ahí el nombre. Pero en lugar de un índice numérico, le damos el nombre de la propiedad o la clave. Entonces, en la línea número 14, verás mi auto, modelo de corchetes, es decir, estamos accediendo a la propiedad modelo de mi auto y vamos a cambiarlo a Ranger. Por lo que después de la línea número 13.14, mi marca de auto será adelante y el modelo será Ranger. Ahora vamos a sumergirnos un poco en interfaces y tipos. En realidad, puede anidar interfaces y tipos para definir formas para objetos anidados. Las propiedades también pueden ser lo que se llama nullable, lo que significa que pueden ser nulas o indefinidas. Así que vamos a entrar en eso un poco. En la línea número uno, verás que estamos usando la palabra clave interface para definir algún tipo de objeto. Primera propiedad que hay es opcional debido a ese signo de interrogación frente al colon. Eso significa que la primera propiedad puede ser booleana, tan verdadera o falsa, o indefinida. Segunda propiedad, cómo se define es exactamente lo mismo. Es solo una sintaxis alternativa. El signo de interrogación es esencialmente una taquigrafía para decir que esto puede ser booleano o indefinido. O puedes declararlo explícitamente con un tipo de unión, como ves para la segunda propiedad. En la línea número seis, definimos algún otro tipo de objeto, y aquí es donde nos metemos en los objetos anidados. Entonces estamos diciendo que el objeto anidado es una clave en algún otro tipo de objeto con el tipo de algún tipo de objeto. Entonces esto significa que si tienes un objeto de algún otro tipo de objeto, tendrá una propiedad llamada objeto anidado. Y esa propiedad tendrá un objeto con una propiedad de primera propiedad. Nos meteremos un poco más en esto con ejemplos. Pero así es como anidas objetos. También puedes definir esto en línea. Así que el segundo objeto anidado es otra forma de definir un objeto anidado. En este caso, algún otro tipo de objeto tiene un nombre de campo segundo objeto anidado con un nombre de campo anidado, primero anidado, que es tipo cadena, o segundo anidado, que es tipo número o no. Entonces ahora intentemos usar estos tipos. Primero, veamos las propiedades anulables. Entonces volviendo a algún tipo de objeto, verás que tanto la primera propiedad segunda propiedad son incognoscibles. Y eso significa que si no definimos una propiedad que sea nullable, por defecto será undefined. Entonces en línea número seis, estamos definiendo OBJ como algún tipo de objeto. Estamos especificando que la segunda propiedad es verdadera, y esto es válido porque la segunda propiedad, como puede ver, es booleana o indefinida. Sin embargo, no estamos definiendo primera propiedad y debido a que es anulable, por defecto será undefined. Ahora vamos a entrar en un ejemplo con objetos anidados. Así que recordarás que algún otro tipo de objeto tiene dos campos anidados, objeto anidado y segundo objeto anidado. Ahora podemos declarar OBJ nuevamente, objetos anidados. Podemos darle un objeto vacío porque recordamos que algún tipo de objeto tiene campo anulable de primera propiedad y segunda propiedad. Y esto significa que si haces OBJ punto anidado objeto punto primera propiedad, su valor predeterminado es undefined. Ahora verás que estamos declarando OBJ para los segundos objetos anidados. Estamos declarando esos campos enseguida. Así que primero anidado es una cadena porque hemos declarado que es una cadena de tipo. Y segundo anidado, tenemos que declararlo nulo. Ahora, entremos al patio de juegos TypeScript y juguemos un poco con objetos para cubrir lo que lo aprendimos en las diapositivas. Intentemos definir una interfaz para un concesionario de autos. Vamos a usar la palabra clave interface. Ahora pensemos qué propiedades tienen sentido en un concesionario? A lo mejor queremos hacer una lista de autos. Intentemos definir primero una interfaz de automóvil. Una nota rápida aquí. La convención para definir el nombre de una interfaz o tipo es capitalizarla. Entonces algo como auto con una C mayúscula o concesionario con una D. mayúscula Si tienes varias palabras en tu interfaz, pondrías en mayúscula la palabra primeras letras. Entonces mi tipo, por ejemplo volviendo al auto, usemos lo que teníamos antes. Así que haz de tipo string, modelo de tipo string y año de tipo número. Entonces queremos decir que concesionario tiene autos en venta. Así que definamos unos autos clave para la venta. Y vamos a decir que es una lista de autos. Así que recordarás que la sintaxis de matriz se declara de la siguiente manera. Al hacer esto, estamos diciendo que los autos en venta son una variedad de autos. Ahora intentemos definir un tipo en línea, quizás ubicación para el concesionario. Voy a usar las llaves para definir que este es un objeto. Y una ubicación podría tener una latitud, que es de tipo número, y longitud, que es el tipo número. Ahora intentemos también definir la propiedad incognoscible. A lo mejor queremos saber si el concesionario opera en línea. Entonces tal vez está en línea. Y uso el signo de interrogación para decir que esto es anulable. Booleano tiene sentido aquí. Alternativamente, puede definir undefined dentro del tipo de unión explícitamente. O si lo prefieres, puedes usar null. Voy a usar null por ahora. Intentemos crear un auto. Entonces voy a decir const, primer auto. Y le voy a dar un tipo de auto. Verás que si lo dejo vacío, no estamos definiendo ninguna de las propiedades requeridas. Entonces, si pasas el cursor sobre el área aquí, TypeScript realmente te dirá que te faltan estas propiedades. Entonces vamos a poblarlos ahora mismo. Y tratemos de definir otro auto. Ahora. Por último, volvamos a definir un concesionario. Entonces voy a definir autos en venta. Y recordarás que definir una matriz es usar los corchetes. Y voy a decir que los autos en venta contendrán el primer auto y el segundo auto. Ubicación, voy a definir inline también. Y podemos decir que la latitud es cero y la longitud es cero por ahora. Ten en cuenta que también podemos hacer algo como esta ubicación. Esta sintaxis aquí esencialmente dice que el tipo de ubicación es el mismo que el campo de ubicación en el concesionario. Entonces latitud y longitud. Si pasa el cursor sobre el área aquí, en realidad verá que nos faltan los números de latitud y longitud. Para que podamos seguir adelante y poblar eso ahora. Entonces podemos pasarlo aquí en línea. Bien. Volviendo a la concesionaria, voy a mantener la ubicación en línea solo por brevedad. Y recordarás que una vez que tenemos estos definidos, todavía obtenemos un error aunque esté en línea es opcional. Esto se debe a que si usamos la taquigrafía es en línea con un signo de interrogación, no necesitamos declarar esta propiedad. No obstante, si usamos el tipo unión, tenemos que decir explícitamente que está en línea no está definido, o es en línea es booleano o nulo, entonces tenemos que darle no. Por último, puedes console.log objetos igual que haces con tipos base. Entonces probemos eso ahora. Si ejecutamos el código, verás que esto es lo que esperamos. Concesionaria es un objeto con una llave de autos en venta con el valor como una variedad de, este es nuestro primer auto, y este es nuestro segundo auto. También tiene un campo de ubicación de longitud cero y latitud cero. Y por último, tenemos está en línea para saber. Con eso concluye nuestra demo y los veré de nuevo en las diapositivas. Bien, entonces los ejercicios para objetos primero desde la documentación en línea, encuentran una manera de obtener todas las claves en el objeto como una matriz. Entonces, como recordarás, las claves mapeadas a valores. Intenta encontrar una manera de obtener todas las claves de un objeto y juega con él en el patio de TypeScript para asegurarte de que funciona. Segundo, tratar de encontrar una interfaz para un tipo de persona. Entonces la primera pregunta es ¿qué propiedades tienen sentido para una persona? Esto es un poco abierto, pero te enseña y te hace pensar de una manera orientada a objetos. Ahora, digamos que una persona tiene propiedades de primer nombre, que es de tipo String, lastName, también tipo string, y tu nacimiento, que es de tipo number, intentó encontrar esto como una interfaz y como tipo script tipo. Ahora vamos a crear una persona para el ítem C. Ahora agreguemos una propiedad anulable del país de nacimiento y hagamos esto de tipo cadena. Y además la propiedad nullable, puedes hacer que sea default a undefined o puedes declarar explícitamente que es una cadena o null. Ahora, juegue con la sintaxis de estilo de punto, así como sintaxis de estilo de índice para cambiar las propiedades de su objeto persona. Por último, encuentra una manera de reasignar tu objeto Persona a un objeto de persona completamente nuevo. Anteriormente, declaramos persona que estás creando como contras, pero es posible que tengas que cambiar esto para reasignar tu objeto persona. Avísame si ustedes tienen alguna duda y los veré en la siguiente lección. 9. Asignación variable: Hola chicos, Esta es una lección rápida sobre asignación variable. Si has venido de otros lenguajes de programación, probablemente hayas oído hablar de los términos asignación por referencia y asignación por valor. En esta lección, vamos a repasar una asignación de variables para JavaScript y TypeScript. Si no tienes experiencia en programación, y todo esto es completamente nuevo para ti. No te preocupes demasiado por esto. Voy a dar algunos ejemplos para ayudar a ilustrar la diferencia. También hay amplios recursos en línea por si quieres ir más a fondo. Muy bien, entonces, ¿qué entendemos por asignación por valor versus asignación por referencia? Esencialmente, queremos responder a la pregunta, ¿qué sucede cuando se asigna una variable a otra? Entonces, digamos que tienes una constante llamada y quieres asignar la constante b es igual a a. Si asignas por valor, significa que estamos copiando el valor de a en la constante b. Esto en JavaScript en TypeScript se aplica a cadenas, números y booleanos. Entonces el valor de a en sí se copia en b. Por otro lado, por referencia significa que todo B es una referencia a ello apunta a a. Si quieres obtener el valor de B, B va a decir, ve a mirar a y tomar el valor de a como es ahora mismo. No estamos copiando el valor actual. En cambio, solo estamos sosteniendo una referencia al valor de a.Esto en JavaScript y TypeScript se aplica a objetos y matrices. Esto se ilustra mejor usando un ejemplo. En el primer ejemplo en la línea número uno, estamos declarando a que es igual a dos, y estamos declarando B, que es igual a a. ahora recordarán que un número es asignación por valor. Entonces, lo que estamos diciendo aquí es que copiemos el valor de a, entonces dos y pongamos eso en b. Así que b ahora es igual al número tres en línea, ahora estamos incrementando p en dos. Entonces dos más dos son cuatro. Por lo que ahora en este punto, B tiene valor de cuatro. Pero a, porque su valor fue copiado, está completamente separado de B. Así que a sigue siendo demasiado porque no estás incrementando a, pero has incrementado B24. Ahora, en la línea número cinco, veamos un ejemplo de asignación por referencia. Estamos declarando una constante C, que es una matriz. Es una matriz de números, entonces 1.2. Ahora vamos a asignar una nueva constante D a C. Las matrices son asignación por referencia. Entonces, lo que D está haciendo ahora mismo es que está apuntando al valor de C, pero D no es un valor nuevo. Entonces el valor de c, esa matriz no se copió en d Si llamamos pop en C. Así que estamos mutando o cambiando la matriz existente. Estamos quitando el último elemento dos. Y entonces ahora esperamos que C tenga sólo un elemento, que es uno. Pero ahora si accedes a D, D está apuntando a ver, cuando vas y tratas de encontrar el valor de D. D solo va a decir, ve a mirar el valor actual de C. Pero ahora porque C solo tiene un elemento, d solo tendrá un elemento cuando lo imprima. Aquí hay algunos ejercicios y si necesitas más aclaraciones sobre esto, siéntete libre de hacer cualquier pregunta según sea necesario o hacer una excavación más profunda en línea. Número uno, hay una cadena de seguimiento de asignación por valor o referencia. Así que esto es más que solo probar su número de conocimiento para declarar una matriz de cadenas con los elementos a, B y C. Ahora, a partir de la documentación en línea, encuentre una manera de copiar el valor de esta matriz a otra variable de matriz. Entonces recordarás que una maquinilla de afeitar o asignación por referencia, pero ¿hay otra manera de que puedas hacer esto para que realmente estés copiando el valor de esta matriz? Muy bien, entonces para probar esto, deberías poder llamar cosas como push, pop en el nuevo array sin cambiar el original. Tronco, tanto el original como el nuevo. Cualquier operación que realice en la nueva matriz no debe afectar a la matriz original. Y un pequeño indicio aquí, intenta buscar el operador spread en JavaScript. 10. Extras de Typescript: Hola chicos, esta es una pequeña lección sobre algunas notas de TypeScript que no encajaban en una sección en particular. Por lo que hay dos tipos únicos que ofrece TypeScript, siendo desconocido el primero y el segundo. También hay un tipo de operador que proporciona JavaScript para darle el tipo primitivo base para cualquier variable. Entonces yendo a los tipos TypeScript, El primero siendo, lo que esto significa es que esta variable puede ser cualquier cosa. Puede ser un número, puede ser una cadena, puede ser un objeto, una matriz. No sabemos qué es, pero puede ser cualquier cosa. Desconocido es muy similar. Sin embargo, indica que se desconoce el tipo de esta variable. Hay una diferencia muy sutil entre cualquier desconocido y la diferencia se hace evidente cuando está en producción. Por ahora, sin embargo, todo lo que realmente necesitas saber es que cualquiera y desconocido se usan típicamente para tipos en los que no estás seguro sobre el tipo de variable. Type es un operador que le da un nombre de cadena para el tipo actual de una variable dada. Los detalles sobre cómo funcionan estos, así como cuándo usarlos, están realmente fuera de alcance para este curso introductorio. Repasemos algunos ejemplos. En línea. Número uno, estamos declarando una variable a de tipo desconocido. Entonces no estamos seguros de cuál es este valor. Primero le estamos dando una cadena, pero puedes ver que puedes asignarla a dos. Y eso es muy válido porque TypeScript esencialmente dirá, no sabemos qué es esta variable. Entonces voy a permitir cualquier cosa en línea. Número tres, estamos haciendo algo similar. Declarar B tiene algún significado que b pueda tomar en cualquier tipo. Pero en la línea número cinco, se puede ver que también podemos asignarlo a un tipo de número en el número de línea para el tipo de b es una cadena. Entonces, dando eso te devolverá la cadena en el número de línea para el tipo de la variable B es una cadena. Entonces eso es lo que va a registrar. Pero después de reasignarlo a un número y registrar el tipo, nuevamente, volverá como número. Entonces, usar typeof es una buena manera de encontrar el tipo de una variable dada en tiempo de ejecución. Y para rematar las cosas para esta lección, vamos a introducir un poco más sobre los tipos de sindicatos. A medida que su base de código se desarrolla, es probable que desee extraer tipos y darles nombres. Y se pueden asignar tipos a un tipo definido por el usuario con su nombre único. Entonces, por ejemplo si quieres tener un tipo de animal que pueda ser el gato de cuerda o el perro de cuerda. Se puede decir tipo animal. Y estamos declarando un tipo único definido por el usuario llamado animal. Y simplemente dices que es gato o perro. O digamos que un tipo de identificador puede ser una cadena o un booleano. Se puede hacer lo mismo, diciendo identificador de tipo es o bien una cadena o un booleano. Algunos ejemplos aquí. Entonces volviendo a ese tipo de animal, verás que podemos crear una constante de animal, de tipo animal y asignarla a gato. No obstante, si intentas asignar una constante de tipo animal a, digamos auto, que no es ni gato ni perro. Escriba script, le dará un error. Entonces entrando en algunos ejercicios aquí, número uno, intenta registrar el tipo de NRA. Y el resultado puede ser un poco confuso y eres libre de sumergirte en esto. Pero nuevamente, está fuera del alcance de este curso introductorio. Segundo, declarar un tipo de número especial. Entonces un tipo definido por el usuario que puede tomar tres tipos diferentes de valores, 12.42. Ahora intenta crear una constante, mi número especial con este tipo e intenta establecerlo en diez. En caso de poder e intentar inspeccionar el área que sale de ella. Por último, declararlo array vacío con elementos de cualquier tipo. Así que declara un tipo de matriz. Pero para cada elemento, el tipo de ese elemento es cualquiera. Y ahora piensa en qué tipo de elementos puedes introducir en esta matriz. ¿Podrías empujar una cuerda, un número, un booleano? Pruébalo en el patio de recreo. Avísame si ustedes tienen alguna duda y los veré en la siguiente lección. 11. Declaraciones condicionales: Hola chicos, en esta lección vamos a repasar las declaraciones condicionales. Es el primero de muchos dentro del capítulo de control de flujo. La instrucción condicional básica dentro de JavaScript en TypeScript se compone de if, else-if y else. Una sentencia condicional le permite ejecutar código dependiendo de una condición, ya sea que se evalúe como verdadero o falso. Una declaración condicional siempre comienza con un if. Usted puede tener un else-if, cualquier número de bloques else-if adicionales. Y por último, un bloque else. Pero el bloque else también es opcional. Entonces la instrucción condicional muy básica es una condición única sin más IPS o un else. También puede agregar un else si lo desea o cualquier número de else si está en el medio. Entonces, mirando ese pseudocódigo a continuación, esta es una sintaxis para una declaración condicional. Verás que si ponemos una determinada condición entre corchetes, esta condición es esencialmente una expresión que evalúa como verdadera o falsa. Si es cierto, entonces ejecute el bloque justo después de la sentencia if. Si tiene una declaración else-if, entonces esa nueva condición será evaluada. Y si esa condición es cierta, entonces ejecuta el bloque justo después de ese else-if. Si todo lo demás falla, no hay condición en el if o cualquier otro ifs han coincidido, entonces se ejecutará el código en el bloque else. Pasemos por un ejemplo. Digamos que defines un número y lo haces igual a cinco. Primero definimos un si y decimos, bien, si un número es menor que diez, entonces es cinco, menos de diez. Console.log, número pequeño. De lo contrario, si un número es menor que 20, bien log número medio un else si un número no es menor que 20 y no menor que diez, el log número grande. Entonces, si nuestro número es cinco, entonces veremos que la condición if evaluará a true y registraremos un número pequeño. Pero si un número es, digamos 15, entonces vamos a registrar número medio. Y si un número es 25, entonces vamos a registrar gran número. Aquí entramos en un poco de un aparte en los operadores booleanos. Hay tres que debes conocer, siendo el primero el no operador. Entonces el signo de exclamación frente a la propia variable. Esto significa invertir el booleano. Entonces eso significa que si tienes un verdadero y colocas un signo de exclamación delante de él, se volverá falso y falso se hará verdad. El siguiente operador, el operador, implica que para que esta expresión se evalúe como verdadera, todas las condiciones que conectes junto con los dos ampersands deben ser verdaderas. Por último, tenemos el operador OR. Esto solo dice para que esta expresión evalúe a verdad, una de estas afirmaciones que conectes con las dobles líneas verticales debe ser verdadera. Así que entra en algunos ejemplos aquí. En la línea número uno, vemos que verdadero y verdadero serán por supuesto cierto porque ambas condiciones son verdaderas. No obstante, si tenemos verdadero y verdadero y falso, porque uno de ellos es falso, esa afirmación entera evaluará como falsa. En la línea número tres, decimos verdadero o falso, y debido a que uno de ellos es verdadero, el primero, los resultados de eso son ciertos. En la línea número cuatro, tenemos falso o falso o verdadero. Ahora no importa cuántas falsedades tengamos, siempre y cuando una sea cierta, toda la afirmación será cierta. Y eso es lo que pasa aquí mismo. última vez que tengamos el operador not usando el signo de exclamación delante de false invertirá el booleano, lo que le da verdad. La siguiente declaración condicional se llama operador ternario. Y es esencialmente una taquigrafía para una asignación if, else. Asignación, es decir, estás asignando el valor a alguna variable. Entonces el operador ternario es esencialmente el signo de interrogación justo después de la condición. Y separas el valor verdadero así como el valor falso usando dos puntos. Entonces esto esencialmente dice que el valor de alguna variable toma el valor verdadero. Si condición se evalúa como verdadera. De lo contrario, si la condición es falsa, entonces dale el valor falso. Entonces pasemos por un ejemplo. Digamos que un número es cinco. Ahora queremos construir un número que definitivamente sea incluso si nuestro número puede ser lo que queramos o cualquier número que queramos que sea. Aquí decimos un número módulo dos. Entonces, si no has visto el operador de módulo, esencialmente te está dando el resto después de dividirlo por dos. Si un número módulo dos es verdadero, entonces devuelva un número por dos. De lo contrario, si un número módulo dos es falso, eso devolverá solo un número en sí. Entonces pensemos en esto. Si tienes un número impar y tienes el resto cuando se divide por dos, el resto es siempre uno. Y la veracidad de uno es verdad, ¿verdad? Uno tiene el número en JavaScript evaluará a true. Entonces, si esta condición es cierta, entonces tenemos un número impar. ¿Cómo hacemos par un número impar? Lo multiplicamos por dos. De lo contrario, si un número módulo dos es falso, debe ser cero. Y sabemos que cuando es cero, número debe ser par. Entonces por eso acabamos de devolver un número porque ya está parejo. Siguiente. Veamos el operador de lecciones de color de conocimiento. Esto esencialmente es una taquigrafía para dar un valor predeterminado para cualquier variable que sea anulable. Si recuerdas, anulable significa que puede ser nulo o indefinido o tomar un valor real. Entonces en el pseudocódigo tenemos constante, alguna variable. Decimos que primero tenemos un valor nulo. Entonces este valor puede ser nulo o indefinido. Si es nulo o indefinido, entonces dale a alguna variable el valor predeterminado. De lo contrario, si se define un valor nullable, simplemente dele el valor que se define para ser. Entrando en un ejemplo aquí, Digamos que tenemos un valor nullable que puede ser ya sea una cadena o undefined. Y le estamos dando indefinido al principio. ¿Qué sucede si registramos valor anulable? Dos, ¿signos de interrogación y default? Debido a que el valor nullable no está definido, le daremos el valor predeterminado, lo que el valor predeterminado se registrará. No obstante, si decimos bien, valor de la novela es igual a hola, ya no es indefinido. Ahora, cuando console.log usamos este operador de coalescencia, no se utilizará el valor predeterminado porque valor nullable ya está poblado. Entonces hola va a ser bajo. Entonces entrando en algunos ejercicios, número uno, define un número y luego escribe una declaración if else que imprima incluso si el número es par e impar si el número es impar. Así que esto se remonta a nuestro ejemplo en las diapositivas anteriores sobre el uso del operador módulo. Segundo, tienes acceso al punto matemático aleatorio, así puedes escribirlo en el patio de recreo y te dará un número aleatorio 0-1, ¿verdad? Una expresión ternaria que asigna una cepa constante. Entonces estás creando una nueva cadena constante al valor de big si esta llamada aleatoria de punto matemático es mayor que 0.5 y pequeña si esta no es mayor que 0.5. Por último, cree dos variables booleanas, primera condición y segunda condición. Número uno, escribe una declaración if que imprima tanto true. Si ambas variables son verdaderas. El número para escribir una declaración if que imprima al menos uno es verdadero. Si alguna o ambas condiciones son ciertas. Número tres, escribe una declaración if que imprima ninguna es verdadera. Si ambas variables son falsas. Avísame si ustedes tienen alguna duda y los veré en la siguiente lección. 12. Bucles: Hola chicos. En esta lección, vamos a repasar y bucles. Loops es una forma de realizar iteración. En otras palabras, es una forma más fácil ejecutar algo muchas, muchas veces. Nos permiten repetir nuevamente, lo que significa hacer algo una y otra vez. Hay cuatro tipos de bucles que se cubrirán en esta lección. Hay muchas, muchas más formas de realmente recorrer algo, pero estas son para las más populares que veo. Estos cuatro serán el bucle while, el bucle for, el bucle for y el para cada bucle. Empecemos con un tiempo. En pseudocódigo, se lee Mientras condición es verdadera y los paréntesis contienen algún tipo de condición de mecanografía. El bloque de código después de la sentencia while es el código que estás ejecutando una y otra vez. Entonces en un ejemplo, primero pongamos num igual a cero. Entonces, si num es de tipo número, diré mientras que el número es menor a tres. Así que cada vez que iteramos a través del bucle, si num es menor que tres, continuar ejecutando el código y el bloque de código de abajo. Vemos que somos console.log num plus plus. Y si recuerdas, el operador de postfix incrementará el número después de la ejecución de la sentencia. Entonces, la primera vez que esa línea número tres es cabeza, num es cero. Entonces num es menor que tres, lo que significa que la condición es verdadera. Entonces ahora ejecuta el bloque de código console.log num, que es cero, y luego increment num no es uno. Ahora vuelves al inicio del bucle. Entonces la línea número tres, num es uno y menos de tres. Así que sigue yendo. Se va a registrar uno y ahora num es dos. La condición de nuevo es cierta. Cuando num es dos, pasará por esa misma sentencia log, pero ahora numera tres. Entonces cuando vuelves a la línea número tres y el número es 33 no es menor que tres, entonces esto es falso. Ahora el bucle se romperá, y así continuaremos la ejecución después de la línea número cinco. Y el registro de la consola no se ejecutará cuando num sea igual a tres. Entra en el for-loop. Aquí está el pseudocódigo para primero, tiene una expresión de inicializador terminada por un punto y coma. Entonces tienes lo que se llama la expresión de prueba, terminada nuevamente por un punto y coma y luego una expresión iteradora. Y claro, similar al bucle while, tienes el bloque de código. Después, veamos la expresión del inicializador. La expresión del inicializador se ejecuta una vez al principio cuando el bucle for se ve en línea, número uno, el inicializador se ejecutará una vez, pero a medida que recorras este bucle for, no será correr de nuevo. La expresión de prueba te devolverá un booleano. Entonces esto es muy similar a lo que pones dentro del bucle while. La expresión debe devolver un verdadero o falso dependiendo de si debemos continuar ejecutando ese bucle. La expresión del iterador se ejecuta al final de cada bucle. Por lo general, se usa para cambiar un contador para que la expresión de prueba termine, es decir, devuelve false en algún momento que predeterminaste a través del pseudocódigo en línea. Número uno, cuando veas por primera vez el for-loop, ejecutarás los inicializadores. Entonces vas a ejecutar la expresión de prueba para decir, ¿deberíamos ejecutar este bloque de código? Y en caso afirmativo, entonces ejecuta lo que esté en el bloque de código al final del bucle, ejecute la expresión del iterador, luego vuelva al comienzo del bucle. La expresión de prueba se utilizará entonces para decir: Bien, ¿volvemos a ejecutar esto? Si es cierto, volvemos a ejecutar esto. Y luego al final del bucle ejecuta la expresión del iterador. Pero si es falso, salimos del bucle por completo y luego continuamos en la ejecución y el resto del código. Ahora bien, esto puede resultar un poco confuso con el pseudocódigo puro. Entonces entremos en un ejemplo. Entonces aquí tenemos tres declaraciones en el for-loop. Dejar que num sea igual a cero. Entonces esta es la primera declaración, la instrucción inicializadora. Esto se ejecuta desde el principio. La expresión de prueba es similar a la que teníamos en el bucle while. Entonces num menos de tres. Si num es menor que tres, entonces ejecute lo que esté dentro del bucle. Pero si no lo es, entonces sal del bucle. Finalmente, la expresión del iterador es num plus plus, lo que significa que solo estamos incrementando num. Pasando por esto nuevamente primero, como te has encontrado con el bucle, num es igual a cero, y así tu console.logs cero. Después al final del bucle, num se incrementa a uno. Vuelves al inicio del bucle y uno sigue siendo menos de tres. Yule Registro uno, lo incrementarás. Ahora num es dos. Por supuesto, eso es menos de tres, así que volverás a registrarlo e incrementarlo. Y ahora num es tres. Entonces, cuando num es igual a tres, num menos de tres evaluará como falso, lo que significa que saldrás del bucle. El bucle for of le permite enlazar a un elemento específico dentro de un iterable. Iterable es comúnmente una matriz. Y por supuesto, para cada elemento dentro de este iterable, ejecuta este bloque de código, pero tienes acceso al elemento en sí. Entonces esto es muy útil para repasar matrices de elementos. Entonces, mirando el ejemplo en la línea número uno, declaras una matriz nums de 01.2. Entonces puedes decir, Bien, para constante num de nums, y verás que num es una nueva variable o constante aquí. Y dentro del bloque de código justo después tienes acceso a num. Num es cada elemento de la matriz, y vamos a ir uno por uno a través de cada elemento de la matriz. Entonces, para la primera iteración, num es igual a cero. Entonces consolaré.logs cero. Pero cuando vuelves al inicio del bucle, num es ahora uno porque estás pasando por la matriz. Así que vas a registrar uno y luego a dos. Y ese es el final de la carrera. Entonces saldrás del bucle for automáticamente. Repasando el bucle for-each. Es una buena alternativa a cuatro de los que puedes llamar en la matriz en sí. Así que para cada uno realmente toma en una función iteradora como un parámetro, y vamos a entrar más en funciones más adelante. Pero mirando el ejemplo, verás que de nuevo con el bucle for of, tenemos num igual a una matriz de 01.2. Pero puedes llamar a cada uno directamente sobre él y pasar lo que se llama una función de flecha. Así que no te preocupes demasiado por esto. Pero si tienes num entre paréntesis dentro de esa función, esencialmente actúa como el num constante de nums que teníamos en el bucle for. Y verás que podremos acceder a este elemento numérico dentro la matriz y poder iniciar sesión. Entonces para cada uno solo itera y repasa cada elemento dentro de la matriz. Hola chicos, hagamos una demo de iteración. Entonces en este ejemplo, estamos definiendo una interfaz Car. Cada auto tiene una marca de tipo cadena así como un modelo de tipo cadena. Luego creamos una variedad de autos. Por lo que el primer auto ha hecho de Honda y modelo de cívico, y el segundo tiene make afford y modelo de enfoque. Intentemos usar cada uno de estos tipos de bucles. Entonces, para el bucle while, en realidad necesitamos algo para rastrear dónde estamos en el bucle mismo. Digamos que el índice de matriz es igual a cero. Esto va a rastrear dónde estamos en la matriz. Entonces, si bien el índice de matriz es menor que la longitud de los puntos de los autos, vamos a, primero, vamos a registrar el punto de consola del objeto del auto en sí. Y recordarás que puedes acceder a ese objeto en particular usando el acceso indexado. Para que podamos usar nuestro índice. Y por supuesto se puede decir nuestro incremento de índice. Y vamos a correr a través de ese bucle. Entonces lo que esto está haciendo es que nuestro índice es primero cero. Nuestro índice es cero, por lo que es menor que la longitud de los puntos de los autos, que es dos. Y así vamos a registrar el índice cero de los autos, que es el primer elemento. A continuación, incrementamos nuestro índice, que es uno, aquí mismo. Y ahora nuestro índice es uno. Cuando nuestro índice es uno, sigue siendo menor que la longitud del tarso, que como recordarás, es dos. Por lo que ahora se registra el segundo elemento de los autos. Ahora incrementamos nuestro índice y nuestro índice es ahora dos, pero dos no es menor que dos. Entonces salimos del bucle. Intentemos ejecutar esto. Esto es lo que esperamos. Así que primero registramos el primer elemento de la matriz y luego el segundo elemento de la matriz. Ahora, en realidad puedes acortar esto usando un for-loop. Entonces podemos decir por, podemos decir por, nuestro índice sea igual a cero. Entonces esto se ejecuta desde el principio. Entonces nuestro índice es el primer cero. Nuestro índice, lo siento, es menor que los autos de longitud de punto. Entonces esta es la expresión de prueba. Y luego el incremento, nuestra expresión iteradora es nuestro índice más, más. Y como siempre, podemos registrar esto como lo tenemos aquí mismo. Y vamos a tratar de ejecutar esto. Otra vez. Tenemos exactamente lo mismo. Ahora bien, esto se puede simplificar aún más usando el for of loop, que es cuatro concept car de autos. Entonces ahora esto es solo decir, pasar por cada elemento de automóvil dentro de la matriz de autos. Y podemos console.log coche. Y verás que está desplazándose hacia abajo. Tenemos exactamente lo mismo. De hecho, aclaremos esto. Ahora para que quede aún más claro. Y tal vez esta es la alternativa que prefieres. De hecho, puedes correr autos y luego llamar al foreach y pasarle lo que se llama una función, un auto y registrar este auto de inmediato. Y nuevamente, tenemos exactamente lo mismo. Así concluye nuestra demo y los veré de vuelta en las diapositivas. Muy bien, ejercicios. Intenta escribir un script que logre números 50-60, pero incluyendo 60, usando los cuatro tipos diferentes de bucles. Segundo, definir una matriz de cadenas con items, hello, world, array, y bloquear cada elemento con cada uno de los cuatro tipos de bucle. Un pequeño indicio aquí, la longitud de la matriz podría ser muy útil para el tiempo y para los bucles cuando estás haciendo esto. Bien chicos, estoy feliz de responder cualquier duda y los veré en la siguiente lección. 13. Declaración de cambiador: Hola chicos, En esta lección vamos a repasar la sentencia switch, la última lección dentro del control de flujo. Una sentencia switch le permite evaluar varios casos y ejecutar algo cuando un caso coincide. Por defecto, todos los casos se verificarán de arriba a abajo y usaría un break para salir toda la sentencia si un caso coincide. Repasaremos pseudocódigo así como un ejemplo para que esto quede más claro. Pero piense en una declaración switch como una buena alternativa para igualar muchas condiciones. Entonces esta es una alternativa al uso de muchos bloques if-else. Lo mismo se puede hacer con muchos si otros bloques. Entonces echemos un vistazo al pseudocódigo. Primero tienes la propia sentencia switch en la línea número uno. Dentro del paréntesis, pones alguna variable que quieras comparar. Y luego tienes el bloque de código en las llaves. Después, verá que cada elemento dentro de la instrucción switch se inicia por caso. After case es esencialmente lo que quieres comparar una variable con la que comparar. Si variable a comparar es estrictamente igual al primer caso r1 que haga algo, y verá el uso de break ahí. Entonces cuando decimos break, decimos exit out de la sentencia switch completamente. Si no tienes que romper, realidad pasarás paso a paso por todas las declaraciones del caso. Y si algo más machacó debajo, ese bloque de código también se ejecutará. Entonces echemos un vistazo a la línea número siete. Ahora, mirando el segundo caso. Si variable a comparar es igual al segundo caso, entonces vamos a ejecutar hacer otra cosa. Pero fíjense que no hay declaración break, y esta es una parte rara de TypeScript. Y que si emparejas en un comunicado y no hay descanso, seguirás ejecutando todos los casos a continuación como si hubieran coincidido. Entonces si variable a comparar es igual al segundo caso, hacer otra cosa se ejecutará en ese segundo caso, sentencia case. Pero el tercer caso también coincidirá independientemente de si variable a compara igual al tercer caso. Así que hacer algo más en realidad se llamará dos veces. Ahora claro que tienes la cláusula por defecto y eso se ejecuta cuando nada ha coincidido. Veamos un ejemplo. Esto es directamente de los documentos de Mozilla. Entonces, primero declaremos un animal constante que es igual a jirafa. Ahora vamos a encender este animal. Entonces si los animales vaca, que no se ejecuta nada. Si animal es jirafa, que es Console.log, es una jirafa. Pero fíjense que ahí no hay declaración de ruptura. Por lo que continuarás ejecutando todos los segmentos de casos a continuación como si hubieran coincidido. El caso para perro correrá pero ahí no hay nada. Entonces no hacemos nada. Pero el caso de PE en realidad también se ejecutará. Entonces registrarás. Es una jirafa y mal pagada. También te encanta console.log. Este animal no está extinto. Y luego finalmente tienes la declaración break. Entonces cualquier cosa después de dinosaurio no se corre. Digamos animales, algo más que no coincidía con ninguno de los casos, entonces por defecto, registrarás que este animal está extinto. Bien, entonces un ejercicio para esta lección, escribir una declaración switch que opere en un número llamado mi número y abordar los siguientes casos. Cuando mi número es igual a un registro, es uno. Cuando son cinco log son cinco. Y cuando mi número no es ni uno ni cinco log no 145. Como siempre, avíseme si ustedes se encuentran con algún problema y los veré en la siguiente lección. 14. Funciones: Oigan chicos, espero que les vaya bien. Y eso es menos de lo que estamos repasando funciones. Esta es posiblemente una de las cosas más importantes dentro JavaScript o la programación en general. El código complejo está realmente construido sobre las funciones de composición. Una función en pocas palabras toma una o más entradas llamadas parámetros o variables, y devuelve un tipo de retorno opcional. Así se puede pensar en una función como una caja negra. Pones en una entrada, algo pasa dentro de la caja negra. Entonces esto es lo que la función se encarga de hacer. Y luego se obtiene un cierto número de salidas. Y digo opcional tipo de retorno aquí porque en realidad no necesitas devolver algo de una función. A menudo, las funciones devuelven algún tipo de tipo de retorno dependiendo de para qué sirve la función. Una función debe ser una unidad básica de trabajo. Debe hacer una cosa y ser nombrada apropiadamente. Entonces, por ejemplo, prefijarías tu función con get, calcula o analiza dependiendo de para qué sirve la función. Generalmente, es una buena idea tener una función para una unidad de operación. Entonces, si haces dos cosas dentro de la función, Esa es una buena señal de que debes dividir esa función en dos funciones separadas. Bien, así que un poco sobre las declaraciones de funciones dentro de TypeScript. Empecemos por la línea número uno. Declaramos una función con la palabra clave function. Sus entradas o parámetros están separados por comas. Entonces aquí tenemos primer input y tenemos dos puntos con el tipo de primer input. Entonces tenemos la segunda entrada separada por una coma. La segunda entrada es de tipo, segundo tipo de entrada para denotar el tipo de retorno de la función, inicia con los dos puntos después del corchete final de los parámetros de la función, y se especifica el tipo de devolución inmediatamente después. Entonces por supuesto tienes las llaves para denotar el bloque de código para la función. Puedes hacer lo que quieras dentro de la función. Y por supuesto tienes acceso a la primera entrada así como a la segunda entrada. Y al final, quiere devolver algún tipo de variable que corresponda con el tipo de retorno. Yo dije que el tipo de devolución es opcional. Entonces en línea número ocho, si omitas ese punto y coma final con un tipo, significa que TypeScript realmente inferirá el tipo de retorno de mi nombre de función. Entonces, sea cual sea el tipo de variable de tipo return type, TypeScript anotará mi nombre de función para devolver ese tipo. También hay una sintaxis alternativa para declarar una función. Y eso es asignar realmente una función a una variable. En la línea número 14, verás que decimos const mi función de flecha. Esto es muy similar a declarar una variable de tipo número o de tipo cadena. Entonces tienes los paréntesis para declarar tus entradas. Entonces tienes una entrada llamada mi entrada de mi tipo de entrada, y luego con dos puntos después, denotas el tipo de retorno. Y entonces tienes esta flecha de clases usando el signo igual así como el operador mayor que con una función paréntesis justo después. Entonces, como el nombre de la variable realmente implica, esta declaración se llama función de flecha. Entonces tienes una función normal declarada mediante el uso de la palabra clave function. Y tienes una función de flecha declarada usando la sintaxis de flecha, y la asignas a una constante o a una variable. Entonces, ¿qué puedes poner dentro de una función? Esto es en realidad todo lo que quieras. Cualquiera que sea el código válido dentro de TypeScript, se puede poner dentro de una función. Todo lo que hace la función, es abstraer alguna pieza de lógica o una pieza de código en bloques que se pueden reutilizar a lo largo de su código. Así podrás llamar a tu función varias veces a lo largo del código. Y eso significa que no tienes que copiar y pegar bloques de código idénticos alrededor de tu código. Así que un poco en buenos nombres de funciones, generalmente, se quiere prefijo con un verbo dependiendo de lo que haga la función. Entonces un ejemplo es sumar números. Así que aquí estamos usando la sintaxis de flecha. Estamos diciendo que los números impares es una función que toma como su primer número de tipo y el segundo número de tipo devuelve un número. Y verás que dentro del cuerpo de la función, solo estamos agregando primero más segundo. Ahora intentemos declarar una interfaz en la línea número cinco. Es una interfaz bastante simple con campos nombre y edad. Entonces usamos la sintaxis de declaración de función. Llamamos a este GetAge porque es conseguir la edad y devolverlo. Verás que el parámetro toma en una persona de tipo persona y devuelve un número. Con solo leer la declaración de función, puede inferir bastante bien que el tipo de número de retorno es la edad de la persona. Y claro, dentro de la función cuerpo, regresamos persona punto h, que es la edad, se firma para que se le dé persona. Objeto. Typescript también permite parámetros nulos y predeterminados. Entonces en el primer ejemplo tenemos myfunction. Entonces tenemos un argumento o un parámetro llamado argumento cognoscible. Echa un vistazo a ese signo de interrogación con el colon. Esto significa que el argumento nullable es opcional. Y también tenga en cuenta que no estamos devolviendo nada dentro de esta función. Type script entonces inferirá que el tipo de retorno de mi función es nulo. Entonces siempre que veas un vacío. Realmente es solo otro nombre para nada en el bloque de código dentro de mi función, el tipo de argumento cognoscible, porque hemos especificado que es nullable u opcional, es number o undefined. Entonces console.log argumento cognoscible dará undefined si solo llamas a mi función sin pasar ningún argumento. O si pasas por ejemplo el número dos, entonces registrará dos. Ahora a los parámetros predeterminados. En el ejemplo que tenemos aquí, con default es de tipo number y lo que es igual a sintaxis. Estamos diciendo que si no se proporciona ningún argumento para nuestro default de crecimiento, por defecto esa variable por defecto a dos. Y así si llamamos a otra función con argumento cuatro, entonces argumento default es cuatro. Y así claro, dentro del cuerpo de la función, registrarás para. No obstante, si llamas a otra función sin nada, entonces armado con default no se da. Por defecto será dos. Entonces verás que también se registrará. Hola chicos, en este ejemplo, vamos a escribir una función suma números pares que suma todos los números pares dentro una matriz numérica y vuelve al sol. Así que permítanme declarar primero la función. Vamos a ponerle algunos números pares. Va a tomar en una matriz de números a los que voy a llamar números. Y va a devolver un número. Entonces este es el nombre de la función, algunos números pares. Toma en un parámetro, el tipo de matriz numérica, y el parámetro se llama números. Entonces estamos devolviendo un número y verás que tenemos un error de mecanografía aquí. Esto es esencialmente decir que no estamos devolviendo un número a pesar de que le hemos dicho a TypeScript que la función algunos números pares deberían devolver un número. ejemplo, si solo decimos retorno cero, este error desaparece porque estamos devolviendo un número aquí en este cuerpo de función, podemos escribir lo que queramos. Pero el papel de la función es sumar todos los números pares dentro de la matriz de números. También escribamos una prueba rápida para esto. Declaremos una matriz 12345. Y sólo vamos a registrar el resultado de algunos números pares cuando pasemos en esta matriz. Así que vamos a ejecutar esto rápidamente y verás que obtenemos cero log porque por supuesto estamos devolviendo cero aquí. Ahora intentemos implementar la propia función. Vamos a hacer un seguimiento de la suma a través de la variable valle. Y aquí necesitamos sumar todos los números pares en números. Para lograr esto, voy a usar para cada uno en los números de matriz. Aquí estamos pasando una función de devolución de llamada. Y su función de devolución de llamada es una función declarada usando la sintaxis de flecha. Para cada uno toma una devolución de llamada que toma un parámetro num, que es cada elemento dentro de la matriz. Num será. Para el caso de nums, será de 1,234.5. A medida que iteramos a través de la matriz de números, estamos interesados en todos los números pares dentro de la matriz. Sin embargo, ¿cómo lo hacemos? Recordemos el operador de módulo. Entonces voy a decir si num modulo dos es estrictamente igual a cero, y modulo es el resto después de la division por este numero. Si es un número par, cuando divides por dos, el resto siempre es cero. Entonces sabemos que NUM está incluso aquí. Cuando sabemos que ese número es par, queremos incrementar el valor del valor. Por último, al final, vamos a devolver valor. Intentemos ejecutar esto. Veremos que el resultado es seis. Y claro, si aquí tomamos sólo los números pares que son 2.4, la suma debería ser seis. Intentemos cambiar esta matriz. Entonces vamos, digamos 12. Ahora bien esto es aún así que esperamos que se sumen seis a 12, que es 18, y eso es lo que obtenemos. Ahora intentemos sumar un número impar, 101. Esto es impar, por lo que no debe incluirse en el valor final. Ejecutamos esto de nuevo, vemos que volvemos a tener 18 meses, lo que significa que podemos estar algo seguros de que nuestra función, algunos números pares ha funcionado. Bien chicos, eso es todo para este ejemplo y los veré de vuelta en las diapositivas. Bien, así que en algunos ejercicios, primero, escriba una función log streams que tome en argumentos de cadena, como el argumento y no devuelva nada. Escribe una función para exponenciar el número dos que tome dos números a y b y devuelva un número, asteriscos dobles b. Y esta es la notación para tomar a la potencia de b dentro de TypeScript. Bien, número tres, eche un vistazo a la función de filtro de matriz, y verá que la función de filtro realmente toma otra función como parámetro. Este parámetro se llama la función de filtrado. Entonces la función que pases a filtro debe devolver true o false, indicando si quieres que el ítem actual sea incluido en la matriz final. Así que sumérgete un poco en la función de filtro de los perros y podrás ver con los ejemplos en la documentación que vinculé. Ahora con este fondo, escribe un script que cree la matriz de 1,234.5. Y luego crear una nueva matriz con esa función de filtro con solo los elementos pares de la matriz original. Un pequeño indicio aquí, el operador de módulo que hemos visto antes puede ser muy útil. Avísenme si ustedes tienen alguna duda y los veré en la siguiente lección. 15. Clases de ES5: Oigan chicos, espero que ustedes estén bien. En esta lección final, vamos a repasar las clases. No vamos a pasar mucho tiempo con las clases porque realmente solo reutilizan lo que ya sabemos. Gran parte de la sintaxis se puede ver a lo largo de la documentación. Además, las clases no se suelen usar muy a menudo dentro de TypeScript. Verá funciones así como objetos con mayor frecuencia. Y toda la clase realmente es, es un objeto fortalecido. Encapsula ciertas funciones y propiedades e imita una sintaxis orientada a objetos. A pesar de que JavaScript o TypeScript no es realmente programación orientada a objetos, se utiliza para agrupar la funcionalidad relacionada. En lugar de tener funciones separadas son propiedades separadas dentro de un objeto. Nuevamente, esto no se usa comúnmente en la producción dependiendo de dónde se encuentre. Los objetos básicos parecen ser más populares así como funciones que toman en ese objeto y realizan alguna operación sobre él. Veamos rápidamente la sintaxis de una clase a través de un ejemplo. En línea número uno, estamos usando la palabra clave class para declarar una clase llamada mi nombre de clase. Entonces por supuesto tienes un constructor. Entonces, al invocar al constructor, creas una instancia del nombre de mi clase. Verás que el constructor se parece mucho a una función y realmente lo es. Toma en primer parámetro de tipo número y segundo parámetro de tipo string. Luego usamos la, esta palabra clave. Cuando estás usando esto, estás haciendo referencia a una propiedad en una instancia del nombre de mi clase. Entonces, si vienes de un patio de recreo orientado a objetos, esto debería ser sencillo. Entonces lo verás en la línea número siete así como en la línea número 13. Puedes usar el mismo tipo de sintaxis para declarar funciones en la propia instancia. En línea número siete, estamos declarando función de clase. Y luego puedes usar esto para acceder a otros miembros de la misma instancia. Entonces, al usar este punto otra función de clase, estamos llamando a otra función de clase e invocándola dentro de la función de clase. Luego está la palabra clave estática. Nuevamente, si vienes de un fondo de programación orientado a objetos, esto debería ser bastante sencillo. Entonces usas la palabra clave static y puedes declarar propiedades así como funciones en el nombre de mi clase. Y estos por supuesto, están atados a la clase y no a una instancia de la clase. En la línea número 17, estamos declarando una propiedad estática de cadena de HelloWorld. Y en línea número 19, solo estamos creando una función estática. Y como ocurre con la mayoría de los lenguajes orientados a objetos, puedes crear una instancia de una clase usando el nuevo número 26 en línea. Estamos diciendo que la variable mi instancia de clase, y estás creando una instancia del nombre de mi clase usando sabía mi nombre de clase y pasando los parámetros del constructor. Entonces en mi instancia de clase. Puedes llamar a cosas como función de clase u otra función de clase porque pertenecen a una instancia de la clase. Entonces eso es esencialmente todo con clases. Nuevamente, esta es una descripción bastante básica y rápida sobre la sintaxis de clase solo para que sepas lo que esto significa. Definitivamente hay mucho más en la documentación. Sin embargo, porque no se usan muy a menudo y la gente tiende a preferir los objetos así como solo las funciones puras. No pasamos mucho tiempo pasando por clases. Aquí hay algunos ejercicios. Primero, cree un elemento de lista de tareas pendientes de clase. Ese número uno tiene nombre como una propiedad de cadena que se crea a través del constructor. También agregar una propiedad se completa, que es false cuando se crea una instancia de elemento de lista de tareas pendientes. Así se puede asignar este punto se completa a false dentro del constructor. También agregue una función en la instancia llamada Mark done. Dentro de mark done, el cambio se completa en la instancia, por lo que hay que usar este punto se completa a true, luego crear una función estática llamada log properties. Así que recuerda que necesitarás usar la palabra clave static aquí. Tomado un elemento de lista de tareas pendientes como parámetro, y registrar las propiedades usando este nombre de plantilla. Y luego agrega el nombre y luego se completa, y luego agrega si está terminado. Número dos. Ahora, con su nuevo elemento de lista de tareas pendientes de clase, cree una instancia de los elementos que debe usar las palabras clave CONST o dejar y crear una instancia llamada todo item y darle el nombre de lavar los platos. Luego intente usar la propiedad estática o la función estática todo-do list item dot log properties para registrar este elemento y ver si es lo que espera, luego intente llamar a mark done en la instancia. Entonces estás llamando a esto en el artículo de todo y no en el elemento de la lista de tareas pendientes de clase. Luego use log properties, la función estática para registrar la instancia. De nuevo, después de que Mark hecho ha corrido. Eso es todo para este chicos. Y ese es el final del curso. Habrá otro video repasando el proyecto de conclusión. Así que los veré ahí, chicos. 16. Revisión de proyectos del curso: Hola chicos. En este video, vamos a repasar el proyecto de conclusión. El proyecto consiste en hacer listas de tareas pendientes dentro de TypeScript. Así que primero vamos a definirlo para crear un elemento de tareas pendientes de interfaz para especificar la estructura de una tarea pendiente. Y he dado algunos detalles aquí para los diferentes campos dentro del ítem de tareas pendientes. En la siguiente sección se le pide agregar algunas funciones de utilidad. Así que crea todo id, que genera el ID adecuado del elemento de la lista de tareas pendientes, así como create to do, que lo tomará y parámetros innecesarios y te dará un ítem de tareas pendientes. Entonces esto se llama alternativamente una función de fábrica o una función constructora. A continuación, vamos a crear un tipo de listas de tareas pendientes, que es simplemente una matriz de elementos de tareas pendientes. Vamos a definir algunas funciones que operan en esta lista de tareas pendientes para hacer fueron movidas a hacer así como completas para hacer. Después de completar estas funciones, pasamos por un escenario en el que puedes probar tus funciones. Por lo que estos se enumeran aquí al final del documento. Al final, te pido que intentes crear una nueva lista que no incluya todas las tareas pendientes completadas dentro de tus pequeñas pruebas aquí a lo largo del ejercicio. Intenta cerrar la lista después de cada operación solo para confirmar que lo que crees está haciendo tu código es en realidad lo que está haciendo. Dale una oportunidad a este ejercicio. Déjame saber lo que se te ocurre y siempre estoy feliz de responder preguntas. En el siguiente video, vamos a repasar una solución de ejemplo para este proyecto de conclusión. Te veré ahí. 17. Solución de proyectos del curso: Hola chicos, En este video final, vamos a repasar una solución de muestra para el proyecto. Entonces, en aras de la brevedad, estoy omitiendo todos los registros de la consola así como el código de prueba. Y repasando las funciones centrales que se le pide implementar dentro del proyecto final. Entonces primero, estamos creando una interfaz llamada todo item. Tiene estos campos id name creados en un campo de descripción opcional, así como en campo es completado. Leemos algunas funciones de utilidad. El primero se crea do id, y aquí usamos interpolación de cadenas poniendo en el nombre así como el creado. En. A continuación, estamos creando una fábrica o una función constructora llamada create. Para hacerlo, solo necesita tomar un nombre y una descripción porque por defecto creamos ese punto hasta la fecha ahora, lo que le dará esencialmente los milisegundos Unix desde el 1 de enero de 1970. Y entonces este es un número que indica el número de milisegundos que han pasado desde este tiempo tan especial. Entonces podemos llamar a nuestra otra función util create todo id. para crear el ID, vamos a pasar el nombre y la descripción directamente al objeto, así como creado, porque ya hemos creado esta constante aquí. Por supuesto que se completa, por defecto será false cuando se crea por primera vez un to-do. A continuación, definimos una lista de tareas pendientes de tipo, que es simplemente una matriz de elementos de tareas pendientes. Entonces tenemos nuestras tres funciones que operan en una lista de tareas pendientes. Entonces el primero es la actitud, que creará una nueva lista. Y lo que hacemos es usar el operador spread. Esto esencialmente pone todos los elementos de la lista de tareas pendientes existente, la nueva matriz que estamos declarando. Y luego agregamos el nuevo todo encima. Next for removed to do, usamos la función filter y pasamos una función callback aquí, o alternativamente una función de flecha. Porque filter incluirá todos los elementos para los que esta función devuelve true. Queremos incluir todos con el id que no coincida con este id Así que el único caso en el que filter eliminará un elemento de la lista de tareas pendientes es cuando el ID de tareas pendientes coincide con el ID que queremos eliminar. Filter realmente nos da una nueva matriz. No cambia la lista de tareas pendientes existente. Entonces estamos diciendo que devuelve una nueva lista como a través de la anotación de tipo TypeScript así como el comentario. Por último, tenemos completo que hacer. Usamos la función find en la matriz. Y la multa toma otra función de devolución de llamada. Y esta devolución de llamada debería devolver true si esto es lo que estamos buscando. Entonces estamos buscando que ver con el ID que sea estrictamente igual al ID que queremos encontrar. Y así si hemos encontrado esta pendiente, recuerden, si no se encuentra nada, bien volverá indefinido, lo cual es falso. Entonces si no es falsy, entonces no es indefinido, entonces hemos fundado para hacer y luego podemos cambiar se completa a true. Por último, al finalizar el ejercicio, le pido que cree una nueva lista eliminando todas las tareas pendientes completadas de la lista de tareas pendientes. De hecho escribí una función para esto llamada remove completed to do is again, usamos una función de filtro aquí. Recuerde, la función pasada dentro del parámetro para filtrar debe devolver true si queremos incluir el ítem en la matriz resultante. Y true return false si queremos excluir ese ítem. Y así queremos excluir todos los artículos que ya están terminados. Si ya está terminado, queremos devolver false y false significa que queremos excluirlo. Entonces, si queremos incluirlo para hacer es esencialmente lo inverso de si se completa la pendiente. Entonces si no se completa, entonces se completa como falso. Lo invertimos con este signo de exclamación. Falso, invertido es cierto, y eso significa que queremos incluirlo. Si se completa x2, entonces la inversa de true es false. Y así esta función de filtro dará false, lo que significa que el ítem no será incluido en la lista de tareas pendientes resultante. Y eso es prácticamente todo. Puede usar esencialmente todas estas funciones dentro de su código de prueba. Y luego intenta registrar el resultado de cada operación. Y deberías poder ver que el código se ejecuta como esperamos que lo haga. Muchas gracias chicos por tomar el curso. Espero que hayas aprendido mucho sobre JavaScript, TypeScript y programación en general. Espero verte en un curso futuro. Cuídate.