Introducción al mecanografiado

Los primeros idiomas con los que he programado son C y Java. Con estos idiomas, cada vez que defina una variable necesita especificar su tipo. Si intenta asignarles un valor de tipo diferente, el compilador se quejará: // main.c int main () {int x = “dos”; regresar 0; }> Cc main.c -o Main // Advertencia: La inicialización hace entero de Pominter sin el problema es que debido a mi falta de experiencia, muchas de las quejas recibidas del compilador parecían crípticas y complejas. Es por eso que, al final, miré al compilador como un instrumento que limitó mi creatividad, cuando en realidad debería ser un socio que está allí para ayudar.

Más tarde, en mi carrera, comencé a usar algunos lenguajes de programación impotentes, como JavaScript o PHP. Lo encontré bastante genial: fue extremadamente fácil protestar rápidamente las cosas sin lidiar con un compilador pretencioso. Como ya sabe, los lenguajes de programación en los que se basa WordPress son PHP y JavaScript. Esto significa que probablemente esté acostumbrado a codificar sus complementos y temas sin un compilador que supervise la espalda. Solo eres tú, tus habilidades y tu creatividad. Bueno, y errores como este: const user = getUser (userId); salud (user.name); // Uncugght typeError: el usuario está indefinido si se ha cansado de errores de tipo indefinidos en su código, es hora de agregar un compilador al flujo de trabajo. Echemos un vistazo a qué es un TypeScript y cómo nos permite mejorar la calidad de nuestro software con múltiples pedidos.
Lo que es TypeScript TypeScript es un lenguaje de programación basado en JavaScript que se ha creado con el fin de agregar una tipificación fuerte y estática. Los tipos de mecanografiado nos permiten describir la forma de nuestros objetos y variables, lo que resulta en un código mejor documentado y robusto. TypeScript mismo será responsable de validar todo lo que hacemos. Según lo diseñado, TypeScript es un JavaScript Superst. Esto significa que cualquier código escrito en JavaScript es, por definición, tipos mecanografiados válidos. Pero el reverso no es cierto: si usa funciones de TypeScript específicas, el código resultante no es válido JavaScript hasta que lo transpila. A medida que funciona TypeScript para comprender cómo funciona TypeScript, utilizaremos su Playground, un pequeño editor en el que podemos escribir TypeScript Código y veamos qué nos dice el compilador al respecto. Siendo un JavaScript Superst, escribir el código TypeScript es extremadamente fácil. Básicamente el siguiente código JavaScript: Let User = “David”; Dejar edad = 34; Let WorksAtnelio = verdadero; console.log (usuario, edad, worksatnelio); También es código mecanografiado. Puede copiarlo y pegarlo a TypeScript Playground y verá que es compilación. Entonces, ¿qué tiene de especial esto? Sus tipos, por supuesto. En JavaScript, puede hacer lo siguiente:
Deje que el usuario = “David”; Dejar edad = 34; Let WorksAtnelio = verdadero; usuario = {nombre: “Ruth”}; console.log (usuario, edad, worksatnelio); Pero eso desencadenará un error en TypeScript. Pruébelo en el patio de recreo y verá el siguiente error: escriba ‘{name: string; } ‘No se puede asignar para escribir’ cadena ‘. Entonces, ¿de qué se trata? TypeScript puede deducir automáticamente el tipo de variable. Esto significa que no debemos decir explícitamente “oye, esta variable es una cadena” (o un número, o un booleano, o cualquier otra cosa); En cambio, observó el valor que se le dio por primera vez y deduce su tipo sobre la base. El usuario es (y siempre debe ser) una cadena. El problema es que un poco más tarde intentamos cambiar el tipo de nuestra variable de usuario atribuyendo un objeto que tiene una sola propiedad (nombre) cuyo valor es la cadena “Ruth”. Claramente, este objeto no es una cadena, por lo que TypeScript se queja y nos dice que la atribución no se puede hacer. Hay dos formas posibles de remediar esto: // Opción 1 Sea usuario = “David”; user = “Ruth”; // OK. // Opción 2 Sea usuario = {nombre: “David”}; usuario = {nombre: “Ruth”}; Seamos explícitos cuando definamos los tipos de nuestras variables, pero la inferencia de tipos está ahí para ayudarnos. Si lo queremos, podemos decir explícitamente TypeScript el tipo de variable:
Deje que el usuario: String = “David”; Sea edad: número = 34; Let Worksatnelio: boolean = true; console.log (usuario, edad, worksatnelio); que reproduce exactamente el mismo resultado que los tipos deducidos por TypeScript. Ahora, esto plantea la pregunta: si TypeScript puede deducir tipos automáticamente, ¿por qué necesitamos esta función? Por un lado, especificar explícitamente los tipos puede servir para documentar mejor nuestro código (que será aún más claro en la siguiente sección). Por otro lado, nos permite resolver las limitaciones del sistema de tipo de tipo. Sí, lees bien: hay casos en los que la inferencia no es muy buena y el mejor mecanografiado que puede hacer es decirnos que “bueno, no sé cuál debería ser exactamente esta variable; ¡Supongo que puede ser cualquier cosa! ”Considere el siguiente ejemplo: const getName = (persona) => persona.name; Sea David = {nombre: “David”, edad: 34}; console.log (getName (David)); // Parámetro ‘Persona’ tiene implícitamente un tipo ‘cualquier’. En este caso, definimos una función GetName que recibe un parámetro y devuelve un valor. Observe cuántas cosas asumimos en una función tan simple: esperamos un objeto (persona) con al menos una propiedad llamada nombre. Pero no tenemos garantía de que cualquiera que llame a esta función la use correctamente. Pero incluso si lo hago, todavía no sabemos cuál es el resultado de esta función. Por supuesto, podría suponer que un nombre será una cadena, pero lo sabe solo porque eres humano y entiendes el significado de esa palabra. Pero mira los siguientes ejemplos:

