3 maneiras de executar e debugar TypeScript com o VS Code

Para quem está iniciando com TypeScript, uma das coisas mais complexas é: como executar e debugar a linguagem? Nesse vídeo vou usar o VS Code para fazer exatamente isso.

Vamos configurar um projeto do zero. Nele, vou te mostrar maneiras para executar e também debugar (depurar) o código de maneira simples e direta no VS Code. Também vou te passar alguns macetes ao longo do vídeo.

00:00 - Introdução
01:00 - Necessário para seguir o vídeo
01:22 - Criando o projeto no VS Code
01:48 - npm init -y (cria um projeto node)
01:55 - Instalando o TypeScript
02:38 - Executando tsc com npx (localmente)
02:56 - O que é "transpilar"?
03:45 - Target: versão do JavaScript que o tsc vai transpilar
04:56 - rootDir e outDir (onde é a raiz e para onde transpilar)
05:58 - O node roda TypeScript (.ts)?
07:41 - Transpilando TS usando o tsc
09:38 - Usando o sucrase-node com Code Runner no VS Code
13:11 - Como Debugar (depurar) o TypeScript no VS Code
19:27 - Usando o ViteJS com vanilla-ts
22:48 - Concluindo

Cursos de Python e JavaScript / TypeScript com desconto:

#typescript #vscode #debug

00:00 - Introdução
01:00 - Necessário para seguir o vídeo
01:22 - Criando o projeto no VS Code
01:48 - npm init -y (cria um projeto node)
01:55 - Instalando o TypeScript
02:38 - Executando tsc com npx (localmente)
02:56 - O que é "transpilar"?
03:12 - tsc --init: iniciando o tsconfig.json
03:45 - Target: versão do JavaScript que o tsc vai transpilar
04:56 - rootDir e outDir (onde é a raiz e para onde transpilar)
05:58 - O node roda TypeScript (.ts)?
07:41 - Transpilando TS usando o tsc
09:38 - Usando o sucrase-node com Code Runner no VS Code
13:11 - Como Debugar (depurar) o TypeScript no VS Code
19:27 - Usando o ViteJS com vanilla-ts
22:48 - Concluindo

[vitoralves]

Muito obrigado manoo! Estava fazendo um teste para uma vaga de estágio porem eu não estava conseguindo compilar meu pjt, com seu vídeo consegui, vlw e forte abraço.

[AdsonCicilioti]

Muito bom Otavio.. EU estava atrtás de como debugar com brakpoints... Excelente vídeo!

[gilsonmendes]

Ótimo vídeo! Muito obrigado por compartilhar seu conhecimento conosco.

[weslleycarlos]

Conteúdo de ouro, configurações que ajuda muito na hora de codar. Muito bom conteúdo. ME DIZ ESSE TEMA DAI PF, achei lindo kkk

[sidneyCardoso]

Incrivel demais, adquiri esses dias o seus cursos de JS e TS e também o de react com next, valeu super a pena

[pedroygor]

Ótimo vídeo, professor. Sempre somando conhecimento, obrigado.

[jezreelmoraes]

Que vídeo bom, a qualidade do áudio e da imagem são mt altas, acho até estranho não ter tantos views, todos os vídeos tem um conteúdo interessante e são muito bem explicados por vc.

Estou fazendo agr o curso de Js e Ts e ainda n tinha visto essa maneira do viteJs, e achei mt bom, já é uma mão na roda kkk

[carlosalexandresouza]

Melhor professor da Udemy, aulas tops !!!!

[victinho]

obg amigo, eu tinha q toda hr ir no package.json e passar um Debug diferente para ler o meu code, só vlw amigão

[vitoralves]

E que qualidade de vídeo em... top demais

[vidarotinadetox]

Noosa Senhora, o cara é bão...é nós em BH.

[luciopereirabrito]

Caso alguém tenha tido algum problema ao utilizar o comando "clear && npx sucrase-node" nessa parte 12:58.
Uma outra alternativa seria acessar o settings.json ou .vscode e adicionar a está linha
true
Que fará com que toda vez que rodar um novo degub o code runner limpe o terminal.
Deixando o comando apenas como
"npx sucrase-node"

[rodrigonegao]

Eu uso o package 'ts-node-dev' . É pratico e caso vc mude algum arquivo ele limpa o cache e roda de novo.

[TiagoFigueiredo-iqtl]

Pessoal, estou com erro tanto com o tsnode, e o sucrase, quando executo pelo code runner ele me da um erro, Error: Cannot find module + diretorio do arquivo, Não sei oque esta errado fiz tudo certo, e como se ele nao achasse o arquivo index .ts, alguem sabe como me ajudar??