Migrer jQuery et la solution DataTables créée à l’aide du composant WebPart Éditeur de script vers SharePoint Framework
L’un des plug-ins jQuery fréquemment utilisés est DataTables. Avec DataTables, vous pouvez facilement créer des aperçus de données puissants provenant de SharePoint et d’API externes.
Liste des demandes IT créées à l’aide du composant WebPart Éditeur de Script
Pour illustrer le processus de migration d’une personnalisation SharePoint à l’aide de DataTables vers SharePoint Framework, utilisez la solution suivante qui affiche une vue d’ensemble des demandes de support informatique récupérées à partir d’une liste SharePoint.

La solution est créée à l’aide du composant WebPart Éditeur de script SharePoint standard. Voici le code utilisé par la personnalisation.
<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>
Tout d’abord, la personnalisation charge les bibliothèques qu’elle utilise : jQuery, DataTables et Moment.js.
Ensuite, elle spécifie la structure de la table utilisée pour présenter les donnée.
Après avoir créé la table, elle inclut Moment.js dans un plug-in DataTables afin que les dates affichées dans la table puissent être mises en forme.
Enfin, la personnalisation utilise DataTables pour charger et présenter la liste des demandes de support informatique. Les données sont chargées à l’aide d’AJAX à partir d’une liste SharePoint.
Grâce à DataTables, les utilisateurs finals disposent d’une solution puissante dans laquelle ils peuvent facilement filtrer, trier et parcourir les résultats sans aucun effort de développement supplémentaire.

