Migrieren von jQuery- und DataTables-Lösungen, die mit Script Editor-Webpart erstellt wurden, in SharePoint-Framework

2023-03-21

Eines der häufig verwendeten jQuery-Plug-Ins ist DataTables. Mit Datentabellen können Sie ganz einfach leistungsstarke Datenübersichten mit Daten erstellen, die von SharePoint und externen APIs stammen.

Liste der IT-Anfragen, die mit dem Script Editor-Webpart erstellt wurde

Um das Verfahren der Migration einer SharePoint-Anpassung in das SharePoint-Framework mithilfe von DataTables zu veranschaulichen, verwenden Sie die folgende Lösung, die einen Überblick über die IT-Supportanfragen zeigt, die aus einer SharePoint-Liste abgerufen wurden.

Übersicht über die IT-Supportanfragen, angezeigt auf einer SharePoint-Seite

Die Lösung wird mithilfe des Standardmäßigen SharePoint-Skripts Editor-Webparts erstellt. Es folgt der code, der von der Anpassung verwendet wird.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="requests" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Business unit</th>
      <th>Category</th>
      <th>Status</th>
      <th>Due date</th>
      <th>Assigned to</th>
    </tr>
  </thead>
</table>
<script>
  // UMD
  (function(factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery'], function ($) {
        return factory( $, window, document );
      });
    }
    else if (typeof exports === 'object') {
      // CommonJS
      module.exports = function (root, $) {
        if (!root) {
          root = window;
        }

        if (!$) {
          $ = typeof window !== 'undefined'
            ? require('jquery')
            : require('jquery')( root );
        }

        return factory($, root, root.document);
      };
    } else {
      // Browser
      factory(jQuery, window, document);
    }
  }
  (function($, window, document) {
    $.fn.dataTable.render.moment = function (from, to, locale) {
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }

      return function (d, type, row) {
        var m = window.moment(d, from, locale, true);

        // Order and type get a number value from Moment, everything else
          // sees the rendered value
          return m.format(type === 'sort' || type === 'type' ? 'x' : to);
        };
      };
    }));
</script>
<script>
$(document).ready(function() {
  $('#requests').DataTable({
    'ajax': {
      'url': "../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.ID,
            item.BusinessUnit,
            item.Category,
            item.Status,
            new Date(item.DueDate),
            item.AssignedTo.Title
          ];
        });
      }
    },
    columnDefs: [{
      targets: 4,
      render: $.fn.dataTable.render.moment('YYYY/MM/DD')
    }]
  });
});
</script>

Die Anpassung lädt zuerst die verwendeten Bibliotheken: jQuery, DataTables und Moment.js.

Als Nächstes wird die Struktur der Tabelle angegeben, die zum Darstellen der Daten verwendet wird.

Nach dem Erstellen der Tabelle, wird Moment.js in ein DataTables-Plug-In verpackt, sodass Datumsangaben, die in der Tabelle angezeigt werden, formatiert werden können.

Schließlich verwendet die Anpassung DataTables zum Laden und Darstellen der Liste von IT-Supportanfragen. Die Daten werden mithilfe von AJAX aus einer SharePoint-Liste geladen.

Durch die Verwendung von DataTables erhalten Endbenutzer eine leistungsfähige Lösung, mit der sie die Ergebnisse auf einfache Weise filtern, sortieren und darin blättern können, ohne dass weitere Entwicklungsschritte erforderlich sind.

Die Liste der IT-Supportanfragen, angezeigt mit DataTables und gefiltert nach Anfragen, die Lidia zugeordnet sind, sowie in absteigender Reihenfolge nach Fälligkeitsdatum sortiert

Migrieren der Übersichtslösung für IT-Anfragen vom Script Editor-Webpart in das SharePoint-Framework

Das Umwandeln dieser Anpassung in das SharePoint-Framework bietet zahlreiche Vorteile, z. B. die benutzerfreundlichere Konfiguration und die zentrale Verwaltung der Lösung. Nachfolgend finden Sie eine schrittweise Beschreibung der Migration der Lösung in das SharePoint-Framework. Zuerst migrieren Sie die Lösung in das SharePoint-Framework mit so wenig Änderungen am ursprünglichen Code wie möglich. Später wandeln Sie den Code der Lösung in TypeScript um, um von den Typsicherheitsfeatures der Lösung zur Entwicklungszeit zu profitieren.

