O TypeScript é um superconjunto de JavaScript desenvolvido para criar aplicativos mais seguros e de grande escala. Ele adiciona tipagem estática opcional à linguagem, facilitando a detecção de erros antes da compilação.

A linguagem também apresenta alguns recursos que não existem em JavaScript. Isso inclui genéricos, classes, interfaces, enums e decoradores.

Aprenda a configurar seu primeiro projeto TypeScript do zero em apenas algumas etapas.

Etapa 1: Instalando o TypeScript

Antes de usar TypeScript em seu sistema, você deve instalar o compilador TypeScript globalmente.

Execute o seguinte comando para instalar o TypeScript globalmente:

npm instalar -g texto datilografado

Etapa 2: Configurando seu projeto

Para configurar seu projeto TypeScript, comece criando um diretório de projeto vazio em qualquer IDE de sua escolha.

Em seguida, crie seus arquivos com o .ts extensão de arquivo. O TypeScript não pode ser executado em nenhum ambiente. Assim, ele deve ser compilado em JavaScript antes de poder ser executado.

instagram viewer

Para compilar seus arquivos TypeScript em JavaScript, navegue até o diretório do projeto em seu terminal. Então corra tsc seguido pelo nome do seu arquivo TypeScript.

Por exemplo:

tscíndice.ts

Este comando irá criar um index.js arquivo dentro do mesmo diretório que seu index.ts arquivo reside.

Esse comportamento pode ser indesejável, pois tornaria seu projeto difícil de gerenciar com vários .js e .ts arquivos no mesmo diretório.

Você altera esse comportamento padrão e modifica o comportamento do seu compilador TypeScript usando o tsconfig.json Arquivo.

Execute o seguinte comando em seu terminal para criar um tsconfig.json arquivo em seu projeto:

tsc --iniciar

Isso gera um arquivo contendo todas as configurações do seu compilador TypeScript.

Você cobrirá apenas o básico necessário para iniciar seu projeto aqui, mas você pode aprender mais sobre ele em a documentação do TypeScript tsconfig.

Etapa 3: Configurando o compilador TypeScript para um fluxo de trabalho melhor

o tsconfig.json O arquivo contém opções de configuração para o compilador TypeScript divididas em sete seções:

  • Projetos
  • Idioma e ambiente
  • Módulos
  • Suporte a JavaScript
  • Emitir
  • Restrições de interoperabilidade
  • Verificação de tipo
  • Completude

A maioria das propriedades está desabilitada por padrão (elas são comentadas). Você pode ativá-los e modificá-los descomementando-os.

Aqui estão as etapas que você precisará seguir para alterar o local dos arquivos JavaScript gerados:

  1. Abrir tsconfig.json e localize o emitir seção.
  2. No emitir seção, descomentar o outDir propriedade e especifique o diretório que você deseja armazenar o compilado .ts arquivos. Agora sempre que você correr tsc, sua .js os arquivos estarão na pasta especificada.

Corrida tsc seguido pelo nome do arquivo que você deseja compilar não é ideal para seu fluxo de trabalho, especialmente quando você precisa compilar vários arquivos.

Para resolver esse problema, o compilador TypeScript fornece uma propriedade que permite compilar todos os arquivos de um diretório em um comando.

Siga estas etapas para configurar isso:

  1. Abrir tsconfig.json e localize o módulos seção.
  2. No módulos seção, descomentar o rootDir propriedade ou rootDirs (se você quiser que o compilador compile vários .ts diretórios em .js) e especifique o(s) diretório(s) do arquivo.

Essas configurações tornarão seu fluxo de trabalho melhor e seus arquivos mais fáceis de manter.

As vantagens do TypeScript

A principal vantagem do TypeScript sobre o JavaScript é sua segurança de tipo. O TypeScript possibilita a detecção rápida de bugs difíceis de encontrar. Esse recurso o torna ideal para criar aplicativos seguros e de grande escala.