Partager via

Conversion d’un projet de complément Office dans Visual Studio au format TypeScript

Vous pouvez utiliser le modèle de complément Office dans Visual Studio pour créer un complément qui utilise JavaScript, puis convertir le projet de complément au format TypeScript. Cet article décrit ce processus de conversion pour un complément Excel. Vous pouvez utiliser le même processus pour convertir les autres types de projet de complément Office de JavaScript au format TypeScript dans Visual Studio.

Configuration requise

Création du projet de complément

Remarque

Ignorez cette section si vous avez déjà un projet existant.

  1. Dans Visual Studio, choisissez Créer un nouveau projet. Si l’environnement de développement Visual Studio est déjà ouvert, vous pouvez créer un projet en choisissant Fichier>Nouveau>projet dans la barre de menus.

  2. À l’aide de la zone de recherche, entrez complément. Choisissez Complément web Excel, puis sélectionnez Suivant.

  3. Nommez votre projet et sélectionnez Créer.

  4. Dans la fenêtre de dialogue Créer un complément Office, sélectionnez Ajouter de nouvelles fonctionnalités à Excel, puis sélectionnez Terminer pour créer le projet.

  5. Visual Studio crée une solution et ses deux projets apparaissent dans l’explorateur de solutions. Le fichier Home.html s’ouvre dans Visual Studio.

Convertir le projet de complément au format TypeScript

Ajouter un package NuGet

  1. Ouvrez le gestionnaire de package Nuget en choisissant Outils> Gestionnaire >de package NuGetGérer les packages Nuget pour la solution
  2. Sélectionnez l’onglet Parcourir . Recherchez et sélectionnez Microsoft.TypeScript.MSBuild. Installez ce package sur le projet web ASP.NET ou mettez-le à jour s’il est déjà installé. Le ASP.NET projet web a le nom de votre projet avec le texte Web ajouté à la fin. Cela garantit que le projet sera transpilé en JavaScript lors de l’exécution de la build.

Remarque

Dans votre projet TypeScript, vous pouvez avoir un mélange de fichiers TypeScript et JavaScript, qui seront compilés. En effet, TypeScript est un sur-ensemble typé de code JavaScript compilé en code JavaScript.

Créer un fichier de configuration TypeScript

  1. Dans Explorateur de solutions, cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) sur le projet web ASP.NET, puis choisissez Ajouter un>nouvel élément. Le ASP.NET projet web a le nom de votre projet avec le texte Web ajouté à la fin.

  2. Dans la boîte de dialogue Ajouter un nouvel élément , recherchez et sélectionnez Fichier de configuration JSON TypeScript. Sélectionnez Ajouter pour créer un fichier tsconfig.json .

  3. Mettez à jour le fichier tsconfig.json pour qu’il comporte également une include section, comme indiqué dans le code JSON suivant.

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

  4. Enregistrez le fichier. Pour plus d’informations sur les paramètres tsconfig.json , consultez Qu’est-ce qu’un tsconfig.json ?

Créer un fichier de configuration npm

  1. Dans Explorateur de solutions, cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) sur le projet web ASP.NET, puis choisissez Ajouter un>nouvel élément. Le ASP.NET projet web a le nom de votre projet avec le texte Web ajouté à la fin.

  2. Dans la boîte de dialogue Ajouter un nouvel élément , recherchez fichier de configuration npm. Sélectionnez Ajouter pour créer un fichier package.json .

  3. Mettez à jour le fichier package.json pour que le @types/jquery package figure dans la devDependencies section , comme illustré dans le code JSON suivant.

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

  4. Enregistrez le fichier.

  5. Ouvrez les propriétés du projet npm en accédant à Options d’outils>, puis à Projets et solutions>Web Package Management>Package Restore. Définissez Restaurer à l’ouverture du projet et Restaurer lors de l’enregistrement sur « True ». Sélectionnez OK pour enregistrer les paramètres.

Mettre à jour les fichiers JavaScript

Remplacez vos fichiers JavaScript (.js) par fichiers TypeScript (.ts). Ensuite, apportez les modifications nécessaires pour qu’ils soient compilés. Cette section décrit les fichiers par défaut dans un nouveau projet.

  1. Recherchez le fichier Home.js et renommez-le Home.ts.

  2. Recherchez le fichier /Functions/FunctionFile.js et renommez-le FunctionFile.ts.

  3. Recherchez le fichier /Scripts/MessageBanner.js et renommez-le MessageBanner.ts.

  4. Dans ./Scripts/MessageBanner.ts, recherchez la ligne _onResize(null); et remplacez-la par ce qui suit :

    _onResize();

Les fichiers JavaScript générés par Visual Studio ne contiennent aucune syntaxe TypeScript. Vous devez envisager de les mettre à jour. Par exemple, le code suivant montre comment mettre à jour les paramètres pour showNotification inclure les types de chaînes.

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

Exécuter le projet de complément converti

  1. Dans Visual Studio, appuyez sur F5 ou cliquez sur le bouton Démarrer pour lancer Excel avec le bouton Afficher le complément volet Tâches affiché dans le ruban. Le complément est hébergé localement sur IIS.

  2. Dans Excel, choisissez l’onglet Accueil , puis le bouton Afficher le volet Des tâches sur le ruban pour ouvrir le volet Office du complément.

  3. Dans la feuille de calcul, sélectionnez les neuf cellules qui contiennent des nombres.

  4. Appuyez sur le bouton Mettre en surbrillance dans le volet Office pour mettre en surbrillance la cellule de la plage sélectionnée contenant la valeur la plus élevée.

Voir aussi