Desde 2020, Svelte é oficialmente compatível com TypeScript, no entanto, adicionar TypeScript a seu projeto Svelte muda fundamentalmente seu conjunto de ferramentas. Embora não possamos prever a forma de seu conjunto de ferramentas, podemos presumir que ele usa um empacotador de aplicativo da web como webpack , Parcel ou Rollup . Para adicionar TypeScript a um projeto Svelte, vamos essencialmente dizer ao bundler para transformar o código TypeScript em código JavaScript.
Neste tutorial, aprenderemos como configurar o TypeScript para Svelte usando os três bundlers mencionados. Para acompanhar este artigo, você precisará de:
Conhecimento básico de TypeScript Compreensão de seu conjunto de ferramentas atual Yarn como seu gerenciador de pacotes
Vamos começar!
Configuração de compilação compartilhada
Para acompanhar os exemplos neste tutorial, primeiro, configuraremos nossa construção compartilhada. Você deve armazenar seus arquivos de origem no diretório./src/e seus arquivos de construção no diretório./build.
O ponto de entrada para o aplicativo será o arquivo./src/index.ts, que irá importar a classe App do arquivo./App.svelte, inicializá-la e exportá-la por padrão, como visto no exemplo a seguir:
import App from’./App.svelte’; exportação padrão (novo aplicativo ({destino: document.body}));
Svelte injetará as entradas DOM no corpo de uma página HTML. Agora, podemos implementar o componente App:
No bloco de código abaixo, a declaração da tag
