Cómo usar ts en el código de muestra de vue
Nota: este artículo no reemplaza todos los ts en vue, pero se puede implantar en. El archivo ts del proyecto original se encuentra actualmente solo en la etapa práctica, en transición al proceso de conversión de ts.
¿Para qué se utilizan los ts?
Verificación de tipos, compilación directa en js local, introducción de nuevo azúcar sintáctico
¿Por qué usar ts?
TypeScript se diseñó originalmente para resolver los "puntos débiles" de JavaScript: tipos débiles y falta de espacios de nombres, que dificultan la modularización y lo hacen inadecuado para desarrollar programas grandes. No es adecuado para desarrollar programas grandes. Además, proporciona algo de azúcar sintáctico para facilitar la práctica de la programación orientada a objetos.
Typecript no solo restringe nuestros hábitos de codificación, sino que también desempeña el papel de comentarios. Cuando vemos una función, podemos saber inmediatamente cómo usarla, qué valores se deben pasar y qué. el valor de retorno es. Los tipos son claros de un vistazo y la mantenibilidad de proyectos grandes mejora enormemente. No dejes que los desarrolladores se peguen un tiro en el pie.
Angular: ¿Por qué elegimos TypeScript?
Excelentes herramientas en TypeScript
TypeScript es un superconjunto de JavaScript
TypeScript hace que las abstracciones sean visibles
TypeScript facilita la lectura y comprensión del código
Sí, sé que esto no parece intuitivo. Permítanme ilustrar lo que quiero decir con un ejemplo. Echemos un vistazo a la 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 los tipos de estos dos parámetros. 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 están contenidas en el objeto de configuración (sus nombres y tipos), ni qué devuelve la función.
No podemos llamar a esta función sin comprobar el código fuente o la documentación. Examinar el código fuente no es una buena 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. Podemos ver la documentación, pero no es la mejor experiencia de desarrollo: lleva más tiempo y la documentación suele estar desactualizada.
Entonces, si bien es fácil leer jQuery.ajax(url,settings) y realmente entender cómo llamar a esa función, necesitamos leer su implementación o documentación.
Aquí tenéis una versión mecanografiada:
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.
Esta función devuelve un objeto JQueryXHR cuyas propiedades y funciones podemos visualizar.
Las firmas escritas son ciertamente más largas que las firmas sin escribir, pero :string, :JQueryAjaxSettings y JQueryXHR no son confusas. Son archivos importantes para mejorar la comprensión del 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.
De Angular: ¿Por qué elegimos TypeScript?
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 la utiliza como un superconjunto de JavaScript (Anders es indispensable en este sentido), por lo que cualquier declaración legal de JavaScript en TypeScript Ambos son legales, lo que significa que el costo de aprendizaje es muy bajo.
Aprender TypeScript es muy económico y, si tienes un buen conocimiento de JavaScript, puedes aprenderlo rápidamente porque está diseñado para los hábitos y convenciones de uso de JavaScript.
Algunos ejemplos sencillos para empezar:
Tipos básicos
let isDone: boolean = false // boolean
let decLiteral; : número = 6; // número
let nombre: cadena = "bob"; // cadena
let nombre: cadena = "bob" // número.// cadena
let list: número[] = [1, 2, 3]; // matriz
...
...
Interfaz
función printLabel(labeledObj: { label: string }) { console.log(labeledObj.label);
} let myObj = { size: 10, label： " tamaño 10 Objeto" };
printLabel(myObj);
El verificador de tipos buscará llamadas a printLabel. printLabel toma un argumento y requiere que el argumento del objeto tenga una propiedad de tipo cadena denominada etiqueta. Tenga en cuenta que el parámetro de objeto que pasamos en realidad contendrá muchas propiedades, pero el compilador solo verificará que estas propiedades requeridas existan y que sus tipos coincidan.
Por supuesto, existen algunos usos avanzados, por lo que no entraré en detalles aquí. Más información
¿Cómo aplicar ts en un proyecto vue? Primero instale ts
npm install --save-dev typescript npm install --save-dev ts -loader
2. Cree el archivo tsconfig.json en el directorio raíz
{
"compilerOptions": {
"experimentalDecorators": verdadero,
" emitDecoratorMetadata": verdadero,
" lib": ["dom", "es2016"],
"target": "es5"
},
"include": [/ src /**/*"] }
3. Agregue ts-loader en la configuración
{
test:/\.tsx?$/,
cargador: 'ts-loader', excluir:/node_modules/, opciones:{
appendTsSuffixTo:[/\.vue$/],
}
}
4. Finalmente, agregue el sufijo .ts al archivo webpack.base.conf.js y listo
Ahora puede usar archivos ts.
¿Cómo practicar?
1. ¿Cómo hacer referencia a archivos ts en js?
¿Porque los archivos js no tienen función de detección de tipo? Cuando se introduce un archivo ts, el archivo ts se convertirá en un archivo js, por lo que el mecanismo de detección de tipo del método en el archivo js que hace referencia al archivo ts no tendrá efecto.
Esto significa que el mecanismo de detección de tipos solo se puede utilizar en archivos ts.
Entonces, ¿cómo utilizar el mecanismo de detección de tipos en archivos js? ¡He encapsulado un conjunto de métodos decoradores typeCheck solo como referencia! El uso es el siguiente:
@typeCheck('object','number') deleteItem(item,index) {}
Los parámetros de detección del método deleteItem: el elemento es el tipo de objeto , el índice es el tipo numérico, si el tipo no coincide, se generará una excepción
Parte del código está dedicada:
const _check = function (checked,checker) {
comprobar: for (let i = 0; i } } } devuelve verdadero; }/** * @Descripción tipo de detección * 1. El tipo utilizado para calibrar los parámetros de la función. Si el tipo es incorrecto, se imprimirá un mensaje de error y la función ya no se ejecutará; * 2. La detección de tipo ignora mayúsculas y minúsculas, como cadenas y cadenas. ser reconocidos como tipos de cadena; * 3. Agregue cualquier tipo, lo que indica que se puede detectar cualquier tipo; * 4. Se pueden detectar múltiples tipos, como "matriz numérica" , se pueden detectar ambos tipos. Las comprobaciones periódicas ignoran los conectores; */ función de exportación typeCheck() { const checker = Array.prototype.slice.apply(argumentos función de retorno (objetivo, nombre de función, descriptor) { let oriFunc = descriptor.value; descriptor.value = function () { let check = Array.prototype.slice.apply( argumentos return function (objetivo, funcName, descriptor) { let oriFunc = descriptor.value; descriptor.value = function ()prototype.slice.apply( argumentos); let resultado = indefinido; if(_check(checked,checker) ){ resultado = oriFunc.call(this, .arguments); } devolver resultado; } } };< La combinación de /p> ts la verificación de tipos y typeCheck básicamente satisface nuestras necesidades. 2. ¿Cómo hacer referencia a archivos js en ts? Dado que no hay verificación de tipos en el archivo js, cuando el archivo ts se introduce en el archivo js, se convertirá a cualquier tipo; por supuesto, podemos declarar el tipo en el archivo .d. archivo ts. Por ejemplo, el archivo global.d.ts Por supuesto, a veces necesitamos usar bibliotecas que no están declaradas en el archivo, luego, cuando hacemos referencia a estas bibliotecas en el archivo ts, Estarán indefinidos, ¿qué debemos hacer en este momento? Por ejemplo, si quiero usar "cadena de consulta" en el archivo util.ts, podemos hacer referencia a él de esta manera: importar cadena de consulta desde 'cadena de consulta'; Sin embargo, cuando imprime la cadena de consulta, no está definida. Mi método es solo como referencia Nuevo archivo module.js importar cadena de consulta desde 'cadena de consulta'; exportar const qs = querystring; utile .ts archivo importar { qs } desde './module.js'; Resuelto. La impresión de qs ya no está indefinida y puede utilizar la biblioteca qs normalmente. En este punto, este artículo finaliza la configuración de ts en vue. Este artículo solo representa mi opinión personal. Teniendo en cuenta la escalabilidad del proyecto, no reemplazaré todos los ts, solo intentaré introducir ts en. vue. Hay muchos más. Si hay áreas que necesitan mejorar, ¡contáctame si tienes mejores sugerencias y comentarios!