12

我想将 Typescript 用于我的 Google Apps Script (GAS) 项目，但我找不到将我的代码编译成 GAS 接受的东西的方法。

GAS 不支持导出，Typescript 似乎不喜欢通过全局范围访问变量（它需要导入/需要，因此需要导出）。

我正在寻找以下任何一种解决方案，我相信这些解决方案会让事情对我有用：

1) Babel 插件等可以删除所有 Import 和 Export 语句及其属性名称（要求我不使用相同的方法名称，我没有。

所以：

import MyLibrary from './library';
export function greetJohn() { MyLibrary.greet('John'); }
export default { greetJohn }

变成：

function greetJohn() { greet('John'); }

2）更改打字稿，使其可以看到全局范围

3) Babel 插件等，将所有 .ts 文件组合成一个 .js 文件，并通过将每个文件视为对象/函数来转换导入/导出语句。

4

4 回答 4

7

现在可以使用 Typescript 开发 Google Apps 脚本项目，但这不能直接在 Apps 脚本编辑器上完成。

根据使用 TypeScript 开发应用程序脚本，更简单的方法是使用clasp。

有关的

于 2018-08-22T03:01:52.287 回答
7

背景

自从你写了这个问题后，情况发生了变化，现在对 TypeScript 的 AppsScript 开发有更好的支持。正如 Aliabbas Merchant 所说，将 TS 编译为 GAS 的最佳方法是使用clasp，这是一个用于开发 AppsScript 应用程序的 CLI 工具。Clasp 在后台使用ts2gas库将 TS 转换为 GAS，因此不再需要 Webpack 或任何其他捆绑器来将代码转换为 AppsScript。

Aliabbas Merchant 没有提到的是ts2gas不（还！）支持export语法，这会在开发时导致 linter 错误，并且不会被 IDE 很好地接受（即使禁用 linter，IDE 也不会识别导入的变量，并且不会将它们视为对导出的引用...）

问题

问题始于 AppsScript 不使用模块系统，并且定义的每个顶级 var 也可以从其他文件访问（与将文件“包装”为模块的 TS 形成对比）。当前版本的 ts2gas 的问题在于它转译了以下语句：

export var x = 5;

进入：

exports.x = 5

因此，在 clasp 转换.ts为之后.gs，当另一个文件.gs尝试访问导出的 var 时，它找不到它。实际上，这个 var 并没有像预期的那样存储为全局 var，而是在exports对象内部（它本身就是一个全局 var）。如果我们可以以某种方式“欺骗”编译器，那么它既可以将 var 保留在全局环境中，即使它也被导出（因此我们可以使用 TS 而不会出现错误），我们会赢。

解决方案

所以我们正在寻找一种解决方法。您可以使用 TS 文档（https://github.com/google/clasp/blob/master/docs/typescript.md）在 clasp 中找到一些技巧，但我发现还有一个最简单的技巧：

在本地定义 var（不导出它），然后导出一个包含我们想要导出的所有 var（当然也可以是函数）的对象。TS 将表现为定期导出 var（它是导出 var 的语法糖），但编译器会将 var 保持在全局和导出对象内。

例子

const a = 5;

function b() {
   return 'Hello World';
}

export {
   a,
   b
}

这样，vars 被真正导出并可以像往常一样在 TS 中使用，但在编译为 GAS 文件后也会留在全局环境中（编译器实际上会将它们添加到export对象中，但我们不应该关心它） .

于 2020-07-26T11:22:27.640 回答
4

过去几周我一直在研究类似的情况（不使用 TypeScript，但仍然使用 ES6/ES7）。

我发现的一些事情可能对您想要实现的目标有所帮助：

  • GAS webpack 插件允许您使用 webpack 在 GAS 中加载模块，方法是检测您何时分配给全局对象，然后生成 GAS 可以运行的顶级函数。这意味着您的导入和导出都将由 webpack 处理，因此您不必删除它们。
  • 但是，我无法使import * as x from y语法正常工作import { x } from y，并且import x from y在使用 webpack 时工作正常。
  • 您可以使用HTML loader将 HTML 作为字符串包含在包中。

如果您不想使用 webpack，一种解决方案是将所有代码放在一个app.ts文件中，创建一个包含所有函数的对象，将函数设置为顶级，以便 GAS 可以获取它们。您还可以导出容器对象并在测试套件中使用它。当你使用 Babel 编译时，使用babel-plugin-transform-remove-export插件来移除 export 语句。

const app = {
  onInstall: () => { ...
  },
  onOpen: () => { ...
  }
}

const { onOpen, onInstall } = app;

export { app };
于 2018-02-15T09:27:00.337 回答
1

将TypeScript 与 Google App Script一起使用的最佳（也是推荐的）方法是使用clasp。

  1. 安装扣：npm install @google/clasp -g
  2. 登录：clasp login
  3. 创建一个项目：clasp create [scriptTitle]
  4. 可选：将文件中的时区更改为此列表中appsscripts.json最合适的一个。
  5. 安装类型：npm i -S @types/google-apps-script
  6. 创建 tsconfig.json 文件：
    { "compilerOptions": { "lib": [ "esnext" ], "experimentalDecorators": true } }
  7. 在 .ts 文件中编写代码
  8. 使用推送您的代码clasp push
  9. 刷新您的脚本页面并运行您的函数。

注意：您不需要使用importand export。变量可以跨文件访问。

于 2020-03-07T07:40:44.767 回答