Freigeben über

Konvertieren eines Office-Add-In-Projekts aus Visual Studio in TypeScript

Sie können die Office-Add-In-Vorlage in Visual Studio verwenden, um ein Add-In zu erstellen, das JavaScript verwendet, und dann dieses Add-In-Projekt in TypeScript konvertieren. In diesem Artikel wird dieser Konvertierungsprozess für ein Excel-Add-In beschrieben. Sie können diesen Vorgang verwenden, um andere Arten von Office-Add-In-Projekten in Visual Studio von JavaScript in TypeScript zu konvertieren.

Voraussetzungen

Erstellen des Add-In-Projekts

Hinweis

Überspringen Sie diesen Abschnitt , wenn Sie bereits über ein projekt verfügen.

  1. Wählen Sie in Visual Studio Neues Projekt erstellen. Wenn die Visual Studio-Entwicklungsumgebung bereits geöffnet ist, können Sie ein neues Projekt erstellen, indem Sie auf der Menüleiste Datei>Neues>Projekt auswählen.

  2. Geben Sie Add-In in das Suchfeld ein. Wählen Sie Excel-Web-Add-In und dann Weiter aus.

  3. Benennen Sie Ihr Projekt, und wählen Sie Erstellen aus.

  4. Wählen Sie im Dialogfenster Office-Add-In erstellen die Option Excel neue Funktionen hinzufügen aus, und wählen Sie dann Fertig stellen aus, um das Projekt zu erstellen.

  5. Visual Studio erstellt eine Lösung, und die beiden zugehörigen Projekte werden im Projektmappen-Explorer angezeigt. Die Datei Home.html wird in Visual Studio geöffnet.

Konvertieren des Add-In-Projekts in TypeScript

NuGet-Paket hinzufügen

  1. Öffnen Sie den NuGet-Paket-Manager, indem Sie Tools>NuGet-Paket-Manager>Verwalten von NuGet-Paketen für Projektmappe auswählen.
  2. Wählen Sie die Registerkarte Durchsuchen aus. Suchen Sie nach Microsoft.TypeScript.MSBuild, und wählen Sie diese Option aus. Installieren Sie dieses Paket im ASP.NET Webprojekt, oder aktualisieren Sie es, wenn es bereits installiert ist. Das ASP.NET-Webprojekts enthält ihren Projektnamen, wobei der Text Web am Ende angefügt ist. Dadurch wird sichergestellt, dass das Projekt nach JavaScript transpilieren wird, wenn der Build ausgeführt wird.

Hinweis

In Ihrem TypeScript-Projekt können Sie eine Mischung aus TypeScript- und JavaScript-Dateien verwenden, und Ihr Projekt wird kompiliert. Dies liegt daran, dass TypeScript eine typisierte Obermenge von JavaScript ist, die JavaScript kompiliert.

Erstellen einer TypeScript-Konfigurationsdatei

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET Webprojekt (oder wählen Sie es aus, und halten Sie es gedrückt), und wählen SieNeues Elementhinzufügen> aus. Das ASP.NET-Webprojekts enthält ihren Projektnamen, wobei der Text Web am Ende angefügt ist.

  2. Suchen Sie im Dialogfeld Neues Element hinzufügen nach TypeScript JSON-Konfigurationsdatei, und wählen Sie diese Option aus. Wählen Sie Hinzufügen aus, um eine tsconfig.json-Datei zu erstellen.

  3. Aktualisieren Sie die tsconfig.json-Datei , um auch einen include Abschnitt zu erhalten, wie im folgenden JSON-Code gezeigt.

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

  4. Speichern Sie die Datei. Weitere Informationen zu tsconfig.json Einstellungen finden Sie unter Was ist ein tsconfig.json?

Erstellen einer npm-Konfigurationsdatei

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET Webprojekt (oder wählen Sie es aus, und halten Sie es gedrückt), und wählen SieNeues Elementhinzufügen> aus. Das ASP.NET-Webprojekts enthält ihren Projektnamen, wobei der Text Web am Ende angefügt ist.

  2. Suchen Sie im Dialogfeld Neues Element hinzufügen nach npm-Konfigurationsdatei. Wählen Sie Hinzufügen aus, um eine package.json-Datei zu erstellen.

  3. Aktualisieren Sie die package.json-Datei , damit das @types/jquery Paket im devDependencies Abschnitt enthalten ist, wie im folgenden JSON-Code gezeigt.

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

  4. Speichern Sie die Datei.

  5. Öffnen Sie die npm-Projekteigenschaften, indem Sie zu Extras>Optionenund dann Projekte und Projektmappen>Webpaketverwaltung>Paketwiederherstellung wechseln. Legen Sie sowohl Bei Projekt öffnen wiederherstellen als auch Beim Speichern wiederherstellen auf "True" fest. Wählen Sie OK aus, um die Einstellungen zu speichern.

Aktualisieren der JavaScript-Dateien

Ändern Sie Ihre JavaScript-Dateien (.js) in TypeScript-Dateien (.ts). Nehmen Sie dann die erforderlichen Änderungen vor, damit sie kompiliert werden können. In diesem Abschnitt werden die Standarddateien in einem neuen Projekt beschrieben.

  1. Suchen Sie die Datei "Home.js, und benennen Sie sie in Home.ts um.

  2. Suchen Sie die Datei ./Functions/FunctionFile.js, und benennen Sie diese in FunctionFile.ts um.

  3. Suchen Sie die Datei ./Scripts/MessageBanner.js, und benennen Sie diese in MessageBanner.ts um.

  4. Suchen Sie in ./Scripts/MessageBanner.ts die Zeile _onResize(null);, und ersetzen Sie sie durch Folgendes:

    _onResize();

Die von Visual Studio generierten JavaScript-Dateien enthalten keine TypeScript-Syntax. Sie sollten erwägen, sie zu aktualisieren. Der folgende Code zeigt z. B., wie die Parameter auf aktualisiert werden, um showNotification die Zeichenfolgentypen einzuschließen.

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

Ausführen des konvertierten Add-In-Projekts

  1. Drücken Sie in Visual Studio F5 , oder wählen Sie die Schaltfläche Start aus, um Excel mit der Im Menüband angezeigten Add-In-Schaltfläche Aufgabenbereich anzeigen zu starten. Das Add-In wird lokal auf IIS gehostet.

  2. Wählen Sie in Excel die Registerkarte Start und dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen.

  3. Wählen Sie im Arbeitsblatt die neun Zellen, die Zahlen enthalten.

  4. Drücken Sie die Hervorheben-Schaltfläche im Aufgabenbereich, um die Zelle im markierten Bereich hervorzuheben, die den höchsten Wert enthält.

Siehe auch

  • Last updated on