Hinweis

Der Quellcode des Projekts in den verschiedenen Phasen der Migration steht unter Lernprogramm: Migrieren von jQuery- und DataTables-Lösungen, die mit Script Editor-Webpart erstellt wurden, in SharePoint Framework zur Verfügung.

Erstellen eines neuen SharePoint-Framework-Projekts

Erstellen Sie zunächst einen neuen Ordner für Ihr Projekt:
```
md datatables-itrequests
```
Navigieren Sie zum Projektordner:
```
cd datatables-itrequests
```
Führen Sie im Projektordner den SharePoint Framework-Yeoman-Generator aus, um ein Gerüst für ein neues SharePoint Framework-Projekt zu erstellen:
```
yo @microsoft/sharepoint
```
Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):
- Was lautet der Name Ihrer Lösung?: datatables-itrequests
- Welcher Typ von clientseitiger Komponente soll erstellt werden?: Webpart
- Wie lautet der Name Ihres Webparts?: IT-Anfragen
- Wie lautet die Beschreibung Ihres Webparts?: Zeigt Übersicht der IT-Supportanfragen
- Welches Framework möchten Sie verwenden?: Kein JavaScript-Framework
Öffnen Sie den Projektordner in einem Code-Editor. In diesem Tutorial verwenden Sie Visual Studio Code.

Laden von JavaScript-Bibliotheken

Ähnlich wie bei der ursprünglichen Lösung, die mit dem Skript-Editor-Webpart erstellt wurde, müssen Sie zunächst die javaScript-Bibliotheken laden, die für die Lösung erforderlich sind. In SharePoint-Framework besteht dies in der Regel aus zwei Schritten: Angeben der URL, aus der die Bibliothek geladen werden soll, und Verweisen auf die Bibliothek im Code.

Geben Sie die URLs an, von denen Bibliotheken geladen werden sollen. Öffnen Sie im Code-Editor die Datei ./config/config.json und ändern Sie den Abschnitt externals in Folgendes:
```
{
  // ..
  "externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-1.12.4.min.js",
      "globalName": "jQuery"
    },
    "datatables.net": {
      "path": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
      "globalName": "jQuery",
      "globalDependencies": [
        "jquery"
      ]
    },
    "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"
  },
  // ..
}
```
Dies dient zwei Zwecken:
1. Wenn die SharePoint-Framework-Toolkette des Builds das Bundle für das Webpart erstellt, ignoriert sie alle import- oder require -Anweisungen für diese drei Pakete und nimmt deren Quelle nicht in das Bundle auf. Ohne diese würde WebPack (das Tool, mit dem das Bundle erstellt wird) diese JavaScript-Bibliotheken in das resultierende SPFx-Komponenten-Bundle importieren.
2. Die SharePoint-Framework-Toolkette des Builds fügt diese drei Pakete als Abhängigkeiten zum Manifest der Komponente hinzu. Damit wird der Modullader des SharePoint-Frameworks angewiesen, sicherzustellen, dass diese Bibliotheken vor dem Laden des Komponenten-Bundles auf die Seite geladen wurden.
Hinweis

Weitere Informationen zum Verweisen auf externe Bibliotheken in SharePoint-Framework-Projekten finden Sie unter Hinzufügen einer externen Bibliothek zu Ihrem clientseitigen SharePoint-Webpart.
Öffnen Sie die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und fügen Sie nach der letzten import-Anweisung Folgendes hinzu:
```
import 'jquery';
import 'datatables.net';
import 'moment';
```

Definieren einer Datentabelle

Wie bei der ursprünglichen Lösung besteht der nächste Schritt darin, die Struktur der Tabelle zu definieren, die zum Anzeigen der Daten verwendet wird.

Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und ändern Sie die render()-Methode in:

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;
  }
  // ...
}

Registrieren des Moment.js-Plug-Ins für DataTables

Der nächste Schritt besteht darin, das Moment.js-Plug-In für DataTables zu definieren, damit Datumsangaben in der Tabelle formatiert werden können.

Erstellen Sie im Ordner ./src/webparts/itRequests eine neue Datei mit dem Namen moment-plugin.js, und fügen Sie den folgenden Code in die Datei ein:

