Compilar código TypeScript (Node.js)

Use o pacote npm do TypeScript para adicionar suporte TypeScript a projetos baseados no JavaScript Project System (JSPS) ou .esproj. A partir do Visual Studio 2019, é recomendável que você use o pacote npm em vez do SDK TypeScript. O pacote npm TypeScript oferece maior portabilidade em diferentes plataformas e ambientes.

Importante

Para projetos ASP.NET Core, use o pacote NuGet em vez de npm para adicionar suporte a TypeScript.

Adicionar suporte a TypeScript usando npm

O pacote npm TypeScript adiciona suporte a TypeScript. Quando o pacote npm para TypeScript 2.1 ou superior é instalado em seu projeto, a versão correspondente do serviço de linguagem TypeScript é carregada no editor.

1. Verifique se precisas instalar algum workload de desenvolvimento para o Visual Studio ou o runtime Node.js.

   Para projetos criados usando o JavaScript Project System (JSPS), ou .esproj, nenhuma carga de trabalho adicional é necessária. Você só precisa instalar o npm (https://www.npmjs.com/), que está incluído com Node.js.

   Para o tipo de projeto mais antigo (.njsproj), você precisa instalar a carga de trabalho de desenvolvimento Node.js e o tempo de execução Node.js.

2. Se o seu projeto ainda não o incluir, instale o pacote npm TypeScript.

   No Gerenciador de Soluções (painel direito), abra o package.json na raiz do projeto. Os pacotes listados correspondem a pacotes sob o nó npm no Gerenciador de Soluções. Para obter mais informações, consulte Gerenciar pacotes npm.

   Para um projeto Node.js, você pode instalar o pacote npm TypeScript usando a linha de comando ou o IDE. Para instalar usando a IDE, clique com o botão direito do rato no nó npm no Gerenciador de Soluções, escolha Instalar Novo pacote npm, procure TypeScripte instale o pacote.

   Marque a opção npm na janela Output para ver o progresso da instalação do pacote. O pacote instalado aparece sob o nó npm no Gerenciador de Soluções.

3. Se o seu projeto ainda não o incluir, adicione um arquivo tsconfig.json à raiz do projeto. Para adicionar o arquivo, clique com o botão direito do mouse no nó do projeto e escolha Adicionar > Novo Item. Escolha o TypeScript JSON Configuration Filee, em seguida, clique em Adicionar.

   Se não vir todos os modelos de item, escolha Mostrar Todos os Modelose, em seguida, escolha o modelo de item.

   O Visual Studio adiciona o arquivo tsconfig.json à raiz do projeto. Você pode usar este arquivo para configurar opções do compilador TypeScript.

4. Abra tsconfig.json e atualize para definir as opções do compilador desejadas.

   Segue-se um exemplo de um ficheiro tsconfig.json simples.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   Neste exemplo:

   • incluir indica ao compilador onde encontrar ficheiros TypeScript (*.ts).
   • opção outDir especifica a pasta de saída para os arquivos JavaScript simples que são transpilados pelo compilador TypeScript.
   • opção sourceMap indica se o compilador gera ficheiros sourceMap.

   A configuração anterior fornece apenas uma introdução básica à configuração do TypeScript. Para obter informações sobre outras opções, consulte tsconfig.json.

Criar o aplicativo

1. Adicione arquivos TypeScript (.ts) ou TypeScript JSX (.tsx) ao seu projeto e, em seguida, adicione o código TypeScript. Segue-se um exemplo simples de TypeScript:

   let message: string = 'Hello World';
   console.log(message);
   

2. No package.json, adicione suporte para comandos de compilação e limpeza do Visual Studio usando os scripts a seguir.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Para criar usando uma ferramenta de terceiros como o Webpack, você pode adicionar um script de construção de linha de comando ao seu arquivo package.json:

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Se você precisar configurar opções como a página de inicialização, o caminho para o tempo de execução do Node.js, a porta do aplicativo ou os argumentos de tempo de execução, clique com o botão direito do mouse no nó do projeto no Gerenciador de Soluções e escolha Propriedades.

   Observação

   Ao configurar ferramentas de terceiros, projetos Node.js não usam os caminhos que estão configurados em Ferramentas >Opções>Projetos e soluções>Gerenciamento de Pacotes da Web>Ferramentas Web Externas. Essas configurações são usadas para outros tipos de projeto.

4. Escolha Build > Build Solution.

   O aplicativo é compilado automaticamente quando você o executa. No entanto, o seguinte pode ocorrer durante o processo de compilação:

   Se você gerou mapas de origem, abra a pasta especificada na opção outDir e você encontrará o(s) arquivo(s) de.js gerado(s) junto com o(s) arquivo(s) *js.map gerado(s).

   Os arquivos de mapa de origem são necessários para depuração.

Execute o aplicativo

Para obter instruções sobre como executar o aplicativo depois de compilá-lo, consulte Criar um aplicativo Node.js e Express.

Automatize tarefas de compilação

Você pode usar o Task Runner Explorer no Visual Studio para ajudar a automatizar tarefas para ferramentas de terceiros, como npm e Webpack.

• NPM Task Runner - Adiciona suporte para scripts npm definidos em package.json. Suporta fios.
• Webpack Task Runner - Adiciona suporte para Webpack.

Conteúdo relacionado

Propriedades, React, Angular, Vue