Transpilar código TypeScript usando npm

Adicionar suporte a TypeScript usando npm

O pacote npm TypeScript adiciona compatibilidade com o 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. Verifica se precisas de instalar algum pacote de ferramentas de desenvolvimento para o Visual Studio ou o runtime do 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 (), que está incluído com Node.js.

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

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

   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 Explorador 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.

   Visual Studio adiciona o ficheiro tsconfig.json à raiz do projeto. Pode usar este ficheiro para configurar opções para o tsc, o compilador TypeScript, que transpila o TypeScript para JavaScript.

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).
   • a opção outDir especifica a pasta de saída para os ficheiros JavaScript simples que são transpilados pelo tsc, o compilador TypeScript.
   • opção sourceMap indica se o compilador gera sourceMap ficheiros.

   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. Em package.json, adicione suporte para comandos de compilação e limpeza Visual Studio usando os seguintes scripts.

   "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 precisares de configurar opções de build e deployment, como o URL da aplicação ou comandos de runtime, clica com o botão direito no nó do projeto no Explorador de Soluções e escolhe Properties.

   Observação

   Ao configurar ferramentas de terceiros, projetos usando o JSPS (JavaScript Project System) ou .esproj, não use os caminhos configurados em Opções de FerramentasProjetos e soluçõesGerenciamento de pacotes WebFerramentas 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

Automatize tarefas de compilação

Pode usar o Task Runner Explorer no Visual Studio para ajudar a automatizar tarefas para ferramentas de terceiros como npm e webpack.

Conteúdo relacionado

Propriedades, React, Angular, Vue