Поделиться через

Преобразование проекта надстройки Office в Visual Studio в TypeScript

Вы можете использовать шаблон надстройки Office в Visual Studio, чтобы создать надстройку с использованием JavaScript, а затем преобразовать этот проект в TypeScript. В этой статье описан процесс преобразования для надстройки Excel. Таким же образом в Visual Studio можно преобразовывать и другие проекты надстроек Office из JavaScript в TypeScript.

Предварительные условия

Создание проекта надстройки

Примечание.

Пропустите этот раздел , если у вас уже есть проект.

  1. В Visual Studio выберите пункт Создать проект. Если среда разработки Visual Studio уже открыта, можно создать проект, выбрав Файл>Новый>проект в строке меню.

  2. Используя поле поиска, введите надстройка. Выберите вариант Веб-надстройка Excel и нажмите кнопку Далее.

  3. Присвойте проекту имя и нажмите кнопку Создать.

  4. В диалоговом окне Создание надстройки Office выберите Добавить новые функции в Excel, а затем нажмите кнопку Готово, чтобы создать проект.

  5. Visual Studio создаст решение, и в обозревателе решений появятся два соответствующих проекта. В Visual Studio откроется файл Home.html.

Преобразование проекта надстройки в TypeScript

Добавление пакета Nuget

  1. Откройте диспетчер пакетов Nuget, выбрав Инструменты> Диспетчер >пакетов NugetУправление пакетами Nuget для решения
  2. Перейдите на вкладку Обзор . Найдите и выберите Microsoft.TypeScript.MSBuild. Установите этот пакет в веб-проекте ASP.NET или обновите его, если он уже установлен. Веб-проект ASP.NET имеет имя проекта с текстом Web , добавленным в конец. Это гарантирует, что при выполнении сборки проект будет транспилироваться в JavaScript.

Примечание.

В проекте TypeScript можно использовать сочетание файлов TypeScript и JavaScript, и проект будет компилироваться. Это связано с тем, что TypeScript является типизированным надмножеством JavaScript, который компилирует JavaScript.

Создание файла конфигурации TypeScript

  1. В Обозреватель решений щелкните правой кнопкой мыши (или выберите и удерживайте) веб-проект ASP.NET и выберите добавить>новый элемент. Веб-проект ASP.NET имеет имя проекта с текстом Web , добавленным в конец.

  2. В диалоговом окне Добавление нового элемента найдите и выберите Файл конфигурации JSON TypeScript. Нажмите кнопку Добавить , чтобы создать файл tsconfig.json .

  3. Обновите файл tsconfig.json , чтобы у него также был include раздел, как показано в следующем формате JSON.

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

  4. Сохраните файл. Дополнительные сведения о параметрах tsconfig.json см. в статье Что такое tsconfig.json?

Создание файла конфигурации npm

  1. В Обозреватель решений щелкните правой кнопкой мыши (или выберите и удерживайте) веб-проект ASP.NET и выберите добавить>новый элемент. Веб-проект ASP.NET имеет имя проекта с текстом Web , добавленным в конец.

  2. В диалоговом окне Добавление нового элемента найдите файл конфигурации npm. Выберите Добавить , чтобы создать файл package.json .

  3. Обновите файл package.json , чтобы @types/jquery пакет был в devDependencies разделе, как показано в следующем коде JSON.

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

  4. Сохраните файл.

  5. Откройте свойства проекта npm, выбрав Параметры инструментов>, а затем — Project and Solutions>Web Package Management>Package Restore. Задайте для параметра Restore On Project Open и Restore On Save значение True. Нажмите кнопку ОК , чтобы сохранить параметры.

Обновление файлов JavaScript

Измените файлы JavaScript (.js) на Файлы TypeScript (.ts). Затем внесите необходимые изменения для компиляции. В этом разделе рассматриваются файлы по умолчанию в новом проекте.

  1. Найдите файл Home.js и переименуйте его в Home.ts.

  2. Найдите файл ./Functions/FunctionFile.js и переименуйте его в FunctionFile.ts.

  3. Найдите файл ./Scripts/MessageBanner.js и переименуйте его в MessageBanner.ts.

  4. В ./Scripts/MessageBanner.ts найдите строку _onResize(null); и замените ее указанным ниже кодом:

    _onResize();

Файлы JavaScript, созданные Visual Studio, не содержат синтаксиса TypeScript. Следует рассмотреть возможность их обновления. Например, в следующем коде показано, как обновить параметры, чтобы showNotification включить строковые типы.

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

Запуск преобразованного проекта надстройки

  1. В Visual Studio нажмите клавишу F5 или нажмите кнопку Пуск , чтобы запустить Excel с кнопкой Показать область задач на ленте. Надстройка будет размещена на локальном сервере IIS.

  2. В Excel перейдите на вкладку Главная , а затем нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.

  3. Выберите на листе девять ячеек, содержащих числа.

  4. Нажмите кнопку Highlight (Выделить) в области задач, чтобы выделить в выбранном диапазоне ячейку, содержащую самое большое значение.

См. также