Compartilhar via

Converter um projeto de Suplemento do Office no Visual Studio para TypeScript

Você pode usar o modelo de Suplemento do Office no Visual Studio para criar um suplemento que usa JavaScript e depois converter esse projeto de suplemento para o TypeScript. Este artigo descreve o processo de conversão de um suplemento do Excel. Você pode usar o mesmo processo para converter outros tipos de projetos de suplementos do Office de JavaScript para TypeScript no Visual Studio.

Pré-requisitos

  • Visual Studio 2022 ou posterior com a carga de trabalho de desenvolvimento do Office/SharePoint instalada

    Dica

    Se você já instalou o Visual Studio, use o Instalador do Visual Studio para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint esteja instalada. Se essa carga de trabalho ainda não estiver instalada, use o instalador do Visual Studio para instalá-la.

  • Excel 2016 ou posterior.

Criar o projeto do suplemento

Observação

Ignore esta secção se já tiver um projeto existente.

  1. No Visual Studio, escolha Criar um novo projeto. Se o ambiente de desenvolvimento do Visual Studio já estiver aberto, pode criar um novo projeto ao selecionar Ficheiro>Novo>Projeto na barra de menus.

  2. Usando a caixa de pesquisa, insira suplemento. Escolha suplemento do Excel Web , em seguida, selecione Próximo.

  3. Nomeie seu projeto e selecione Criar.

  4. Na janela Criar Suplemento do Office, escolha Adicionar novas funcionalidades para o Excele clique em Concluir para criar o projeto.

  5. O Visual Studio cria uma solução, e os dois projetos dele são exibidos no Gerenciador de Soluções. O arquivo Home.html é aberto no Visual Studio.

Converter o projeto do suplemento para TypeScript

Adicionar pacote Nuget

  1. Abra o gestor de pacotes Nuget ao selecionar Ferramentas> Gestor > dePacotes NugetGerir Pacotes Nuget para Solução
  2. Selecione o separador Procurar. Procure e selecione Microsoft.TypeScript.MSBuild. Instale este pacote no ASP.NET projeto Web ou atualize-o se já estiver instalado. O ASP.NET projeto Web tem o nome do projeto com o texto Web anexado ao fim. Isto irá garantir que o projeto será transppple para JavaScript quando a compilação for executada.

Observação

Em seu projeto em TypeScript, você pode ter uma combinação de arquivos TypeScript e JavaScript e seu projeto irá compilar. Isso ocorre porque o TypeScript é um superconjunto tipado do JavaScript que compila o JavaScript.

Criar um ficheiro de configuração TypeScript

  1. No Gerenciador de Soluções, clique com o botão direito do rato (ou selecione sem soltar) no projeto Web ASP.NET e selecione Adicionar>Novo Item. O ASP.NET projeto Web tem o nome do projeto com o texto Web anexado ao fim.

  2. Na caixa de diálogo Adicionar Novo Item , procure e selecione Ficheiro de configuração JSON typeScript. Selecione Adicionar para criar um ficheiro tsconfig.json .

  3. Atualize o ficheiro tsconfig.json para ter também uma include secção, conforme mostrado no JSON seguinte.

    {
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [ 
      "es2015",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "include": [
    "scripts/**/*",
    "**/*"
  ]
}

  4. Salve o arquivo. Para obter mais informações sobre tsconfig.json definições, consulte O que é uma tsconfig.json?

Criar um ficheiro de configuração npm

  1. No Gerenciador de Soluções, clique com o botão direito do rato (ou selecione sem soltar) no projeto Web ASP.NET e selecione Adicionar>Novo Item. O ASP.NET projeto Web tem o nome do projeto com o texto Web anexado ao fim.

  2. Na caixa de diálogo Adicionar Novo Item , procure ficheiro de configuração npm. Selecione Adicionar para criar um ficheiro package.json .

  3. Atualize o ficheiro package.json para ter o @types/jquery pacote na devDependencies secção, conforme mostrado no seguinte JSON.

    {
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/jquery": "^3.5.30"
  }
}

  4. Salve o arquivo.

  5. Abra as propriedades do projeto npm ao aceder a Opções de Ferramentas> e, em seguida, Projetos e Soluções>– Restauro do Pacote deGestão> de Pacotes Web. Defina Restaurar No Projeto Aberto e Restaurar Ao Guardar como "Verdadeiro". Selecione OK para guardar as definições.

Atualizar os ficheiros JavaScript

Altere os ficheiros JavaScript (.js) para ficheiros TypeScript (.ts). Em seguida, faça as alterações necessárias para compilar. Esta secção explica os ficheiros predefinidos num novo projeto.

  1. Localize o arquivo Home.js e o renomeie para Home.ts.

  2. Localize o arquivo ./Functions/FunctionFile.js e renomeie-o para FunctionFile.ts.

  3. Localize o arquivo ./Scripts/MessageBanner.js e renomeie-o para MessageBanner.ts.

  4. Em ./Scripts/MessageBanner.ts, localize a linha _onResize(null); e substitua-a pelo seguinte:

    _onResize();

Os ficheiros JavaScript gerados pelo Visual Studio não contêm nenhuma sintaxe TypeScript. Deve considerar atualizá-los. Por exemplo, o código seguinte mostra como atualizar os parâmetros para showNotification incluir os tipos de cadeia.

 function showNotification(header: string, content: string) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }

Executar o projeto do suplemento convertido

  1. No Visual Studio, prima F5 ou selecione o botão Iniciar para iniciar o Excel com o botão mostrar suplemento Painel de Tarefas apresentado no friso. O suplemento será hospedado localmente no IIS.

  2. No Excel, selecione o separador Base e, em seguida, selecione o botão Mostrar Painel de Tarefas no friso para abrir o painel de tarefas do suplemento.

  3. Na planilha, selecione as nove células que contêm números.

  4. Pressione o botão Realçar no painel de tarefas para realçar a célula no intervalo selecionado com o maior valor.

Confira também

  • Last updated on