Cómo usar ts en vue (tutorial detallado)

Este artículo presenta principalmente el código de muestra de cómo usar ts en vue. Ahora lo compartiré contigo y te daré una referencia.

Este artículo presenta el código de muestra de cómo usar ts en vue y lo comparte con todos. Los detalles son los siguientes:

Nota: este artículo no reemplaza todos los vue con ts. , pero es posible incrustar archivos ts en el proyecto original. Actualmente solo se encuentra en la etapa de práctica y es una transición al proceso de conversión de ts.

¿Para qué sirven los ts?

Verificación de tipos, compilación directa a js nativo, introducción de nuevo azúcar sintáctico

¿Por qué usar ts?

TypeScript debe diseñarse para resolver los "puntos débiles" de JavaScript: tipos débiles y sin espacio de nombres, lo que dificulta su modularización y no es adecuado para desarrollar programas grandes. Además, también proporciona algo de azúcar sintáctico para ayudar a todos a practicar la programación orientada a objetos de manera más conveniente.

Typecript no solo puede limitar nuestros hábitos de codificación, sino que también sirve como anotaciones. Cuando vemos una función, podemos saber inmediatamente cómo usarla, qué valores se deben pasar y cuál es el retorno. El valor es. Los tipos son claros de un vistazo, lo que mejora enormemente la capacidad de mantenimiento de proyectos grandes. No hará que los desarrolladores se disparen en el pie.

Angular: ¿Por qué elegimos TypeScript?

Excelentes herramientas en TypeScript

TypeScript es un superconjunto de JavaScript

TypeScript deja clara la abstracción Visible

TypeScript hace que el código sea más fácil de leer y comprender

Sí, sé que esto no parece intuitivo. Permítanme ilustrar lo que quiero decir con un ejemplo. Echemos un vistazo a esta función jQuery.ajax(). ¿Qué información podemos obtener de su firma?

Lo único que sabemos con seguridad es que la función tiene dos parámetros. Podemos adivinar estos tipos. Quizás el primero sea una cadena y el segundo sea un objeto de configuración. Pero esto es sólo una especulación y podríamos estar equivocados. No sabemos qué opciones van en el objeto de configuración (sus nombres y tipos) o qué devuelve la función.

Es imposible llamar a esta función sin comprobar el código fuente o la documentación. Examinar el código fuente no es una opción: el propósito de tener funciones y clases es usarlas sin saber cómo implementarlas. En otras palabras, deberíamos confiar en sus interfaces, no en sus implementaciones. Podríamos consultar la documentación, pero no es la mejor experiencia de desarrollo: lleva más tiempo y la documentación suele estar desactualizada.

Entonces, aunque es fácil de leer jQuery.ajax(url,settings), para entender realmente cómo llamar a esta función, necesitamos leer su implementación o su documentación.

La siguiente es una versión tipo:

Nos da más información.

El primer parámetro de esta función es una cadena.

La configuración de parámetros es opcional. Podemos ver todas las opciones que se pueden pasar a la función, no solo sus nombres, sino también sus tipos.

La función devuelve un objeto JQueryXHR, y podemos ver sus propiedades y funciones.

Las firmas escritas son definitivamente más largas que las firmas sin escribir, pero :string, :JQueryAjaxSettings y JQueryXHR no están abarrotadas. Son documentos importantes que mejoran la comprensión de su código. Podemos comprender el código más profundamente sin tener que profundizar en la implementación o leer la documentación. Mi experiencia personal es que puedo leer el código escrito más rápido porque los tipos proporcionan más contexto para comprender el código.

Extraído de Angular: ¿Por qué elegimos TypeScript?

¿Es fácil de aprender?

Uno de los aspectos más destacados del diseño de TypeScript es que no abandona la sintaxis de JavaScript y comienza una nueva, sino que se convierte en un superconjunto de JavaScript (este crédito debe atribuirse a Anders), de modo que cualquier La declaración legal de JavaScript se puede escribir en TypeScript. Los siguientes son todos legales, lo que significa que el costo de aprendizaje es muy bajo. Si tiene un conocimiento relativamente profundo de JavaScript, puede comenzar a usar TypeScript rápidamente, porque su diseño se basa. sobre hábitos y convenciones de uso de JavaScript.

Algunos ejemplos simples que son fáciles de entender de un vistazo:

Tipos básicos

Interfaces

El verificador de tipos observará el llamada para imprimirEtiqueta. printLabel tiene un parámetro y requiere que este parámetro de objeto tenga un atributo llamado etiqueta de tipo cadena. Cabe señalar que el parámetro de objeto que pasamos en realidad contendrá muchas propiedades, pero el compilador solo verificará si esas propiedades requeridas existen y si sus tipos coinciden.

Por supuesto, hay algunos usos avanzados, que no presentaré demasiado aquí. Más información

¿Cómo aplicar ts en proyectos vue?

1. Primero instale ts

npm install --save-dev typescript npm install --save-dev ts-loader2 Cree el archivo tsconfig.json en el directorio raíz

p>

3. Agregue ts-loader en la configuración

4. Finalmente, agregue el sufijo .ts y estará bien en el archivo webpack.base.conf.js.

Ahora puedes usar el archivo ts en nuestro proyecto original.

¿Cómo practicar?

1. ¿Cómo hacer referencia a archivos ts en js?

Dado que no hay detección de tipo para archivos js, cuando introducimos el archivo ts, el archivo ts se convertirá en un archivo js, ​​por lo que el mecanismo de detección de tipo del método para hacer referencia al archivo ts en el archivo js no tendrá efecto. En otras palabras, existe un mecanismo de detección de tipos solo en el archivo ts.

Entonces, ¿cómo utilizar el mecanismo de detección de tipos en archivos js? ¡El editor ha encapsulado un conjunto de métodos decoradores typeCheck solo como referencia! El uso es el siguiente:

Detectar parámetros del método deleteItem: el elemento es el tipo de objeto, el índice es el tipo de número, si los tipos no coinciden, se generará una excepción.

Parte del Se presenta el código:

< La detección de tipo de p>ts combinada con typeCheck básicamente satisface nuestras necesidades.

2. ¿Cómo hacer referencia a archivos js en ts?

Dado que no hay detección de tipo en el archivo js, ​​el archivo ts se convertirá a cualquier tipo cuando se importe al archivo js. Por supuesto, también podemos declarar el tipo en el archivo .d.ts. .

Por ejemplo, archivo global.d.ts

Por supuesto, a veces necesitamos usar algunas bibliotecas, pero no hay un archivo de declaración, entonces no estará definido cuando hagamos referencia a él en el archivo ts. ¿Qué debemos hacer en este momento?

Por ejemplo, cuando quiero usar 'cadena de consulta' en el archivo util.ts, lo citaremos así:

Sin embargo, cuando imprimes la cadena de consulta, es indefinido. ¿Cómo solucionarlo? El método del editor es solo de referencia

Crear un nuevo archivo module.js

archivo utile.ts

Resuelto. La impresión de qs ya no está indefinida y puede utilizar la biblioteca qs normalmente.

Este artículo termina con la introducción a la configuración de ts en vue. Este artículo solo representa mi opinión personal. Teniendo en cuenta la escalabilidad del proyecto, no reemplacé todo con ts. en vue. Todavía hay muchas áreas que necesitan mejorar. Si tiene mejores sugerencias y opiniones, ¡contácteme!

Lo anterior es lo que compilé para todos. Espero que sea útil para todos en el futuro.

Artículos relacionados:

Método JS para generar códigos QR a partir de enlaces y convertirlos en imágenes

Métodos para obtener elementos DOM basados ​​en vue1 y vue2

Ejemplo de operación de consulta en cascada agregada de nodejs+mongodb