Share via

Compilar o código TypeScript (Node.js)

  • Artigo

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 do TypeScript fornece maior portabilidade em diferentes plataformas e ambientes.

Importante

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

Adicionar suporte a TypeScript usando npm

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

  1. Siga as instruções para instalar a carga de trabalho de desenvolvimento Node.js e o runtime do Node.js.

    Para uma integração simples do Visual Studio, crie seu projeto usando um dos modelos TypeScript do Node.js, como o modelo de aplicativo da Web Node.js em branco. Caso contrário, use um modelo JavaScript do Node.js incluso no Visual Studio e siga as instruções aqui. Ou use um projeto Abrir Pasta.

  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 aos pacotes no nó npm em Gerenciador de Soluções. Para obter mais informações, consulte Gerenciar pacotes npm.

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

    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.

    Caso você não veja todos os modelos de item, escolha Mostrar todos os modelos e 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 o arquivo tsconfig.json e atualize para definir as opções do compilador desejadas.

    Veja a seguir um exemplo de um arquivo tsconfig.json simples.

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

    Neste exemplo:

    • include informa ao compilador onde localizar arquivos TypeScript (*.ts).
    • A opção outDir especifica a pasta de saída para os arquivos JavaScript simples que são transcompilados pelo compilador TypeScript.
    • A 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, confira tsconfig.json.

Compilar o aplicativo

  1. Adicione arquivos TypeScript (.ts) ou TypeScript JSX (.tsx) ao seu projeto e, em seguida, 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 build e limpeza do Visual Studio usando os scripts a seguir.

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

    Para compilar 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"
}

    Para obter um exemplo de como usar o webpack com React e um arquivo de configuração de webpack, consulte Criar um aplicativo Web com Node.js e React.

    Para obter um exemplo de como usar Vue.js com TypeScript, consulte Criar um aplicativo Vue.js.

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

    Observação

    Ao configurar ferramentas de terceiros, projetos em Node.js não usam os caminhos configurados em Ferramentas>Opções>Projetos e soluções>Gerenciamento de Pacotes da Web>Ferramentas da Web Externas. Essas configurações são usadas em 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 compilação:

    Se você gerou sourcemaps, abra a pasta especificada na opção outDir e encontre o(s) arquivo(s) *.js gerado(s) juntamente com os o(s) arquivo(s) *js.map gerado(s).

    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 aplicativo Node.js e Express.

Automatizar tarefas de build

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

Conteúdo relacionado

Propriedades, React, Angular e Vue