2020-03-23

Typescript

Typescript é uma linguagem de programação baseada no Javascript que "resolve" uma série de problemas dele, sendo um deles, e o mais importante na minha opinião, permitir definir tipos de variáveis.

O Typescript pode ser usando tanto para backend sobre o NodeJS/Dyno como para frontend em aplicações SPA (single page application) tipo Angular e React.

Mas atenção, não existe mágica no Typescript porque o browser ou o NodeJS não o executam nativamente (e nunca irão), eles rodam apenas Javascript. Para seu código Typescript funcionar é preciso transformar (transpilar) ele em Javascript antes. Se você está acostumado com linguagens fortemente tipadas como Java, C++, Kotlin, tenha consciência de que Typescript não é como elas.

Como usar o Typescript e como criar um projeto usando ele?

Você precisa do NodeJS instalado e também do NPM para fazer códigos em Typescript (tanto front-end como backend), mas por quê NodeJS no front-end em Typescript? NodeJS não é apenas para backend?

Sim! Só que o programinha que transforma Typescript em Javascript (transpilador) é feito em NodeJS, então ele acaba sendo uma ferramenta de suporte ao desenvolvimento, assim como o gerenciador de pacotes e dependências npm (que precisa do NodeJS para funcionar!).

Vamos criar um projeto Typescript com NodeJS (backend):

npm initnpm i --save-dev typescriptnpm i --save-dev ts-node# Adicionando tnpm i --save-dev @types/node@^14# Criando o arquivo tsconfig.jsonnpx tsc --init

Como rodar scripts typescript com NodeJS?

Você precisa já ter um projeto typescript configurado. Instale as seguintes dependências de desenvolvimento (se ainda não houver):

npm i --save-dev typescript ts-node

Você pode testar scripts em typescript usando o seguinte comando:

npx ts-node meu-script.ts

Vendo sua aplicação Typescript em tempo real

Você pode criar um servidor local para debugar seu projeto em tempo real:
https://docs.microsoft.com/pt-br/archive/blogs/cdndevs/visual-studio-code-and-local-web-server
https://stackoverflow.com/questions/52583550/steps-to-run-node-http-server-in-visual-studio-code

Crie um arquivo package.json nesse formato

{  "name": "typescript",  "version": "1.0.0",  "private": true,  "scripts": {    "lite": "lite-server --port 10001",    "start": "npm run lite"  },  "devDependencies": {    "lite-server": "^1.3.1"  }}

Faça o npm instalar as dependências do projeto e o lite-server com: