TS é uma ferramenta de verificação de tipo para JS , que verifica alguns problemas invisíveis que podem existir em nosso código; ao mesmo tempo, pode permitir que nosso compilador tenha algumas funções de solicitação de sintaxe .
Se usarmos create-vue (ferramenta de scaffolding oficial vue3) para criar um projeto, o projeto é baseado no Vite e o TypeScript está pronto para desenvolvimento TS diretamente.
Neste artigo, discutimos o suporte para TS em qualquer projeto de instalação (sem andaime).
Vite é naturalmente favorável ao TS
Criamos e inicializamos um projeto (yarn init -y), instalamos o vite (yarn add Vite -D).
Em seguida, crie um arquivo de entrada index.html e introduza nosso arquivo main.ts personalizado
<script src="./main.ts" type="module"></script>
arquivo main.ts
let tip:string = "这是一个vite项目，使用了ts语法"
console.log('tip: ', tip);
Usamos o comando vite para iniciar o projeto no terminal e podemos ver que o console exibe o que imprimimos.
Nesta demonstração, instalamos o vite apenas para projetos comuns, sem instalar nenhum plug-in relacionado ao ts.
Pode-se ver a partir disso que o vite já processou o suporte para ts internamente e podemos usá-lo diretamente.
Use plugins para aprimorar nossos recursos
Em um projeto vite puro, o vite não exibirá erros de sintaxe ts e bloqueará sua compilação por padrão.
OBS: Estamos falando do case sem uso de nenhum andaime!
Por exemplo, atribuímos o tipo de caractere tip a um número em main.ts
let tip:string = "这是一个vite项目，使用了ts语法"
tip = 2
console.log('tip: ', tip);
Essa sintaxe TS é problemática, mas ainda assim será compilada com sucesso.
Para nos exigir estritamente e melhorar o nível do código, devemos deixar que a saída de erro no console impeça a compilação e nos force a resolver o problema.
Esta função pode ser realizada pelo vite-plugin-checker .
vite-plugin-checker é um plug-in que pode executar TypeScript, VLS, vue-tsc e ESLint em um thread de trabalho. Ele pode bloquear a compilação e exibir mensagens de erro no console e no navegador de acordo com a configuração.
Instalação de dependência
npm i vite-plugin-checker -D
Crie um arquivo de configuração vite.config.js no diretório raiz e introduza vite-plugin-checker
// vite.config.js
import checker from "vite-plugin-checker";
import { defineConfig } from "vite";
export default defineConfig({plugins: [checker({typescript: true,}),],
});
Neste momento, executar o projeto diretamente ainda reportará um erro, porque o arquivo de configuração ts tsconfig.json também é necessário. Usamos a linha de comando para gerar
npx tsc --init
Depois de criar o arquivo de configuração tsconfig.json, reinicie o serviço vite e você descobrirá que o erro de sintaxe do TS foi gerado
saída do console
saída do navegador
Agora, desde que escrevamos um TS problemático, o vite relatará um erro, vamos encontrar o problema e lidar com ele a tempo! Cheira tão bem!
Verificação TS antes de embalar
O Vite executa apenas a tradução de arquivos .ts e não realiza nenhuma verificação de tipo. Isso significa que mesmo que haja um erro gramatical de Ts em nosso projeto, o empacotamento pode prosseguir normalmente.
Como um excelente desenvolvedor, como podemos permitir que tal situação exista?
Podemos usar a seguinte sintaxe para realizar a inspeção de código no momento do empacotamento:
- Execute tsc --noEmit no script de construção
- Para arquivos .vue, você pode instalar o vue-tsc e executar vue-tsc --noEmit para verificar o tipo de seus arquivos *.vue
Nós o configuramos em package.json para verificação:
// package.json"scripts": {"dev": "vite",// 如果ts检查不通过，vite build就不会执行"build": "tsc --noEmit && vite build",},
Em seguida, execute npm run build para executar o comando de empacotamento
Com certeza, a compilação foi bloqueada neste momento.
O princípio de execução de tsc --noEmit
Esta é a sintaxe interna de ts e não tem nada a ver com vite. Ao executar tsc --noEmit , o TSC lerá o arquivo de configuração para obter os valores dos parâmetros.A função de --noEmit é apenas verificar e não compilar e gerar saída. Se nosso código estiver livre de erros, ele sairá diretamente, caso contrário, reportará um erro.
IntelliSense para TypeScript
Para conhecer as variáveis de ambiente, consulte juejin.cn/post/717201…
Por padrão, o Vite fornece definições de tipo para import.meta.env em vite/client.d.ts . Mas alguns arquivos .env[mode] personalizados não têm intellisense TypeScript.
Para fazer isso, podemos criar um arquivo env.d.ts no diretório src e adicionar as definições da seguinte forma:
/// <reference types="vite/client" />
interface ImportMetaEnv {// 自定义内容...readonly VITE_APP_TITLE: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}
interface ImportMeta {readonly env: ImportMetaEnv
}
Observação: O modelo deve estar instalado para gravar, este método é para todos os projetos e o mesmo é válido para projetos de scaffolding
Exemplo:
Teste em main.ts
Conforme mostrado na figura, podemos ver que nosso prompt inteligente entrou em vigor.
Aqui encontrei um relatório de erro no vscode, que é apenas um relatório de erro de ts e não tem nada a ver com a configuração de nossas variáveis.
O problema do erro também é muito simples. ts agora pensa que nosso projeto é baseado em commonjs, então não há nenhum atributo import.meta.
Podemos alterar o valor do módulo para "es2022".
Finalmente
Recentemente, encontrei um documento VUE, que resume os vários pontos de conhecimento do VUE e os organiza em "36 habilidades que o desenvolvimento do Vue deve conhecer". O conteúdo é relativamente detalhado e a explicação de cada ponto de conhecimento também está disponível.
Amigos necessitados, você pode clicar no cartão abaixo para receber e compartilhar gratuitamente