1.5 — TypeScript ou JavaScript: o que escolher
Entenda as opcoes de tipagem no ecossistema Svelte, o que o proprio criador do Svelte pensa sobre TypeScript e qual caminho seguir neste curso.
Objetivos da Aula
- Entender o que e TypeScript e por que ele existe
- Conhecer JSDoc como alternativa ao TypeScript
- Saber a posicao do time Svelte sobre tipagem
- Entender as opcoes do wizard (“TypeScript syntax” vs “JSDoc” vs “No”)
- Decidir com confianca qual opcao escolher
O que e TypeScript?
TypeScript e um superset do JavaScript criado pela Microsoft. Ele adiciona tipos estaticos ao JavaScript — ou seja, voce declara que uma variavel e uma string, um numero, um array, etc., e o editor te avisa se voce cometer um erro.
// TypeScript
let nome: string = 'Svelte'
let versao: number = 5
// Erro! TypeScript avisa antes de rodar
versao = 'cinco'
// ❌ Type 'string' is not assignable to type 'number'Sem TypeScript, esse erro so apareceria em tempo de execucao (quando o usuario esta usando o app). Com TypeScript, o editor mostra o problema antes de voce salvar o arquivo.
E o JSDoc?
JSDoc e uma forma de adicionar tipos dentro de comentarios no JavaScript puro. Voce nao precisa de um compilador extra — o TypeScript Language Server (que roda dentro do VS Code) le esses comentarios e te da o mesmo IntelliSense.
// JSDoc — o arquivo continua sendo .js
/** @type {string} */
let nome = 'Svelte'
/** @type {number} */
let versao = 5O resultado pratico e o mesmo: autocompletar, deteccao de erros, documentacao ao passar o mouse. A diferenca e que o codigo continua sendo JavaScript valido — nao precisa de compilacao.
O que o time Svelte pensa sobre isso?
Essa e uma das discussoes mais interessantes do ecossistema JavaScript. O proprio codigo-fonte do SvelteKit e escrito em JavaScript com JSDoc, nao em TypeScript.
Rich Harris, criador do Svelte, explicou a decisao:
"SvelteKit e construido com JavaScript com checagem de tipos. Isso nos permite publicar o SvelteKit sem um passo de build. O pacote npm literalmente contem o diretorio source, e seus projetos usam isso diretamente."
"Esse padrao se provou otimo para nos — e o proximo Svelte major provavelmente vai seguir a mesma abordagem. Voce nao precisa de source maps. Nao ter que lidar com o compilador TypeScript pode ser libertador."
— Rich Harris, via discussao no Svelte Radio / Discord
Em resumo: para bibliotecas e ferramentas (como o proprio Svelte), JSDoc e atraente porque o codigo publicado no npm e o mesmo codigo-fonte, sem passo de build intermediario.
.svelte, algo que antes nao era possivel.A evolucao no Svelte 5
Simon Holthausen, membro do core team do Svelte, explicou na Svienna 2024 que uma das motivacoes dos Runes (novo sistema de reatividade do Svelte 5) foi justamente melhorar a compatibilidade com TypeScript:
No Svelte 3/4, a sintaxe $: double = count * 2 nao era entendida nativamente pelo TypeScript. O tooling precisava de hacks para fazer a checagem funcionar.
Com os Runes do Svelte 5, o TypeScript entende tudo nativamente. $state(), $derived() e $props() sao funcoes globais que o TypeScript reconhece sem nenhum hack.
Alem disso, o SvelteKit gera tipos automaticamente para cada rota do seu projeto. Voce nao precisa importar tipos manualmente — o editor ja sabe o formato dos seus dados de pagina, das form actions e de tudo mais.
Comparacao pratica
.tslang="ts".jsNo Svelte, a diferenca fica assim:
Com TypeScript:
<script lang="ts">
let nome: string = 'mundo'
let contador: number = 0
function incrementar(): void {
contador++
}
</script>Com JSDoc:
<script>
/** @type {string} */
let nome = 'mundo'
/** @type {number} */
let contador = 0
/** @returns {void} */
function incrementar() {
contador++
}
</script>Sem tipagem:
<script>
let nome = 'mundo'
let contador = 0
function incrementar() {
contador++
}
</script>Os tres funcionam. A diferenca esta no nivel de seguranca e ajuda que o editor oferece.
Voce pode combinar os dois
Uma abordagem poderosa e criar um arquivo types.d.ts dentro de src/lib/ com seus tipos em TypeScript puro e usa-los via JSDoc no resto do projeto:
// src/lib/types.d.ts
export interface Pessoa {
nome: string
idade: number
}// qualquer arquivo .js do projeto
/** @type {import('$lib/types').Pessoa} */
const aluno = {
nome: 'Ana',
idade: 25
}Isso te da o melhor dos dois mundos: tipos robustos onde importa, JavaScript puro onde voce quer simplicidade.
$types com os tipos corretos. Voce nao precisa importar tipos para load, actions ou PageData — o editor ja sabe tudo.E neste curso, o que vamos usar?
Neste curso, escolhemos TypeScript syntax no wizard do sv create. Os motivos:
string, number, boolean e interfaces basicas ja cobre 90% do uso diario.string, number, boolean, arrays e objetos com interfaces. Quando algo mais avancado aparecer, explicaremos no momento. Alem disso, o TypeScript e gradual — voce pode usar any temporariamente em qualquer lugar e ir adicionando tipos conforme se sentir confortavel.Resumo
| Opcao | O que e | Quando usar |
|---|---|---|
| TypeScript syntax | Tipos no codigo, arquivos .ts | Apps, equipes, projetos de longo prazo |
| JSDoc comments | Tipos em comentarios, arquivos .js | Bibliotecas, prototipacao, projetos solo |
| Sem tipagem | JavaScript puro | Aprendizado inicial, scripts rapidos |
| Combinar TS + JSDoc | .d.ts para tipos, .js para codigo | Melhor dos dois mundos |
Conclusao do Modulo 1
Parabens! Voce completou o Modulo 1 — Primeiros Passos.
O que voce aprendeu
- O que e Svelte e como ele se diferencia de outros frameworks
- Como criar um projeto SvelteKit com
pnpm dlx sv create - As opcoes do wizard: templates, TypeScript e add-ons
- A estrutura completa de arquivos e pastas
- Como o roteamento baseado em arquivos funciona
- Os arquivos especiais do SvelteKit (
+page,+layout,+server) - Por que usamos pnpm e como ele funciona
- A relacao entre TypeScript, JSDoc e o ecossistema Svelte
Proximos passos
No proximo modulo, vamos mergulhar no Vite — o bundler que roda por baixo do SvelteKit. Entender o Vite vai te ajudar a compreender porque tudo e tao rapido e como otimizar seu ambiente de desenvolvimento.
Proximo modulo: Configurações e Vite