Partilhar via

Tutorial: Adicionar TypeScript a um aplicativo ASP.NET Core existente no Visual Studio

Neste tutorial para desenvolvimento do Visual Studio usando ASP.NET Core e TypeScript, você cria um aplicativo Web simples, adiciona algum código TypeScript e executa o aplicativo.

No Visual Studio 2022 e posterior, se você quiser usar Angular ou Vue com ASP.NET Core, é recomendável usar os modelos SPA (Aplicativo de Página Única) ASP.NET Core para criar um aplicativo ASP.NET Core com TypeScript. Para obter mais informações, consulte os tutoriais do Visual Studio para Angular ou Vue.

Se você ainda não instalou o Visual Studio, vá para a página de downloads do Visual Studio para instalá-lo gratuitamente.

Neste tutorial, você aprenderá a:

  • Criar um projeto ASP.NET Core
  • Adicionar o pacote NuGet para suporte a TypeScript
  • Adicionar algum código TypeScript
  • Executar o aplicativo
  • Adicionar uma biblioteca de terceiros usando npm

Pré-requisitos

Você deve ter o Visual Studio instalado e a carga de trabalho de desenvolvimento web do ASP.NET.

  • Se você ainda não instalou o Visual Studio, vá para a página de downloads do Visual Studio para instalá-lo gratuitamente.

  • Se você precisar instalar a carga de trabalho, mas já tiver o Visual Studio, vá para Ferramentas>Obter Ferramentas e Recursos... para abrir o Visual Studio Installer. Escolha o pacote de trabalho de ASP.NET e desenvolvimento web e, em seguida, selecione Modificar.

Criar um novo projeto ASP.NET Core MVC

Visual Studio gerencia arquivos para um único aplicativo em um projeto . O projeto inclui código-fonte, recursos e arquivos de configuração.

Observação

Para começar com um projeto ASP.NET Core vazio e adicionar um front-end TypeScript, consulte ASP.NET Core com TypeScript em vez disso.

Neste tutorial, você começa com um projeto simples contendo código para um aplicativo ASP.NET Core MVC.

  1. Abra o Visual Studio. Se a janela de início não estiver aberta, escolha Arquivo>Janela de Início.

  2. Na janela Iniciar, escolha Criar um novo projeto.

  3. Na janela Criar um novo projeto, insira aplicação web na caixa de pesquisa. Em seguida, escolha C# como linguagem.

    Depois de aplicar o filtro de idioma, escolha ASP.NET Core Web App (Model-View-Controller)e, em seguida, selecione Avançar.

    Observação

    Se tu não vires o modelo de projeto ASP.NET Core Web Application, deves adicionar o grupo de trabalho ASP.NET e desenvolvimento web. Para obter instruções detalhadas, consulte o Pré-requisitos.

  4. Na janela Configurar o seu novo projeto, insira um nome para o seu projeto na caixa Nome do projeto. Em seguida, selecione Avançar.

  1. Selecione a estrutura de destino recomendada (.NET 8.0 ou suporte de longo prazo) e, em seguida, selecione Criar.
  1. Na janela Informações adicionais, verifique se o .NET 8.0 está selecionado no menu suspenso Framework e, em seguida, selecione Criar.

O Visual Studio abre seu novo projeto.