// UMD
(
  function (factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery'], function ($) {
        return factory($, window, document);
      });
    } else if (typeof exports === 'object') {
      // CommonJS
      module.exports = function (root, $) {
        if (!root) {
          root = window;
        }

        if (!$) {
          $ = typeof window !== 'undefined'
            ? require('jquery')
            : require('jquery')(root);
        }

        return factory($, root, root.document);
      };
    } else {
      // Browser
      factory(jQuery, window, document);
    }
  }

  (function ($, window, document) {
    $.fn.dataTable.render.moment = function (from, to, locale) {
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }

      return function (d, type, row) {
        var moment = require('moment');
        var m = moment(d, from, locale, true);

        // Order and type get a number value from Moment, everything else
        // sees the rendered value
        return m.format(type === 'sort' || type === 'type' ? 'x' : to);
      };
    };
  })
);

Damit das Webpart das Plug-In lädt, muss es auf die neu erstellte Datei plugin.js-Moment verweisen. Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und fügen Sie nach der letzten import-Anweisung Folgendes hinzu:
```
import './moment-plugin';
```

Initialisieren von DataTables und Laden der Daten

Der letzte Schritt besteht darin, den Code einzuschließen, der die Datentabelle initialisiert und die Daten aus SharePoint lädt.

Erstellen Sie im Ordner ./src/webparts/itRequests eine neue Datei mit dem Namen script.js, und fügen Sie den folgenden Code in die Datei ein:

$(document).ready(function () {
  $('#requests').DataTable({
    'ajax': {
      'url': "../../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function (data) {
        return data.value.map(function (item) {
          return [
            item.ID,
            item.BusinessUnit,
            item.Category,
            item.Status,
            new Date(item.DueDate),
            item.AssignedTo.Title
          ];
        });
      }
    },
    columnDefs: [{
      targets: 4,
      render: $.fn.dataTable.render.moment('YYYY/MM/DD')
    }]
  });
});

Hinweis

Achten Sie darauf, den internen Namen (oder statischen Namen) von Spalten in den Parametern $select und $expend zu verwenden.

Um auf diese Datei im Webpart zu verweisen, öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und fügen Sie require('./script'); an das Ende der render()-Methode hinzu. Die render()-Methode sollte wie folgt aussehen:

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

    require('./script');
  }
  // ...
}

Überprüfen Sie, ob das Webpart wie erwartet funktioniert, indem Sie in der Befehlszeile Folgendes ausführen:
```
gulp serve --nobrowser
```

Da das Webpart die Daten von SharePoint lädt, müssen Sie das Webpart mithilfe der gehosteten SharePoint-Framework Workbench testen. Navigieren Sie zu https://{Ihr-Mandantenname}.sharepoint. com/_layouts/workbench.aspx und fügen Sie das Webpart dem Zeichenbereich hinzu. Die IT-Anfragen sollten nun mithilfe des DataTables-Plug-Ins „jQuery“ angezeigt werden.

IT-Anfragen, dargestellt in einem clientseitigen Webpart des SharePoint Framework

Hinzufügen von Unterstützung zum Konfigurieren des Webparts über Webparteigenschaften

In den vorherigen Schritten haben Sie die Lösungen für IT-Anfragen vom Script Editor-Webpart in das SharePoint-Framework migriert. Die Lösung arbeitet zwar bereits wie erwartet, nutzt aber keine der Vorteile von SharePoint Framework. Der Name der Liste, aus der IT-Fragen geladen werden, ist im Code enthalten; bei dem Code selbst handelt es sich um reines JavaScript, das schwieriger umzugestalten ist als TypeScript.

Die folgenden Schritte veranschaulichen, wie Sie die vorhanden Lösung erweitern können, damit Benutzer den Namen der Liste angeben können, aus der die Daten geladen werden sollen. Später wandeln Sie den Code in TypeScript um, um von den Typsicherheitsfeatures zu profitieren.

Definieren der Webparteigenschaft zum Speichern des Listennamens

Definieren Sie eine Webparteigenschaft, um den Namen der Liste zu speichern, aus der IT-Anfragen geladen werden sollten. Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.manifest.json, benennen Sie die standardmäßige description-Eigenschaft in listName um und löschen Sie ihren Wert.
Aktualisieren Sie die Webparteigenschaften, um die Änderungen im Manifest widerzuspiegeln. Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/IItRequestsWebPartProps.ts, und ändern Sie den Inhalt in:
```
export interface IItRequestsWebPartProps {
  listName: string;
}
```

Aktualisieren Sie die Anzeigebezeichnungen für die listName-Eigenschaft. Öffnen Sie als Nächstes die Datei ./src/webparts/itRequests/loc/mystrings.d.ts, und ändern Sie den Inhalt in:

declare interface IItRequestsStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  ListNameFieldLabel: string;
}

declare module 'itRequestsStrings' {
  const strings: IItRequestsStrings;
  export = strings;
}

Öffnen Sie die Datei ./src/webparts/itRequests/loc/en-us.js, und ändern Sie den Inhalt in:

define([], function() {
  return {
    "PropertyPaneDescription": "IT Requests settings",
    "BasicGroupName": "Data",
    "ListNameFieldLabel": "List name"
  }
});

Aktualisieren Sie das Webpart so, dass die neu definierte Eigenschaft verwendet wird. Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und ändern Sie die getPropertyPaneConfiguration()-Methode in:

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
// ...
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [{
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [{
          groupName: strings.BasicGroupName,
          groupFields: [
            PropertyPaneTextField('listName', {
              label: strings.ListNameFieldLabel
            })
          ]
        }]
      }]
    };
  }

  protected get disableReactivePropertyChanges(): boolean {
    return true;
  }
}

Um zu verhindern, dass das Webpart neu geladen wird, wenn Benutzer den Namen der Liste eingeben, haben Sie das Webpart darüber hinaus so konfiguriert, dass es den nicht reaktiven Eigenschaftenbereich verwendet, indem Sie die disableReactivePropertyChanges()-Methode hinzugefügt und den Rückgabewert auf true festgelegt haben.

Verwenden des konfigurierten Namens der Liste, aus der Daten geladen werden sollen

Zunächst wurde der Name der Liste, aus der die Daten geladen werden sollen, in die REST-Abfrage eingebettet. Da Benutzer diesen Namen nun konfigurieren können, sollte der konfigurierte Wert in die REST-Abfrage injiziert werden, bevor die Daten geladen werden. Die einfachste Möglichkeit hierzu besteht darin, den Inhalt der script.js-Datei in die Haupt-Webpartdatei zu verschieben.

Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und ändern Sie die render()-Methode in:

var $: any = (window as any).$;

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

    $(document).ready(() => {
      $('table', this.domElement).DataTable({
        'ajax': {
          'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          'dataSrc': function (data) {
            return data.value.map(function (item) {
              return [
                item.ID,
                item.BusinessUnit,
                item.Category,
                item.Status,
                new Date(item.DueDate),
                item.AssignedTo.Title
              ];
            });
          }
        },
        columnDefs: [{
          targets: 4,
          render: $.fn.dataTable.render.moment('YYYY/MM/DD')
        }]
      });
    });
  }

  // ...
}

Statt auf den Code aus der script.js-Datei zu verweisen, sind alle darin enthaltenen Inhalte Bestandteil der render-Methode des Webparts. In der REST-Abfrage können Sie nun den festen Namen der Liste durch den Wert der listName-Eigenschaft ersetzen, die den Namen der Liste wie vom Benutzer konfiguriert enthält. Bevor Sie den Wert verwenden, wird dieser mithilfe der Lodash-Funktion „escape“ mit Escapezeichen versehen, um eine Skripteinschleusung zu verhindern.

Der Großteil des Codes wird zu diesem Zeitpunkt immer noch mithilfe von reinem JavaScript geschrieben. Um Probleme mit der $ jQuery-Variablen zu vermeiden, mussten Sie diese vor der Klassendefinition als any-Typ definieren. Später ersetzen Sie diese beim Umwandeln des Codes in TypeScript durch eine echte Typdefinition.

Da Sie den Inhalt der Datei script.js in die Haupt-Webpartdatei verschoben haben, ist script.js nicht mehr erforderlich, und Sie können die Datei aus dem Projekt löschen.
Um zu überprüfen, ob das Webpart wie erwartet funktioniert, führen Sie Folgendes in der Befehlszeile aus:
```
gulp serve --nobrowser
```
Navigieren Sie zu der gehosteten Workbench, und fügen Sie das Webpart zum Zeichenbereich hinzu. Öffnen Sie den Webpart-Eigenschaftenbereich, geben Sie den Namen der Liste mit IT-Anfragen an, und wählen Sie die Schaltfläche Übernehmen aus, um die Änderungen zu bestätigen.

Jetzt sollten die IT-Anfragen im Webpart angezeigt werden.

Transformieren des einfachen JavaScript-Codes in TypeScript

Die Verwendung von TypeScript bietet gegenüber der Verwendung von JavaScript eine Reihe von Vorteilen. TypeScript kann nicht nur einfacher verwaltet und umgestaltet werden, sondern ermöglicht auch ein früheres Abfangen von Fehlern. Die folgenden Schritte beschreiben, wie Sie den ursprünglichen JavaScript-Code in TypeScript umwandeln.

Hinzufügen von Typdefinitionen für verwendete Bibliotheken

Um ordnungsgemäß zu funktionieren, erfordert TypeScript Typdefinitionen für die verschiedenen Bibliotheken, die im Projekt verwendet werden. Typdefinitionen werden häufig als npm-Pakete im @types Namespace verteilt.

Installieren Sie die Typdefinitionen für jQuery und DataTables, indem Sie in der Befehlszeile Folgendes ausführen:
```
npm install @types/jquery@1.10.34 @types/datatables.net@1.10.15 --save-dev --save-exact
```
Tipp

In diesem Beispiel wird die genaue Version des npm-Pakets angegeben, das installiert werden soll. Auf diese Weise wird sichergestellt, dass npm ein Paket zur Typdeklaration installiert, das der Version von jQuery und der DataTables-Bibliothek entspricht, die wir in unserem Projekt verwenden.

Das --save-dev-Argument weist npm an, die Verweise auf diese beiden Pakete in der devDependencies-Sammlung in der Datei package.json zu speichern. TypeScript-Deklarationen werden nur in der Entwicklung benötigt. Deshalb möchten wir Sie nicht in der dependencies-Sammlung haben.

Das --save-exact-Argument weist npm an, Verweise auf die spezifische Version in der Datei package.json hinzuzufügen und die Notation nicht hinzuzufügen, um automatische Upgrades auf eine neuere Version zu aktivieren.

Typdefinitionen für Moment.js werden zusammen mit dem Moment.js-Paket bereitgestellt. Obwohl Sie Moment.js über eine URL laden, müssen Sie das Moment.js-Paket trotzdem noch im Projekt installieren, um ihre Eingaben verwenden zu können.
Installieren Sie das Moment.js-Paket, indem Sie in der Befehlszeile Folgendes ausführen:
```
npm install moment@2.27.0 --save-exact
```

Aktualisieren von Paketverweisen

Um Typen von den installierten Typdefinitionen zu verwenden, müssen Sie ändern, wie auf Bibliotheken verwiesen wird.

Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und ändern Sie die import 'jquery';-Anweisung in:
```
import * as $ from 'jquery';
```
Da Sie $ als jQuery definiert haben, können Sie nun die lokale Definition von $ entfernen, die Sie zuvor hinzugefügt hatten:
```
var $: any = (window as any).$;
```

Aktualisieren der Haupt-Webpartdateien in TypeScript

Da jetzt die Typdefinitionen für alle im Projekt installierten Bibliotheken vorhanden sind, können Sie mit dem Transformieren des einfachen JavaScript-Codes in TypeScript beginnen.

Definieren Sie eine Schnittstelle für die IT-Anfrageinformationen, die Sie aus der SharePoint-Liste abrufen. Öffnen Sie im Code-Editor die Datei ./src/webparts/itRequests/ItRequestsWebPart.ts, und fügen Sie direkt über der Webpartklasse den folgenden Codeausschnitt hinzu:
```
interface IRequestItem {
  ID: number;
  BusinessUnit: string;
  Category: string;
  Status: string;
  DueDate: string;
  AssignedTo: { Title: string; };
}
```

Ändern Sie als Nächstes in der Webpart-Klasse die render()-Methode in:

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

      $('table', this.domElement).DataTable({
        'ajax': {
          'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          'dataSrc': (data: { value: IRequestItem[] }): any[][] => {
            return data.value.map((item: IRequestItem): any[] => {
              return [
                item.ID,
                item.BusinessUnit,
                item.Category,
                item.Status,
                new Date(item.DueDate),
                item.AssignedTo.Title
              ];
            });
          }
        },
        columnDefs: [{
          targets: 4,
          render: ($.fn.dataTable.render as any).moment('YYYY/MM/DD')
        }]
      });
  }

  // ...
}

Sie werden feststellen, dass die AJAX-Anforderung zum Abrufen der Daten aus der SharePoint-Liste jetzt eingegeben ist, damit Sie sicherstellen können, dass Sie auf die korrekten Eigenschaften verweisen, wenn Sie diese in ein Array in DataTables übergeben. Die von DataTables verwendete Datenstruktur zur Darstellung einer Zeile in der Tabelle ist ein Array gemischter Typen, der Einfachheit halber wurde diese daher als any[] definiert. Die Verwendung des any-Typs in diesem Kontext ist nicht schlecht, da die in der dataSrc-Eigenschaft zurückgegebenen Daten intern von DataTables verwendet werden.

Durch Aktualisieren der render()-Methode haben Sie auch zwei weitere Änderungen hinzugefügt. Zuerst haben sie das id-Attribut aus der Tabelle entfernt. Auf diese Weise können Sie mehrere Instanzen desselben Webparts auf der Seite platzieren. Sie haben auch den Verweis auf die $(document).ready()-Funktion entfernt, der nicht erforderlich ist, da das DOM des Elements, in dem die Datentabelle gerendert wird, vor dem DataTables-Initiierungscode festgelegt wird.

Aktualisieren des Moment.js-DataTables-Plug-Ins in TypeScript

Der letzte Teil dieser Lösung, der in TypeScript umgewandelt werden muss, ist das Moment.js-DataTable-Plug-in.

Benennen Sie die Datei ./src/webparts/itRequests/moment-plugin.js in ./src/webparts/itRequests/moment-plugin.ts um, damit sie vom TypeScript-Compiler verarbeitet wird.

Öffnen Sie im Code-Editor die Datei moment-plugin.ts, und ersetzen Sie den Inhalt durch:

import * as $ from 'jquery';
import * as moment from 'moment';

/* tslint:disable:no-function-expression */
($.fn.dataTable.render as any).moment = function (from: string, to: string, locale: string): (d: any, type: string, row: any) => string {
/* tslint:enable */
  // Argument shifting
  if (arguments.length === 1) {
    locale = 'en';
    to = from;
    from = 'YYYY-MM-DD';
  } else if (arguments.length === 2) {
    locale = 'en';
  }

  return (d: any, type: string, row: any): string => {
    let m: moment.Moment = moment(d, from, locale, true);

    // Order and type get a number value from Moment, everything else
    // sees the rendered value
    return m.format(type === 'sort' || type === 'type' ? 'x' : to);
  };
};

Beginnen Sie, die Verweise in jQuery und Moment.js zu laden, um TypeScript mitzuteilen, worauf die entsprechenden Variablen verweisen. Als Nächstes definieren Sie die Plug-In-Funktion. In der Regel wird in TypeScript die Pfeilnotation für Funktionen (=>) verwendet. In diesem Fall müssen Sie jedoch die reguläre Funktionsdefinition verwenden, da Sie Zugriff auf die arguments-Eigenschaft benötigen. Um zu verhindern, dass eine Warnung angezeigt wird, weil die Pfeilnotation nicht verwendet wird, können Sie die Regel no-function-expression um die Funktionsdefinition explizit deaktivieren.
Führen Sie in der Befehlszeile Folgendes aus, um zu überprüfen, dass alles wie erwartet funktioniert:
```
gulp serve --nobrowser
```
Navigieren Sie zu der gehosteten Workbench, und fügen Sie das Webpart zum Zeichenbereich hinzu. Obwohl sich visuell nichts geändert hat, verwendet die neue Codebasis TypeScript und seine Typdefinitionen, um Sie bei der Verwaltung der Lösung zu unterstützen.

Freigeben über