Como portar seu programa JavaScript para TypeScript

Lançado originalmente em 1995 após um período de desenvolvimento incrivelmente curto, o JavaScript se tornou parte integrante de muitos sites e aplicativos. Hoje, o JavaScript encontrou um lar em aplicativos do lado do cliente e do servidor. Os desenvolvedores ainda solicitam muitos recursos, apesar de todas as mudanças que sofreram ao longo dos anos.

TypeScript é uma linguagem de script que estende o JavaScript com muitos desses recursos há muito esperados. Anotação de texto, digitação personalizada e interfaces são os principais componentes, juntamente com melhores ferramentas para aumentar a produtividade.

Por que se preocupar em mudar?

A perspectiva de mudar de idioma em grandes projetos pode ser estressante. Felizmente para quem está considerando a tarefa, o processo de portar um projeto de JavaScript para TypeScript é bastante simples.

O JavaScript passou os últimos anos ganhando força como uma das principais linguagens de programação. Originalmente usado apenas para scripts de front-end em sites, o lançamento do Node.js trouxe o JavaScript para o lado do servidor, ajudando a expandir sua popularidade.

Embora o JavaScript tenha se tornado muito mais popular recentemente, há muitos recursos que sua implementação mais recente, ES6, ainda não possui. Para muitos desenvolvedores, esses recursos ausentes limitam a utilidade do JavaScript como linguagem.

O TypeScript visa corrigir essas preocupações envolvendo o JavaScript com recursos extras e, em seguida, transpilando o código do usuário. O resultado é uma linguagem type-safe com a facilidade e usabilidade do JavaScript.

Já existem várias ferramentas e estruturas com suporte completo a TypeScript. Angular já o usa há muito tempo, e mesmo React tem maneiras de implementar TypeScript.

TypeScript é como JavaScript aprimorado

O TypeScript implementa muitos dos recursos que os desenvolvedores geralmente solicitam em JavaScript. TypeScript é nomeado para o sistema de tipo completo que ele implementa, incluindo recursos como verificação de tipo, segurança e digitação implícita. O TypeScript ainda permite que você definir e usar namespaces personalizados.

TypeScript também contém interfaces, enumerações e inferência de tipo. O TypeScript mantém o suporte para recursos da implementação mais recente do JavaScript junto com os recursos legados e adiciona um conjunto de novos recursos.

No geral, o foco do TypeScript é criar um processo de desenvolvimento mais seguro com ferramentas mais fortes para auxiliar os codificadores.

Incentiva o código de tipo seguro

O TypeScript usa um sistema interno de verificação de tipo para validar os tipos de variáveis. Inclui um conjunto de tipos padrão com a opção de definir suas próprias classes e tipos. Os tipos podem ser explicitamente declarados ou inferidos com base na atribuição.

TypeScript tem vários tipos de dados padrão, incluindo strings, números, booleanos e tuplas. Existem também os tipos de variáveis, como unknown e any, que permitem usar código fracamente tipado.

A inferência de tipo do TypeScript permite executar verificações de tipo até mesmo no código JavaScript padrão, executando-o por meio do transpiler do TypeScript.

A transpilação facilita o uso

Do ponto de vista do desenvolvedor, um dos melhores recursos do TypeScript é que ele gera JavaScript padrão. Você pode executar o código TypeScript por meio de um processo conhecido como transpilação, que é semelhante à compilação.

Em vez de um executável, o resultado da transpilação é um script em uma linguagem diferente da original do código.

O código TypeScript é transpilado para JavaScript, que você pode executar em um servidor ou cliente. Isso permite que você escreva código de forma rápida e fácil que pode ser executado em praticamente qualquer plataforma.

TypeScript ajuda na produtividade do desenvolvedor

Adicionar tipos ao JavaScript não apenas permite que o código seja executado com segurança, mas também fornece aos desenvolvedores ferramentas que facilitam a codificação. A maioria dos IDEs modernos oferece suporte a TypeScript que permite ferramentas de autocompletar código como IntelliSense para oferecer contexto adicional ao código. Ele também pode oferecer verificação de tipo enquanto você escreve, ajudando a detectar erros mais rapidamente.

Além disso, as estruturas de dados extras e a sintaxe do TypeScript são projetadas para aumentar a legibilidade do código. Esses recursos tornam mais rápido e fácil criar código de alta qualidade e detectar possíveis problemas antes que eles se tornem problemáticos.

Como você pode portar seu código?

Se você está iniciando um novo projeto, criando um novo projeto TypeScript é bem simples. Converter um projeto pré-existente para TypeScript, no entanto, é um pouco mais complicado.

Na maioria das circunstâncias normais, a perspectiva de converter um projeto de um idioma para outro é assustadora. A conversão de JavaScript para TypeScript, no entanto, é surpreendentemente simples.

TypeScript como um superconjunto de JavaScript

TypeScript é considerado um superconjunto de JavaScript. Isso significa que o TypeScript adiciona camadas adicionais de sintaxe e funcionalidade, sem alterar ou remover a funcionalidade principal em torno da qual ele se baseia.

Para desenvolvedores, isso significa que qualquer código executado corretamente em JavaScript será executado automaticamente corretamente em TypeScript. Quer o script em questão seja um servidor web escrito para rodar em NodeJS ou um conjunto de scripts front-end para uma página web, a troca é excepcionalmente simples.

Depois de instalar o transpiler TypeScript, você pode criar um simples tsconfig.json arquivo com o seguinte conteúdo:

{
"opções do compilador": {
"outDir": "./construir",
"allowJs": verdadeiro,
"alvo": "es5"
 },
"incluir": ["./src/**/*"]
}

Mova quaisquer arquivos aplicáveis ​​para o diretório src e execute o transpiler. Isso criará os arquivos JavaScript resultantes no construir diretório.

Essas alterações rápidas e simples converterão um projeto JavaScript padrão em um TypeScript. A partir daqui, você está livre para usar os novos recursos que o TypeScript oferece quando quiser. Você pode anotar tipos em variáveis, implementar tipos personalizados e definir interfaces.

Após cada transpilação, você pode usar a saída do construir conforme necessário, adicionando os arquivos em qualquer projeto, como faria normalmente. O transpiler digitará o JavaScript padrão e converterá novos recursos em scripts ES5 válidos.

O que você precisa saber para ir de JS para TS

O processo de conversão de um projeto de JavaScript para TypeScript é excepcionalmente fácil. A conversão é tão simples quanto trocar a estrutura de diretórios, adicionar um arquivo de configuração e instalar o transpiler.

Obter todos os benefícios do novo idioma, no entanto, pode ser um projeto muito mais longo. Embora o TypeScript possa inferir o tipo de cada variável em um projeto, elas devem ser declaradas explicitamente. Voltar e adicionar tipos personalizados a um projeto, adicionar anotações adequadas e criar interfaces pode consumir muito tempo.

Adicionar esses recursos a um projeto, no entanto, permitirá que você colha os benefícios que vêm com a verificação de tipo adequada e ferramentas expandidas. Grandes projetos serão mais rápidos e fáceis de construir, você identificará erros mais cedo e novos desenvolvedores terão mais facilidade para ler seu código.