Tutorial de mecanografiado
Por qué debería interesarse por Typecript
La pregunta sigue siendo por qué debería preferir usar Typecript; aquí hay algunas razones por las que los desarrolladores de JavaScript deberían considerar aprender Typecript.
Tipo estático
Javascript se escribe dinámicamente, lo que significa que no conoce el tipo de la variable hasta que la instancia en tiempo de ejecución, lo que puede generar problemas y errores en su proyecto. . Typecript agrega soporte para escritura estática en Javascript, lo que puede ser muy útil si lo usa correctamente para manejar errores causados por variables escritas incorrectamente. Error Aún tienes control total sobre qué tan estricto es el código de entrada, o incluso no utilizas ningún tipo.
Mejor soporte del entorno de desarrollo integrado
En comparación con Javascript, una de las principales ventajas de Typescript es un mejor soporte del entorno de desarrollo integrado, incluida la inteligencia del compilador Typecript, indicaciones en tiempo real, depuración, etc. . Además, existen muchas extensiones para mejorar aún más su experiencia de desarrollo de Typecript.
Aplicar nuevas funciones de ECMAScript
Typecript le permite utilizar las últimas funciones de ECMAScript y convertirlas al destino ECMAScript de su elección. Esto significa que puede desarrollar aplicaciones utilizando las últimas herramientas sin preocuparse por la compatibilidad del navegador.
Cuándo deberías usarlo
Ahora debemos saber por qué Typecript es útil y cómo puede mejorar nuestra experiencia de desarrollo. Pero no resuelve todos los problemas y ciertamente no impide que usted mismo escriba código incorrecto. Entonces, echemos un vistazo a las situaciones en las que debería utilizar Typecript.
Cuando tienes una base de código grande
Typecript es una gran adición a bases de código grandes porque puede ayudarte a prevenir muchos errores comunes. Esto es especialmente importante cuando varios desarrolladores trabajan en el mismo proyecto.
Cuando los miembros de su proyecto ya conocen lenguajes de tipado estático
Otra situación obvia para usar Typecript es cuando usted y su equipo ya conocen lenguajes de tipado estático como Java y C#). y ya no quiero escribir Javascript.
Configuración/compilación
Para configurar Typecript, simplemente lo instalamos usando el administrador de paquetes npm y luego creamos un nuevo archivo Typecript.
Una vez completada la instalación, podemos continuar explorando la sintaxis y funcionalidad proporcionada por Typecript.
Tipos
Ahora echemos un vistazo a los tipos proporcionados por Typecript:
Número
Todos los tipos de valores en Typecript son de punto flotante números. Todos los números, incluidos los binarios y hexadecimales, son tipos numéricos.
Cadenas
Al igual que otros lenguajes, Typecript utiliza el tipo de datos de cadena para contener datos de texto.
También puedes utilizar comillas invertidas para aplicar cadenas multilínea y expresiones incrustadas.
Booleano
Tyscript admite todos los tipos de datos básicos, donde los valores booleanos deben ser verdaderos o falsos.
Especificación de tipos
Ahora que comprendemos los tipos de datos básicos, podemos ver cómo especificar tipos en Typecript. Básicamente, simplemente escribe el tipo de variable después del nombre y dos puntos.
Tipo único
A continuación se muestra un ejemplo de cómo podemos especificar el tipo de datos de cadena para una variable
Todos los demás tipos de datos se utilizan de la misma manera.
Múltiples tipos
Aún puedes especificar múltiples tipos de datos para una variable usando el operador |:
Aquí, especificamos dos tipos de datos para la variable usando | tipo. Ahora podemos almacenar cadenas y valores numéricos en él.
Comprobación de tipos
Ahora veamos cómo comprobar si una variable es del tipo correcto. Tenemos varias opciones, pero aquí sólo te he mostrado las dos más comunes.
Typeof
typeof solo conoce tipos básicos. Esto significa que solo puede verificar si la variable es uno de los tipos de datos que definimos anteriormente.
En este ejemplo, creamos una variable de tipo Cadena y usamos el comando typeof para verificar si str es de tipo Número (siempre falso). Luego imprimimos si es un valor numérico.
Instancia de
La instancia del operador es casi la misma que typeof, excepto que también puede verificar tipos personalizados que no han sido definidos por JavaScript.
Aquí crearemos un tipo personalizado (que analizaremos más adelante en este artículo) y luego crearemos una instancia del mismo. Posteriormente comprobaremos si realmente es una variable de tipo Humano y si es así la imprimiremos en la consola.
Aserción de tipo
A veces, también necesitamos convertir variables a tipos de datos específicos. Esto suele suceder cuando especifica un tipo genérico (como cualquier tipo) y desea utilizar sus métodos específicos de tipo.
Hay muchas formas de resolver este problema, pero aquí solo compartiré dos de ellas.
Palabra clave As
Convierta el tipo de una variable agregando la palabra clave as después del nombre de la variable.
Aquí convertimos la variable str en una cadena para usar la propiedad de longitud (incluso sin conversión si su configuración de TSLINT lo permite).
>Operador
También podemos usar el operador >, que tiene el mismo efecto que la palabra clave as, pero con diferente sintaxis.
Este bloque de código hace exactamente lo mismo que el bloque de código anterior. La única diferencia es la sintaxis.
Matrices
Las matrices en Typecript son colecciones de objetos idénticos que se pueden crear de dos maneras diferentes.
Crear una matriz
Usando []
Podemos definir un objeto de matriz especificando el tipo y luego usar [] para indicar que es una matriz .
En este ejemplo, creamos una matriz de cadenas que contiene tres valores de cadena diferentes.
Usar matrices universales
También podemos definir matrices universales especificando Array
Aquí, hemos creado una matriz de números que contiene cinco números diferentes.
Matrices de tipos múltiples (mixtos)
Además, podemos especificar múltiples tipos para una sola matriz usando el operador |.
En este ejemplo, creamos un valor que contiene tanto una cadena como un valor numérico.
Arreglos Multidimensionales
Typecript también nos permite definir arreglos multidimensionales, lo que significa que podemos almacenar un arreglo dentro de otro arreglo. Podemos crear matrices multidimensionales utilizando múltiples operadores [].
Aquí creamos una matriz que contiene otra matriz de números.
Tuplas
Las tuplas son básicamente como matrices, pero con una diferencia. Podemos definir el tipo de datos almacenados en cada bit. Esto significa que podemos restringir el tipo en una posición de índice fija mediante una enumeración entre corchetes.
En esta columna, definimos una tupla simple especificada como tipo numérico en la posición de índice 0 y como tipo de cadena en la posición de índice 1.
Esto significa que si intentamos colocar otros tipos de datos en esta ubicación de índice, se producirá un error.
Aquí hay un ejemplo de una tupla ilegal:
Enumeraciones
Como la mayoría de los otros lenguajes de programación orientados a objetos, las enumeraciones en Typecript nos permiten definir un conjunto de constantes nombradas. Typecript también proporciona enumeraciones numéricas y basadas en cadenas. Las enumeraciones se pueden definir en Typecript usando la palabra clave enum.
Enumeración numérica
Primero, aprenderemos sobre la enumeración numérica; en la enumeración numérica, hacemos coincidir el valor clave con el índice.
En lo anterior, definimos la enumeración numérica e inicializamos la reproducción en 0, la pausa en 1, etc.
También podemos dejar el inicializador vacío y Typecript lo indexará automáticamente empezando desde 0.
Enumeración de cadenas
Definir una enumeración de cadenas también es muy simple. Solo necesitamos inicializar el valor de la cadena después de definir cada valor de enumeración.
Aquí definimos una enumeración de cadena inicializando el estado con una cadena.
Objetos
Un objeto en Typecript es una instancia que contiene un conjunto de pares clave-valor. Estos valores pueden ser variables, matrices o incluso funciones. También se considera un tipo de datos que representa tipos no primitivos.
Podemos crear objetos usando llaves:
Aquí, hemos creado un objeto humano que contiene tres pares clave-valor diferentes.
Podemos añadir métodos a los objetos:
Tipos personalizados
Typescript también nos permite personalizar tipos para poder reutilizarlos más adelante. Para crear un tipo personalizado simplemente usamos la palabra clave type y definimos nuestro tipo.
En este ejemplo, definimos un tipo personalizado llamado Humano que contiene tres propiedades. Ahora veamos cómo crear un objeto de este tipo.
Aquí creamos una instancia del tipo personalizado y configuramos las propiedades requeridas.
Parámetros de método y tipos de retorno
Typecript nos permite especificar tipos de datos para parámetros de método y valores de retorno. Ahora veamos la sintaxis para definir funciones usando Typecript.
Aquí tenemos dos funciones de ejemplo, ambas con parámetros de tipos definidos. También podemos ver el tipo de retorno definido después del corchete de cierre.
Ahora, podemos llamar a nuestra función como javascript normal, pero el compilador verifica que proporcionamos los parámetros correctos a la función.
Atributos opcionales
Typecript nos permite definir atributos opcionales para métodos (nota: interfaces, etc. también pueden definir atributos opcionales). Los definimos mediante el operador ?
En este caso, apellido es un parámetro opcional, lo que significa que el compilador no generará errores cuando no proporcionemos una función de llamada.
Esto significa que ambos ejemplos son correctos.
Valor predeterminado
La segunda forma de utilizar propiedades opcionales es asignarles un valor predeterminado. Podemos asignar valores directamente en el encabezado de la función.
En este caso, apellido tiene un valor predeterminado, lo que significa que no tenemos que proporcionar el valor cada vez que llamamos al método.
Interfaces
Veamos un ejemplo para aclarar la definición:
Propiedades opcionales
En Typecript, a veces no Todas las propiedades de la interfaz son requeridos. Puede utilizar el operador ? después de un atributo para hacerlo opcional.
Aquí creamos una interfaz con una propiedad común y una propiedad opcional y la configuramos como opcional usando el operador ?. Esto hace que nuestras dos inicializaciones sean válidas.
Propiedades de solo lectura
Ciertas propiedades en la interfaz también deben modificarse para que solo se les asigne un valor cuando se crea el objeto por primera vez. Podemos especificar esto agregando la palabra clave de solo lectura antes del nombre de la propiedad.
En este ejemplo, el atributo id es de solo lectura y no se puede cambiar después de crear el objeto.
Módulos (módulo Barriles)
Los barriles nos permiten agregar múltiples módulos exportados en un módulo más conveniente.
Simplemente creamos un nuevo archivo que exportará múltiples módulos de nuestro proyecto (según ECMAScript, un archivo define un módulo, en este caso esto podría significar un agregado de módulo (Similar al archivo de entrada de la biblioteca , etc.)).
Luego podemos importar estos módulos a través de esta conveniente declaración de importación única.
Genéricos
Los genéricos nos permiten crear componentes que sean compatibles con múltiples tipos en lugar de un solo tipo. Esto hace que nuestros componentes sean "abiertos" y reutilizables.
Ahora quizás te preguntes por qué no utilizamos ningún tipo para que el componente acepte varios tipos en lugar de uno solo. Veamos un ejemplo para una mejor comprensión.
Necesitamos una función simple y tonta que devuelva los parámetros que pasamos:
Sin embargo, cualquiera es universal porque acepta parámetros de todo tipo, pero tiene una gran diferencia. No podemos realizar un seguimiento de los tipos de parámetros y los tipos de valores de retorno pasados.
Entonces veamos cómo aceptar todos los tipos y conocer el tipo del valor de retorno.
Aquí usamos un parámetro genérico T para capturar el tipo de variable y usarlo más tarde. También lo usamos como tipo de parámetro de retorno para que podamos ver el tipo correspondiente cuando inspeccionamos el código.
Para más información, puedes consultar el artículo de Charly Poly: Genéricos y sobrecarga
Modificadores de acceso
Los modificadores de acceso controlan la accesibilidad del sexo de los miembros de la clase. Typecript admite tres tipos de modificadores de acceso: público, privado y protegido.
público
Los miembros públicos *** pueden acceder a él en cualquier lugar sin restricciones. Este también es un modificador estándar, lo que significa que no es necesario anteponer la variable con la palabra clave pública.
Miembros privados
Solo se puede acceder a los miembros privados dentro de la clase en la que están definidos.
Miembros protegidos
Los miembros protegidos son accesibles sólo dentro de la clase en la que están definidos y sus subclases.
TSLINT
TSLINT es la cadena estándar de Typecript para escribir código conciso, fácil de mantener y legible. Podemos personalizarlo con nuestras propias reglas de validación, configuraciones y formateadores.
Configuración
Primero, necesitamos instalar Typecript y tslint global y localmente:
Después de eso, podemos inicializar TSLINT en el proyecto usando la CLI de TSLINT.
Ahora que tenemos el archivo tslint.json, podemos comenzar a configurar nuestras reglas.
Configuración
TSLINT nos permite configurar nuestras propias reglas y personalizar la apariencia de nuestro código. De forma predeterminada, el archivo tslint.json tiene este aspecto, utilizando solo las reglas predeterminadas.
Podemos agregar otras reglas en el objeto de reglas.
Para obtener una descripción general de todas las reglas disponibles, consulte la documentación oficial.
Conclusión
¡Felicitaciones por completar con éxito este artículo! Esperamos que este artículo te haya ayudado a comprender los conceptos básicos de Typecript y cómo usarlo en tus proyectos.
Si este artículo te resultó útil, considera recomendarlo y compartirlo con otros desarrolladores. Visite también mi sitio web para obtener más información.
Si tiene alguna pregunta o comentario, hágamelo saber en los comentarios a continuación.