Adicionar algum código

  1. No Gerenciador de Soluções (painel direito), clique com o botão direito do mouse no nó do projeto e selecione Gerenciar Pacotes NuGet para Soluções.

  2. Na guia Procurar, pesquise por Microsoft.TypeScript.MSBuild.

  3. Selecione Instalar para instalar o pacote.

    Adicionar pacote NuGet

    O Visual Studio adiciona o pacote NuGet sob o nó Dependências no Gerenciador de Soluções.

  4. Clique com o botão direito do mouse no nó do projeto e selecione Adicionar > Novo Item. Escolha o TypeScript JSON Configuration Filee, em seguida, selecione Adicionar.

    Se não vir todos os modelos de item, selecione Mostrar Todos os Modelos e, em seguida, 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.

  5. Abra tsconfig.json e substitua o código padrão pelo seguinte código:

    {
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

    A opção outDir especifica a pasta de saída para os arquivos JavaScript simples que o compilador TypeScript transpila.

    Essa configuração fornece uma introdução básica ao uso do TypeScript. Em outros cenários, como ao usar gulp ou webpack, você pode querer um local intermediário diferente para os arquivos JavaScript transpilados em vez de wwwroot/js. A localização depende das suas ferramentas e preferências de configuração.

  6. No Gerenciador de Soluções, clique com o botão direito do mouse no nó do projeto e selecione >Nova Pasta . Use o nome scripts para a nova pasta.

  7. Clique com o botão direito do mouse na pasta scripts e selecione Adicionar > Novo Item. Escolha o arquivo TypeScript, digite o nome app.ts do arquivo e selecione Adicionar.

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

    O Visual Studio adiciona app.ts ao scripts pasta.

  8. Abra app.ts e adicione o seguinte código TypeScript.

    function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

    Visual Studio fornece suporte IntelliSense para seu código TypeScript.

    Para experimentar esse recurso, remova .lastName da função greeter, insira novamente o ponto (.) e observe as atualizações do IntelliSense.

    visualizar o IntelliSense

    Selecione lastName para adicionar o sobrenome de volta ao código.

  9. Abra a pasta Views/Home e, em seguida, abra Index.cshtml .

  10. Adicione o seguinte código HTML ao final do arquivo.

    <div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

  11. Abra a pasta Views/Shared e, em seguida, abra _Layout.cshtml.

  12. Adicione a seguinte referência de script antes da chamada para @await RenderSectionAsync("Scripts", required: false):

    <script src="~/js/app.js"></script>

  13. Selecione Arquivo>Guardar tudo (Ctrl + Shift + S) para guardar as suas alterações.

Criar o aplicativo

  1. Selecione Build > Build Solution.

    Embora o aplicativo seja compilado automaticamente quando você o executa, queremos dar uma olhada em algo que acontece durante o processo de compilação.

  2. Abra a pasta wwwroot/js para ver dois novos ficheiros: app.js e o ficheiro de mapa de origem, app.js.map. O compilador TypeScript gera esses arquivos.

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

Execute o aplicativo

  1. Pressione F5 (Debug>Start Debugging) para executar o aplicativo.

    O aplicativo é aberto em um navegador.

    Na janela do navegador, vê-se o título de boas-vindas e o botão Clique em mim.

    ASP.NET Core com TypeScript

  2. Selecione o botão para exibir a mensagem que especificamos no arquivo TypeScript.

Depurar o aplicativo

  1. Defina um ponto de interrupção na função greeter em app.ts clicando na margem esquerda no editor de códigos.

    Definir um ponto de interrupção

  2. Pressione F5 para executar o aplicativo.

    Talvez seja necessário responder a uma mensagem para habilitar a depuração de script.

    Observação

    O Chrome ou o Edge são necessários para a depuração de scripts do lado do cliente.

  3. Quando a página carregar, pressione Clique aqui.

    O aplicativo pausa no ponto de interrupção. Agora, você pode inspecionar variáveis e usar recursos do depurador.

Adicionar suporte a TypeScript para uma biblioteca de terceiros

  1. Siga as instruções em de gerenciamento de pacotes npm para adicionar um arquivo package.json ao seu projeto. Esta tarefa adiciona suporte a npm ao seu projeto.

    Observação

    Para projetos ASP.NET Core, você também pode usar ou yarn do Gerenciador de Bibliotecas em vez de npm para instalar arquivos JavaScript e CSS do lado do cliente.

  2. Neste exemplo, adicione um arquivo de definição TypeScript para jQuery ao seu projeto. Inclua o código a seguir no arquivo package.json.

    "devDependencies": {
  "@types/jquery": "3.5.1"
}

    Este código adiciona suporte TypeScript para jQuery. A biblioteca jQuery em si já está incluída no modelo de projeto MVC (procure em wwwroot/lib no Gerenciador de Soluções). Se você estiver usando um modelo diferente, talvez seja necessário incluir o pacote jquery npm também.

  3. Se o pacote no Gerenciador de Soluções não estiver instalado, clique com o botão direito do mouse no nó npm e escolha Restaurar Pacotes.

    Observação

    Em alguns cenários, o Gerenciador de Soluções pode indicar que um pacote npm está fora de sincronia com package.json devido a um problema conhecido descrito aqui. Por exemplo, o pacote pode aparecer como não instalado quando é instalado. Na maioria dos casos, você pode atualizar o Gerenciador de Soluções excluindo package.json, reiniciando o Visual Studio e adicionando novamente o arquivo package.json, conforme descrito anteriormente neste artigo.

  4. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta scripts e escolha Adicionar>Novo Item.

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

  5. Escolha arquivo TypeScript, digite library.tse escolha Adicionar.

  6. No library.ts, adicione o seguinte código.

    var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();

    Para simplificar, esse código exibe uma mensagem usando jQuery e um alerta.

    Com as definições de tipo TypeScript para jQuery adicionadas, você obtém suporte ao IntelliSense em objetos jQuery quando insere um ponto (.) após um objeto jQuery, conforme mostrado aqui.

    Captura de tela que mostra os resultados do Intellisense para o exemplo J Query.

  7. No _Layout.cshtml , atualize as referências de script para incluir library.js.

    <script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>

  8. Em Index.cshtml , adicione o seguinte HTML ao final do arquivo.

    <div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

  9. Pressione F5 (Debug>Start Debugging) para executar o aplicativo.

    O aplicativo é aberto no navegador.

    Selecione OK no alerta para ver a página atualizada para versão do jQuery é: 3.3.1!!.

    Captura de tela que mostra o exemplo J Query.

Próximos passos

Talvez você queira saber mais detalhes sobre como usar o TypeScript com o ASP.NET Core. Se você estiver interessado em programação Angular no Visual Studio, você pode usar a extensão de serviço de linguagem Angular para Visual Studio.

ASP.NET Core e TypeScript

Extensão de serviço de linguagem Angular

  • Last updated on