GetName (“hola”); // Error getName ({}); // Devuelve GetName no fallado ({nombre: “David”); // devuelve una cadena getName ({nombre: true}); // Return of Boolean Cada vez que llamamos a la función, ¡obtenemos un resultado diferente! Entonces, a pesar del hecho de que TypeScript nos sigue, todavía enfrentamos problemas clásicos con JavaScript: esta función puede recibir cualquier cosa y puede devolver cualquier cosa. Defina sus propios tipos, pero antes de hacerlo, veamos otro tipo de mecanografía adicional: tipos de datos personalizados. Hasta ahora, casi todos nuestros ejemplos han utilizado tipos básicos como cadena, número, booleano, etc., que creo que son bastante fáciles de entender. También hemos visto estructuras de datos más complejas, como objetos:
Sea David = {nombre: “David”, edad: 34}; Pero no le presté demasiada atención a su chico, tal como se deduce por TypeScript, ¿verdad? Todo lo que he visto es un ejemplo de atribución no válida debido a un desajuste de tipificación: Let User = “David”; usuario = {nombre: “Ruth”}; // escribe ‘{name: string; } ‘No se puede asignar para escribir’ cadena ‘. que de alguna manera sugirió que el tipo de objeto era “{name: string;}”, que puede leer como “este es un objeto con un nombre de propiedad”. Si así es como se definen los tipos de objetos, entonces lo siguiente debe ser válido TypeScript:
Let David: {nombre: cadena, edad: número} = {nombre: “David”, edad: 34}; Y realmente lo es. Pero estoy seguro de que estará de acuerdo en que no es conveniente. Afortunadamente, podemos crear nuevos tipos en TypeScript. En general, un tipo personalizado es prácticamente un tipo de tipo normal con un nombre personalizado: Type Person = {Nombre: String; Edad: número; }; Let David: persona = {nombre: “David”, edad: 34}; ¿En voz alta? Ahora que tenemos el tipo de persona, podemos anotar fácilmente nuestra función GetName y especificar claramente el tipo de parámetro de entrada: const getName = (persona: persona) => persona.name; ¡Y esta simple actualización proporciona a TypeScript mucha información! Por ejemplo, ahora puede deducir que el tipo de resultado de esta función es una cadena, porque ciertamente sabe que el atributo de nombre de una persona también es una cadena: Let David: Person = {Nombre: “David”, Age: 34 }; Deje DavidName = GetName (David); DavidName = 2; // escriba ‘número’ no se puede asignar para escribir ‘cadena’. Pero, como siempre, puede anotar explícitamente el tipo de resultado si lo desea: Constitame = (Person: Persona): String => Person.name; Más cosas de TypeScript … Finalmente, quería compartir algunos datos interesantes de los que puede beneficiarse si define sus propios tipos en TypeScript. TypeScript es muy exigente cuando se trata de asignar valores variables. Si ha definido explícitamente el tipo de una variable particular, solo puede asignar valores que coinciden exactamente con ese tipo. Veamos con algunos ejemplos: type persona = {nombre: string; Edad: número; }; Let David: persona = {nombre: “David”, edad: 34}; // ok let ruth: persona = {nombre: “Ruth”};

// La propiedad ‘edad’ falta en el tipo ‘{name: string; } ‘Pero requerido en el tipo’ persona ‘let toni: persona = {nombre: “toni”, edad: 35, geer: “m”; // escribe ‘{name: string; Edad: número; Género: cadena; } ‘No es asignable a escribir’ persona ‘. Los objetos literales solo pueden especificar propiedades conocidas, y el ‘género’ no existe en el tipo ‘persona’. Como puede ver, una persona variable acepta solo objetos que respetan completamente a la persona. Si faltan algunos atributos (Ruth no tiene una edad) o hay más atributos que los incluidos en el tipo (Toni tiene un género), TypeScript se quejará y activará un tipo de desajuste. Pero si hablamos de invocar funciones, ¡las cosas son diferentes! Los tipos de argumentos en una función no son un requisito exacto, pero especifique la interfaz mínima que los parámetros deben respetar. Lo sé, lo sé, es demasiado abstracto. Echemos un vistazo al siguiente ejemplo, que creo que aclarará las cosas: type namedObject = {name: String; }; Const getName = (obj: namedObject): string => obj.name; Const ruth = {nombre: “ruth”} getName (ruth); // ok const David = {nombre: “David”, edad: 34}; GetName (David); // ok const toni = {firstName: “toni”}; GetName (Toni); // Argumento del tipo ‘{FirstName: String; } ‘No es asignable al parámetro de tipo’ namedObject ‘. Propiedad ‘Nombre’ falta en el tipo ‘{FirstName: String; } ‘Pero requerido en el tipo’ namedObject ‘