Use Typescript with Google Apps Script

Question

I'd like to use Typescript for my Google Apps Script (GAS) projects, but I can't find a way to compile my code into something that GAS accepts.

GAS doesn't support export, and Typescript seems to dislike accessing variables via the global scope (it wants imports/require, and thus exports).

I'm looking for any of the following solutions which I believe would make things work for me:

1) Babel plugin or the like that can remove all the Import and Export statements along with their attributed names (requires that I don't use the same method names, which I don't.

So:

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

Becomes:

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

2) Change typescript so that it can see the global scope

3) Babel plugin or the like that combines all the .ts files into one .js file and transforms the import/export statements by treating each file like an Object/function.

Answer 1

Background

Things have changed since you wrote this question and there is a better support for TypeScript for AppsScript development nowadays. Like Aliabbas Merchant said, the best way to compile TS to GAS is using clasp, which is a CLI tool for developing AppsScript apps. Clasp uses ts2gas library under the hood to convert TS to GAS, so there is no more need for Webpack or any other bundler just for converting the code into AppsScript.

What Aliabbas Merchant didn't mention is that ts2gas doesn't (yet!) support export syntax, which causes linter errors when developing, and won't be accepted nicely by the IDE (even if disabling the linter, the IDE will not recognize the imported vars and won't consider them as a reference to the exports...)

The Problem

The problem starts from the fact that AppsScript doesn't use modules system and every top-level var that is defined is also accessible from other files (in contrast to TS that "wrapps" files as modules). The problem with the current version of ts2gas is that it transpiles the following statement:

export var x = 5;

into:

exports.x = 5

So, after clasp converts .ts to .gs, when another file of .gs tries to access the exported var, it doesn't find it. Actually, this var isn't stored as a global var like expected, but inside the exports object (which is itself a global var). If we could "cheat" the compiler somehow, so it both keeps the var in the global env, even though it is also exported (so we can work with TS with no errors), we would win.

Solutions

So we're looking for a workaround. You can find some in clasp's using TS docs (https://github.com/google/clasp/blob/master/docs/typescript.md), but there is another trick that I've found the most simple:

Defining the var locally (without exporting it), and later on exporting an object with all the vars (which could be also functions, of course) we want to export. TS will behave as exporting the vars regularly (it's a syntactic sugar for exporting vars), but the compiler will keep the vars both global and inside an exports object.

Example

const a = 5;

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

export {
   a,
   b
}

This way, the vars are truly exported and can be used in TS as usual, but would also stay at the global env after compiling to GAS files (the compiler would actually add them to the export object, but we shouldn't care about it).

Answer 2

Now it's possible to use Typescript to develop Google Apps Script projects but this could not be done directly on the Apps Script Editor.

According to Develop Apps Script using TypeScript the easier way is by using clasp.

Related

• Enabling autocomplete for Google Apps Script in locally-installed IDE