Compilar código TypeScript usando npm

Use o pacote npm do TypeScript para adicionar o suporte do TypeScript a projetos com base 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 do TypeScript. O pacote npm typeScript fornece maior portabilidade em diferentes plataformas e ambientes.

Importante

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

Adicionar suporte ao TypeScript usando o npm

O pacote npm TypeScript adiciona suporte ao 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 você precisa instalar qualquer carga de trabalho de desenvolvimento para o Visual Studio ou o Node.js runtime.

   Para projetos criados usando o JSPS (JavaScript Project System) 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.

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

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

   Verifique a opção npm na janela Saída e veja o progresso da instalação do pacote. O pacote instalado aparece no nó npm do Gerenciador de Soluções.

3. Se o 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 Arquivo de Configuração JSON do TypeScript e clique em Adicionar.

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

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

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

   Segue um exemplo de um arquivo simples tsconfig.json.

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

   Neste exemplo:

   • include indica ao compilador onde encontrar arquivos 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 arquivos 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.

Compilar o aplicativo

1. Adicione arquivos TypeScript (.ts) ou TypeScript JSX (.tsx) ao seu projeto e adicione o código TypeScript. Um exemplo simples de TypeScript segue:

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

2. Em package.json, adicione suporte para comandos de build 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 build de linha de comando ao arquivo package.json:

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

3. Se você precisar configurar opções de build e implantação, como a URL do aplicativo ou os comandos de runtime, clique com o botão direito do mouse no nó do projeto no Gerenciador de Soluções e escolha Propriedades.

   Nota

   Ao configurar ferramentas de terceiros, projetos que utilizam o Sistema de Projetos JavaScript (JSPS) ou .esproj, não usem os caminhos 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. Clique em Compilar > Compilar Solução.

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

   Se você gerou mapas de origem, abra a pasta especificada na opção outDir e você encontrará os arquivos *.js que foram gerados, juntamente com os arquivos *js.map gerados.

   Arquivos sourcemaps são necessários para depuração.

Executar o aplicativo

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

Automatizar tarefas de build

Você pode usar o Gerenciador de Executores de Tarefas no Visual Studio para ajudar a automatizar tarefas para ferramentas de terceiros, como npm e webpack.

• NPM Executor de Tarefas – adiciona suporte para scripts npm definidos em package.json. Dá suporte ao yarn.
• Webpack Task Runner - adiciona suporte para webpack.

Conteúdo relacionado

Propriedades, React, Angular e Vue