Google App Script

Typescript & Google App Script — Let’s cross the Bridge

Wait…. What ?

Did I just read right ? I can code using Typescript inside Google App script and get my work done ?

Yup, you read this right. If you knew Typescript and you are now supposed to work on Google AppScript, you may do that and still solve your problem using Typescript without having any learning curve for Google App script.

Let’s build a simple Typescript and see how that transpiles to Google App Script. I’ll create a simple typescript and import that to Google App script. You may follow along. So, tighten your seat belts and let the magic begin ! 🔮

I. Pre-requisites

• Basic Knowledge of NodeJS
• Basic knowledge of Typescript
• Basic knowledge of Web Development
• Basic knowledge of Google App Script (Optional)

II. Setup

1. Installing Node

Download | Node.js

2. Installing Clasp

Clasp is CLI of Google Apps Script. It lets you to create, edit, and deploy Apps Script projects locally. It allows you to create and publish web apps and add-ons for products like Sheets, Docs, Forms, and Slides from the command line.

1. clasp requires Node.js >= v6.0.0

Please check the npm version you have and ignore below two commands if the version is > 6.0.0

sudo npm install n -g

sudo n latest

2. Run below command to install clasp

npm i @google/clasp -g

3. Login to Clasp

clasp login

This will redirect you to login page for Google account. Here, you may login to clasp using your Google login. Once done, you’ll get below confirmation message -

4. Enable the Apps Script API by visiting → Google App Script User settings

5. Install TypeScript

npm i -S @types/google-apps-script

III. Steps for our sample App Script

1. Create an App script project

mkdir typeApp;
cd typeApp;
clasp create --title "My Typescript App";

You may choose from given options whichever is applicable for you. In this case, we are using webapp.

A new script will be created

The path of the script is provided once it is created (as shown in above screenshot)

P.S. You may clone your existing App script project by -

clasp clone <scriptID>

For more info and hands-on on clasp, please refer below -

https://codelabs.developers.google.com/codelabs/clasp/#0

2. Editing the code (locally)

i. Open the script in cloud — > clasp open

This brings us to the online editor as shown below -

Let’s add following code snippet in the online editor -

The local copy of our code is now out of sync with the online editor. To bring them in sync, execute below -

clasp pull

In case you edited the code locally using your preferred IDE (as shown below)

The change is now reflected locally too when I open it in Visual Studio

Now, if I make any code edits locally

and would like to bring this in sync with online editor, please use below command

clasp push

This is now reflected in the online editor script.google.com.

The change is now reflected in the online editor

As an App Script developer, I always use to wonder what if I wish to edit my codes locally, specially when a team is working on it.

Yey !!! 👏👏👏 Clasp was my answer to this.

P.S. Please avoid concurrently editing code locally and on script.google.com. Recommendation would be to use a version control system, like git.

3. Let’s write our TypeScript

In my Visual Studio, I added Test.ts and edited it to include following code -

4. Creating tsconfig file

5. Push our changes to Online Editor using — clasp push

The changes are reflected in online editor as shown below

Please note that ‘Code.ts’ is now is transpiled here as Google App script.

6. Versioning our script

Let’s create a version of our script: clasp version "First version"

7. Deploying the Script

Using the logged version string we created in place of [version], we can deploy the script:

clasp deploy 1 "First deployment"

This command will look at your manifest file and create a new versioned deployment. Your code is now deployed as an executable.

For more on understanding Manifest files — https://developers.google.com/apps-script/concepts/manifests

Woohoo ! 💃🏼💃🏼💃🏼 We just worked on Typescript locally in our preferred IDE and look what we got — Google App Script out of it !

Hope this read is helpful and makes your life easy on the days when you don’t know Google App script but will have to work in it.

IV. References

Develop Apps Script using TypeScript | Google Developers

Command Line Interface using clasp | Apps Script | Google Developers

clasp - The Apps Script CLI

Deployments | Apps Script | Google Developers

Web App using Google App Script — Material design but no server/server Frameworks