TS es una herramienta de verificación de tipos para JS , que verifica algunos problemas invisibles que pueden existir en nuestro código; al mismo tiempo, puede permitir que nuestro compilador tenga algunas funciones de solicitud de sintaxis .
Si usamos create-vue (herramienta de andamiaje oficial de vue3) para crear un proyecto, el proyecto se basa en Vite y TypeScript está listo para el desarrollo de TS directamente.
En este artículo, discutimos el soporte para TS en cualquier proyecto de instalación (sin andamios).
Vite apoya naturalmente a TS
Creamos e inicializamos un proyecto (yarn init -y), instalamos vite (yarn add Vite -D).
Luego, cree un archivo de entrada index.html e introduzca nuestro archivo main.ts personalizado
<script src="./main.ts" type="module"></script>
archivo principal.ts
let tip:string = "这是一个vite项目，使用了ts语法"
console.log('tip: ', tip);
Usamos el comando vite para iniciar el proyecto en la terminal y podemos ver que la consola muestra lo que imprimimos.
En esta demostración, solo instalamos vite para proyectos ordinarios, sin instalar ningún complemento relacionado con ts.
Se puede ver a partir de esto que vite ya ha procesado el soporte para ts internamente, y podemos usarlo directamente.
Usar complementos para mejorar nuestras capacidades
En un proyecto vite puro, vite no generará errores de sintaxis ts y bloqueará su compilación de manera predeterminada.
NOTA: ¡Estamos hablando del caso sin usar ningún andamio!
Por ejemplo, asignamos el tipo de carácter tip a un número en main.ts
let tip:string = "这是一个vite项目，使用了ts语法"
tip = 2
console.log('tip: ', tip);
Tal sintaxis de TS es problemática, pero aun así se compilará con éxito.
Para exigirnos estrictamente y mejorar el nivel de código, deberíamos dejar que la salida de error en la consola impida la compilación y nos obligue a solucionar el problema.
Esta función se puede realizar mediante vite-plugin-checker .
vite-plugin-checker es un complemento que puede ejecutar TypeScript, VLS, vue-tsc y ESLint en un subproceso de trabajo. Puede bloquear la compilación y mostrar mensajes de error en la consola y el navegador según la configuración.
Instalación de dependencia
npm i vite-plugin-checker -D
Cree un archivo de configuración vite.config.js en el directorio raíz e introduzca vite-plugin-checker
// vite.config.js
import checker from "vite-plugin-checker";
import { defineConfig } from "vite";
export default defineConfig({plugins: [checker({typescript: true,}),],
});
En este momento, ejecutar el proyecto directamente seguirá reportando un error, porque también se requiere el archivo de configuración tsconfig.json. Usamos la línea de comando para generar
npx tsc --init
Después de crear el archivo de configuración tsconfig.json, reinicie el servicio vite y verá que se ha generado el error de sintaxis de TS.
salida de la consola
salida del navegador
Ahora, siempre que escribamos un TS problemático, vite informará un error, ¡encontremos el problema y lo solucionemos a tiempo! ¡Huele tan bien!
Comprobación de TS antes del embalaje
Vite solo realiza la traducción de archivos .ts y no realiza ninguna verificación de tipo. Esto significa que incluso si hay un error gramatical de Ts en nuestro proyecto, el empaquetado puede continuar normalmente.
Como excelente desarrollador, ¿cómo podemos permitir que exista tal situación?
Podemos usar la siguiente sintaxis para realizar una inspección de código en el momento del empaquetado:
- Ejecute tsc --noEmit en el script de compilación
- Para los archivos .vue, puede instalar vue-tsc y ejecutar vue-tsc --noEmit para verificar el tipo de sus archivos *.vue
Lo configuramos en package.json para verificación:
// package.json"scripts": {"dev": "vite",// 如果ts检查不通过，vite build就不会执行"build": "tsc --noEmit && vite build",},
Luego ejecute npm run build para ejecutar el comando de empaquetado
Efectivamente, la compilación estaba bloqueada en este momento.
El principio de ejecución de tsc --noEmit
Esta es la sintaxis integrada de ts y no tiene nada que ver con vite. Al ejecutar tsc --noEmit , TSC leerá el archivo de configuración para obtener los valores de los parámetros. La función de --noEmit es solo verificar y no compilar y generar. Si nuestro código no tiene errores, saldrá directamente; de lo contrario, informará de un error.
IntelliSense para TypeScript
Para conocer las variables de entorno, puede consultar juejin.cn/post/717201…
De forma predeterminada, Vite proporciona definiciones de tipo para import.meta.env en vite/client.d.ts . Pero algunos archivos .env[mode] personalizados no tienen inteligencia de TypeScript.
Para hacer esto, podemos crear un archivo env.d.ts en el directorio src y luego agregar definiciones de la siguiente manera:
/// <reference types="vite/client" />
interface ImportMetaEnv {// 自定义内容...readonly VITE_APP_TITLE: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}
interface ImportMeta {readonly env: ImportMetaEnv
}
Nota: La plantilla debe estar instalada para escribir, este método es para todos los proyectos, y lo mismo es cierto para los proyectos de andamios.
Ejemplo:
Prueba en main.ts
Como se muestra en la imagen, podemos ver que nuestro aviso inteligente ha surtido efecto.
Aquí encontré un informe de error en vscode, que es solo un informe de error de ts y no tiene nada que ver con la configuración de nuestras variables.
El problema del error también es muy simple, ts ahora piensa que nuestro proyecto está basado en commonjs, por lo que no hay un atributo import.meta.
Podemos cambiar el valor del módulo a "es2022".
Por fin
Recientemente encontré un documento de VUE, que resume los diversos puntos de conocimiento de VUE y los organiza en "36 habilidades que el desarrollo de Vue debe conocer". El contenido es relativamente detallado y la explicación de cada punto de conocimiento también está en su lugar.
Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis