Catch up on highlights from Firebase at Google I/O 2023. Learn more

Используйте TypeScript для облачных функций

Для разработчиков, предпочитающих писать функции на TypeScript, Cloud Functions предлагает два типа поддержки:

  • Создание и настройка проектов TypeScript для автоматической транспиляции при инициализации ( firebase init functions ).
  • Транспилируйте существующий исходный код TypeScript в JavaScript во время развертывания с помощью хука перед развертыванием .

Следуя инструкциям в этом руководстве, вы можете перенести существующий проект JavaScript на TypeScript и продолжить развертывание функций, используя хук перед развертыванием для переноса исходного кода. TypeScript предлагает множество преимуществ по сравнению с обычным JavaScript при написании функций:

  • TypeScript поддерживает новейшие функции JavaScript, такие как async/await, что упрощает управление обещаниями.
  • Линтер облачных функций выявляет распространенные проблемы во время написания кода.
  • Безопасность типов помогает избежать ошибок во время выполнения в развернутых функциях.

Если вы новичок в TypeScript, см. TypeScript за 5 минут .

Инициализация нового проекта Cloud Functions с помощью TypeScript

Запустите firebase init functions в новом каталоге. Инструмент дает вам возможность создать проект с помощью JavaScript или TypeScript. Выберите TypeScript для вывода следующей структуры проекта:

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- .eslintrc.js # Optional file if you enabled ESLint
      +- tsconfig.dev.json # Optional file that references .eslintrc.js
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts  # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js  # Built/transpiled JavaScript code
          |
          +- index.js.map # Source map for debugging

После завершения инициализации раскомментируйте образец в index.ts и запустите npm run serve , чтобы увидеть функцию «Hello World» в действии.

Использование существующего проекта TypeScript

Если у вас есть существующий проект TypeScript, вы можете добавить обработчик перед развертыванием, чтобы убедиться, что ваш проект переносится каждый раз, когда вы развертываете свой код в Cloud Functions для Firebase. Вам понадобится правильно сформированный файл tsconfig.json и проект Firebase, и вам нужно будет внести следующие изменения в конфигурацию Firebase:

  1. Отредактируйте package.json , чтобы добавить скрипт bash для сборки вашего проекта TypeScript. Например:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Отредактируйте firebase.json , чтобы добавить обработчик перед развертыванием для запуска скрипта сборки. Например:

     {
       "functions": {
         "predeploy": "npm --prefix functions run build",
       }
     }
    

В этой конфигурации команда firebase deploy --only functions создает ваш код TypeScript и развертывает его как функции.

Перенос существующего проекта JavaScript на TypeScript

Если у вас есть проект Cloud Functions, который вы инициализировали и разработали на JavaScript, вы можете перенести его на TypeScript. Перед запуском настоятельно рекомендуется создать контрольную точку git или другую резервную копию.

Чтобы перенести существующий проект JavaScript Cloud Functions:

  1. Создайте контрольную точку git и сохраните копии существующих исходных файлов JavaScript.
  2. В каталоге проекта запустите firebase init functions и выберите TypeScript , когда будет предложено указать язык для написания функций.
  3. При появлении запроса на перезапись существующего файла package.json выберите Нет , если вы не уверены, что не хотите сохранять существующий файл.
  4. Удалите index.ts в каталоге functions/src , заменив его существующим исходным кодом.
  5. В файле tsconfig.json , созданном при инициализации, установите параметры компилятора для разрешения JavaScript: "allowJs": true .
  6. Скопируйте сохраненный файл package.json в каталог functions и отредактируйте его, задав для "main" "lib/index.js" .
  7. Также в package.json добавьте скрипт сборки для TypeScript, как показано ниже:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Добавьте "typescript" в качестве зависимости для разработчиков, запустив npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

  9. Для всех зависимостей запустите npm install --save @types/<dependency> .

  10. Перепишите исходный код из .js в .ts по желанию.

Эмуляция функций TypeScript

Чтобы протестировать функции TypeScript локально, вы можете использовать инструменты эмуляции, описанные в разделе Запуск функций локально . Перед использованием этих инструментов важно скомпилировать ваш код, поэтому обязательно запустите npm run build внутри вашего каталога функций перед запуском firebase emulators:start или firebase functions:shell . В качестве альтернативы запустите npm run serve или npm run shell в качестве ярлыка; эти команды запускают сборку и обслуживают/запускают оболочку функций.

Журналы функций для проектов TypeScript

Во время firebase deploy index.ts вашего проекта переносится в index.js , что означает, что журнал Cloud Functions будет выводить номера строк из файла index.js , а не кода, который вы написали. Чтобы вам было проще найти соответствующие пути и номера строк в index.ts , firebase deploy создает functions/lib/index.js.map . Вы можете использовать эту исходную карту в предпочитаемой вами среде IDE или через модуль узла .