Migrer la solution d’aperçu de demandes informatiques du Composant WebPart Éditeur de Script vers SharePoint Framework
La transformation de cette personnalisation en SharePoint Framework offre un certain nombre d’avantages, tels que la configuration plus conviviale et la gestion centralisée de la solution. Vous trouverez ci-dessous une description détaillée de la façon dont vous migreriez la solution vers SharePoint Framework. Tout d’abord, vous allez migrer la solution vers SharePoint Framework avec le moins de modifications possible du code d’origine. Plus tard, vous allez transformer le code de la solution en TypeScript pour tirer parti de ses fonctionnalités de sécurité de type au moment du développement.
Notes
Le code source du projet aux différentes étapes de migration est disponible dans le didacticiel relatif à la migration de jQuery et de la solution DataTables créée à l’aide du composant WebPart Éditeur de script vers SharePoint Framework.
Création d’un projet SharePoint Framework
Commencez par créer un dossier pour votre projet :
md datatables-itrequestsAccédez au dossier du projet :
cd datatables-itrequestsDans le dossier du projet, exécutez le générateur Yeoman pour SharePoint Framework afin de structurer un projet SharePoint Framework :
yo @microsoft/sharepointLorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites qui ne sont pas mentionnées ci-dessous) :
- Quel est le nom de votre solution ? : DataTables-itrequests
- Quel type de composant côté client voulez-vous créer ? : composant WebPart
- Quel est le nom de votre composant WebPart ? : demandes informatiques
- Quelle est la description de votre composant WebPart ? : affiche une vue d’ensemble des demandes de support informatique
- Quelle infrastructure voulez-vous utiliser ? : Aucune infrastructure JavaScript
Ouvrez votre dossier de projet dans votre éditeur de code. Dans ce didacticiel, vous allez utiliser Visual Studio Code.
Charger les bibliothèques JavaScript
Comme pour la solution d’origine créée à l’aide du composant WebPart Éditeur de script, vous devez d’abord charger les bibliothèques JavaScript requises par la solution. Dans SharePoint Framework, cela nécessite généralement deux étapes : spécifier l’URL à partir de laquelle la bibliothèque doit être chargée et faire référence à la bibliothèque dans le code.
Spécifiez les URL à partir desquelles les bibliothèques doivent être chargées. Dans l’éditeur de code, ouvrez le fichier ./config/config.json et modifiez la section
externalscomme suit :{ // .. "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" }, // .. }Cela a deux objectifs :
- Lorsque la chaîne de l'outil de la build SharePoint Framework crée l’offre pour le composant WebPart, elle ignore les instructions
importourequirepour ces trois packages et n’inclut pas sa source dans le bundle. En l’absence de ceux-ci, WebPack (l’outil utilisé pour créer le bundle) importerait ces bibliothèques JavaScript dans le groupe de composants SPFx obtenu. - La version de la chaîne de l'outil de la build de SharePoint Framework ajoute les trois packages comme dépendances dans le manifeste du composant. Cela indique au chargeur de module de SharePoint Framework de s’assurer que ces bibliothèques ont été chargées sur la page avant de charger l’offre du composant.
Notes
Pour plus d’informations sur le référencement de bibliothèques externes dans les projets SharePoint Framework, consultez Ajouter une bibliothèque externe à votre composant WebPart côté client SharePoint.
- Lorsque la chaîne de l'outil de la build SharePoint Framework crée l’offre pour le composant WebPart, elle ignore les instructions
Ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et, après la dernière instruction
import, ajoutez :import 'jquery'; import 'datatables.net'; import 'moment';
Définir la table de données
Comme dans la solution d’origine, l’étape suivante consiste à définir la structure de la table utilisée pour afficher les données.
Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode render() comme suit :
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>`;
}
// ...
}
Inscrire le plug-in Moment.js pour DataTables
L’étape suivante consiste à définir le plug-in Moment.js pour DataTables afin que les dates de la table puissent être mises en forme.
Dans le dossier ./src/webparts/itRequests, créez un fichier nommé moment-plugin.js et collez le code ci-dessous :
// 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); }; }; }) );Pour que le composant WebPart charge le plug-in, il doit faire référence au fichier moment-plugin.js nouvellement créé. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et, après la dernière instruction
import, ajoutez :import './moment-plugin';
Lancer DataTables et charger les données
La dernière étape consiste à inclure le code qui lance la table de données et charge les données à partir de SharePoint.
Dans le dossier ./src/webparts/itRequests, créez un fichier nommé script.js et collez le code ci-dessous :
$(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') }] }); });
Notes
Veillez à utiliser le nom interne (ou nom statique) des colonnes dans les paramètres $select et $expend.
Pour faire référence à ce fichier dans le composant WebPart, dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et ajoutez
require('./script');à la fin de la méthoderender(). La méthoderender()doit se présenter comme suit :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'); } // ... }Vérifiez que le composant WebPart fonctionne comme prévu dans la ligne de commande en exécutant ce qui suit :
gulp serve --nobrowser
Étant donné que le composant WebPart charge ses données à partir de SharePoint, vous devez tester le composant WebPart à l’aide de SharePoint Framework Workbench hébergé. Accédez à https://{nom-client-nom}. SharePoint. com/_layouts/Workbench.aspx et ajoutez le composant WebPart à la zone de dessin. Vous devez maintenant voir les demandes informatiques affichées à l’aide du plug-in jQuery DataTables.

Ajouter la prise en charge de la configuration du composant WebPart via les propriétés du composant WebPart
Dans les étapes précédentes, vous avez migré les solutions de demandes informatiques du composant WebPart Éditeur de script vers SharePoint Framework. Bien que la solution fonctionne déjà comme prévu, elle n’utilise aucun des avantages de SharePoint Framework. Le nom de la liste à partir de laquelle les demandes informatiques sont chargées est inclus dans le code et le code lui-même est du JavaScript simple, qui est plus difficile à refactoriser que TypeScript.
Les étapes suivantes montrent comment étendre la solution existante pour permettre aux utilisateurs de spécifier le nom de la liste à partir de laquelle charger les données. Vous allez ensuite transformer le code en TypeScript pour utiliser ses fonctionnalités de sécurité des types.
Définir la propriété du composant WebPart pour stocker le nom de la liste
Définissez une propriété de composant WebPart pour stocker le nom de la liste à partir de laquelle les demandes informatiques doivent être chargées. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.manifest.json, puis renommez la propriété par défaut
descriptionàlistNameet effacez sa valeur.
Mettez à jour l’interface des propriétés du composant WebPart pour refléter les changements dans le manifeste. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/IItRequestsWebPartProps.ts et modifiez son contenu comme suit :
export interface IItRequestsWebPartProps { listName: string; }Mettez à jour les étiquettes d’affichage de la propriété
listName. Ouvrez le fichier ./src/webparts/itRequests/loc/mystrings.d.ts et modifiez son contenu comme suit :declare interface IItRequestsStrings { PropertyPaneDescription: string; BasicGroupName: string; ListNameFieldLabel: string; } declare module 'itRequestsStrings' { const strings: IItRequestsStrings; export = strings; }Ouvrez le fichier ./src/webparts/itRequests/loc/en-us.js et modifiez son contenu comme suit :
define([], function() { return { "PropertyPaneDescription": "IT Requests settings", "BasicGroupName": "Data", "ListNameFieldLabel": "List name" } });Mettez à jour le composant WebPart pour utiliser la propriété nouvellement définie. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode
getPropertyPaneConfiguration()comme suit :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; } }
Pour éviter que le composant WebPart soit rechargé lorsque les utilisateurs tapent le nom de la liste, vous avez également configuré le composant WebPart pour qu’il utilise le volet de propriétés non réactif en ajoutant la méthode disableReactivePropertyChanges() et en définissant sa valeur renvoyée sur true.
Utiliser le nom configuré de la liste à partir de laquelle charger les données
Initialement, le nom de la liste à partir de laquelle les données doivent être chargées était incorporé dans la requête REST. Maintenant que les utilisateurs peuvent configurer ce nom, la valeur configurée doit être injectée dans la requête REST avant de charger les données. Le moyen le plus simple de procéder consiste à déplacer le contenu du fichier script.js vers le fichier du composant WebPart principal.
Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode
render()comme suit :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') }] }); }); } // ... }Au lieu de référencer le code à partir du fichier script.js, tout son contenu fait partie de la méthode
renderdu composant WebPart. Dans la requête REST, vous pouvez désormais remplacer le nom fixe de la liste par la valeur de la propriétélistNamequi contient le nom de la liste tel que configuré par l’utilisateur. Avant d’utiliser la valeur, elle est placée dans une séquence d’échappement à l’aide de la fonctionescapeLodash pour désactiver l’injection de scripts.À ce stade, le bloc de code est toujours écrit à l’aide d’un code JavaScript simple. Pour éviter les problèmes de génération avec la variable jQuery
$, vous deviez la définir comme typeanyavant la définition de la classe. Plus tard, lors de la transformation du code en TypeScript, vous la remplacerez par une définition de type appropriée.Comme vous venez de déplacer le contenu du fichier script.js dans le fichier du composant WebPart principal, script.js n’est plus nécessaire et vous pouvez le supprimer du projet.
Pour vérifier que le composant WebPart fonctionne comme prévu, exécutez la ligne de commande suivante :
gulp serve --nobrowserAccédez au Workbench hébergé et ajoutez le composant WebPart au canevas. Ouvrez le volet de propriétés du composant WebPart, spécifiez le nom de la liste des demandes informatiques et cliquez sur le bouton Appliquer pour confirmer les modifications.
Vous devez maintenant voir les demandes informatiques affichées dans le composant WebPart.

Transformer le code JavaScript simple en TypeScript
L’utilisation de TypeScript à la place du code JavaScript simple présente de nombreux avantages. Non seulement parce que TypeScript est plus facile à gérer et à refactoriser, mais aussi car il vous permet de détecter des erreurs plus rapidement. Les étapes suivantes décrivent comment transformer le code JavaScript d’origine en TypeScript.
Ajouter des définitions de type pour les bibliothèques utilisées
Pour fonctionner correctement, TypeScript requiert des définitions de type pour les différentes bibliothèques utilisées dans le projet. Les définitions de type sont souvent distribuées sous forme de packages npm dans l’espace de noms @types.
Installez les définitions de type pour jQuery et DataTables en exécutant ce qui suit dans la ligne de commande :
npm install @types/jquery@1.10.34 @types/datatables.net@1.10.15 --save-dev --save-exactConseil
Dans cet exemple, nous spécifions la version exacte du package NPM que nous voulons installer. Cela permet de s’assurer que NPM installe un package de déclaration de type qui correspond à la version jQuery et à la bibliothèque de tableaux de données que nous utilisons dans le cadre de notre projet.
L’argument
--save-devindique à NPM d’enregistrer les références à ces deux packages dans la collectiondevDependenciesdans le fichier package.json. Les déclarations de type « TypeScript » ne sont nécessaires qu’au développement, c’est pourquoi nous ne les voulons pas dans la collectiondependencies.L’argument
--save-exactindique à NPM d’ajouter des références à la version spécifique dans le fichier package.json et de ne pas ajouter la notation pour activer les mises à niveau automatiques vers une version plus récente.Les définitions de types pour Moment.js sont distribuées avec le package Moment.js. Même si vous chargez Moment.js à partir d’une URL, pour pouvoir utiliser ses typages, vous devez installer le package Moment.js dans le projet.
Installez le package Moment.js en exécutant ce qui suit dans la ligne de commande :
npm install moment@2.27.0 --save-exact
Mettre à jour les références de package
Pour utiliser des types provenant des définitions de type installées, vous devez modifier la façon dont vous référencez les bibliothèques.
Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez l’instruction
import 'jquery';comme suit :import * as $ from 'jquery';Étant donné que vous avez défini
$comme jQuery, vous pouvez maintenant supprimer la définition locale du$que vous avez ajoutée précédemment :var $: any = (window as any).$;
Mettre à jour les fichiers de composants WebPart principaux en TypeScript
Maintenant que vous avez des définitions de type pour toutes les bibliothèques installées dans le projet, vous pouvez commencer à transformer le code JavaScript simple en TypeScript.
Définissez une interface pour les informations de demande informatique que vous récupérez dans la liste SharePoint. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et juste au-dessus de la classe de composant WebPart, ajoutez l’extrait de code suivant :
interface IRequestItem { ID: number; BusinessUnit: string; Category: string; Status: string; DueDate: string; AssignedTo: { Title: string; }; }Ensuite, dans la classe de composant WebPart, modifiez la méthode
render()comme suit :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') }] }); } // ... }Regardez comment la demande AJAX, pour récupérer les données de la liste SharePoint, est désormais tapée et vous permet de vérifier que vous faites référence aux propriétés correctes lorsque vous les faites passer à DataTables dans un tableau. La structure de données utilisée par DataTables pour représenter une ligne dans la table est un tableau de types mixtes. Par souci de simplicité, elle a été définie comme
any[]. L’utilisation du typeanydans ce contexte n’est pas mauvaise en soi, car les données renvoyées à l’intérieur de la propriétédataSrcsont utilisées en interne par DataTables.Lorsque vous avez mis à jour la méthode
render(), vous avez également ajouté deux autres modifications. Tout d’abord, vous avez supprimé l’attributidde la table. Cela vous permet de placer plusieurs instances du même composant WebPart sur la page. Vous avez également supprimé la référence à la fonction$(document).ready()qui n’est pas nécessaire, car le DOM de l’élément où la table de données est affichée est défini avant le code d’initiation de DataTables
Mettre à jour le plug-in DataTables Moment.js en TypeScript
La dernière partie de la solution qui doit être transformée en TypeScript est le plug-in DataTables Moment.js.
Renommez le fichier ./src/webparts/itRequests/moment-plugin.js en ./src/webparts/itRequests/moment-plugin.ts afin qu’il soit traité par le compilateur TypeScript.
Ouvrez le fichier moment-plugin.ts dans l’éditeur de code et remplacez son contenu par :
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); }; };Vous commencez par charger les références à jQuery et Moment.js pour indiquer à TypeScript à quoi font référence les variables correspondantes. Ensuite, vous définissez la fonction du plug-in. Généralement, dans TypeScript, vous utilisez la notation fléchée pour les fonctions (
=>). Dans ce cas toutefois, étant donné que vous avez besoin de l’accès à la propriétéarguments, vous devez utiliser la définition de fonction standard. Pour empêcher que tslint envoie un avertissement signalant que vous n’avez pas utilisé la notation fléchée, vous pouvez désactiver explicitement la règleno-function-expressionautour de la définition de fonction.Pour vérifier que tout fonctionne comme prévu, exécutez ce qui suit dans la ligne de commande :
gulp serve --nobrowserAccédez au Workbench hébergé et ajoutez le composant WebPart au canevas. Bien que rien n’ait changé visuellement, la nouvelle base de code utilise TypeScript et ses définitions de type pour vous aider à gérer la solution.