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

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

Что вы будете делать

  • Добавьте пакет, Microsoft.TypeScript.MSBuild чтобы файлы TypeScript транспилировать во время сборки.
  • Добавление tsconfig.json параметров и package.json для typeScript и определений типов.
  • Переименуйте файлы JavaScript из .js в .ts и обновите код, который требует изменений TypeScript.
  • Запустите преобразованную надстройку в Excel.

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

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

Примечание.

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

  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, выбрав Параметры инструментов>, а затем — Проекты и решения>Восстановление пакетовуправления веб-пакетами>. Задайте для параметра 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. В области задач выберите Выделить , чтобы выделить ячейку в выбранном диапазоне, содержащую наибольшее значение.

См. также

  • Last updated on