GAS Development by Typescript

GAS Development by Typescript

Introduction

GAS (Google App Script) can be developed only in Javascript before, and there is no official local PC development tool provided by Google, so it was standard to edit code on the cloud, the developers can not use the management program software such as Git.
However, in 2018, Google provided the Clasp tool, which made it possible to clone javascript codes locally or to push them to the cloud.
This makes it possible to get GAS programs from the Google Cloud, manage them on a specific Git server, and finally release them to Google App.
Furthermore, it can be said it is easy for multiple developers to join and to develop the same projects at the same time.

Additionally, it is possible to edit Typescript programs, push them, and run them on the Google cloud.
If developers are developing only with Javascript, they feel that they are developing with old technology. It might cause decreasing their motivation. Developing by Typescript is good for keeping good motivation compared with only javascript coding and practice for the developers who want to try it.

This time, I would like to describe the process of building a local development environment and uploading the programs to GAS, which will be useful for starting GAS development.

Caution: Skip the describe of installing node.js, npm and etc.

Development Environment

  • iOS Version 10.15.1
  • VSCode Version: 1.41.1
  • Node.js Version: 11.9.0
  • npm Version: 6.13.4
  • TSlint Version: 5.20.1

Install Clasp

Open the local console window and excecute the next command.
npm i @google/clasp -g

Create Git repository and clone

Create a repository on the Git server that you get used of.
Create a project folder and execute the Git clone in the folder.
* If you do not want to use Git, you can skip this step.

Create GAS development environment and project solution

  1. Trun on the function of the “configure Google Apps Script API”.
    It is possible to confirm and edit this setting on this page.
    https://script.google.com/home/usersettings
  2. Login GAS throw the Clasp.
    Execute this command by your local terminal windows.
    clasp login
    Then open the Google login page on your web browser.
    Input the login information and implement the login.
    (It is okay to close the page on the web browser after login)
  3. Create a GAS project. Create the project name as “TS-sample”. Execute the following command.
    clasp create TS-sample
  4. After showing the message. Choose the “standalone”. Because this is the introduction program.(Creat program simply)
  5. Show the following message if the execution was succeeded.
    “Created new standalone script: https://script.google.com/d/xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV/edit”
    This is the “scriptId” that is including the following URL.
    “xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV”
  6. Execute the following command to create “package.json” file.
    npm init -y
  7. Execute the following command to install tslint of calsp.
    npm install @google/clasp tslint -D
  8. Execute the following command to install GAS library definition.
    npm install @types/google-apps-script -S
  9. Execute the following command to create tslint definition file.
    tslint --init
  10. Execute the following command to install prettier.
    npm install prettier tslint-config-prettier tslint-plugin-prettier -D
  11. Edit the “tslint.json” file to define tslint and prettier. Open the “tslint.json” file and edit as follows.

    {
    "defaultSeverity": "error",
    "extends": [
    "tslint:recommended",
    "tslint-config-prettier"
    ],
    "jsRules": {},
    "rules": {
    "prettier": true,
    "interface-name": [false]
    },
    "rulesDirectory": ["tslint-plugin-prettier"]
    }

Setting Visual Studio Code code formatter

  1. Open VSCode and open ”Setting” screen.
  2. Click the file icon. The setting file that is json format is shown.
  3. Set it only implementing formatter when editing the typescript file. The setting file is the json format. Save it after editing it following next json code.

    {
    "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
    }
    }
    }

Programming

  1. All set the development environment、create the programs.
    First, create “Code.ts” file.
    ※If “Code.js” file have been existing, change the file name to “Code.ts”.
  2. Initialize the string using “const”. And then output the log comment.

    function myFunction() {
    const text = "Hello World";
    Logger.log(text);
    }

Push to Google Cloud

In order to operation check, push the programs to the Google App.
Execute following command.
clasp push

Then the program will be automatically converted to GAS javascript and it will be as follows.

We can get the same result that looks like when it was developed using only GAS after executed.

Push to Git

It is possible to manage the programs and to do the joint development if you commit and push these files.

  • Typescript files for GAS app
  • appsscript.json for GAS configuration
  • package.json for npm configuration
  • tslint.json for coding rules

To close

Providing Clasp and supporting Typescript lead developing GAS app easier than before.
It will vanish the feeling looks like developing apps by the macro of Microsoft Excel from the developer’s images.
GAS can control Gmail, Google sheet, G-drive, and other Google apps easily. You have an opportunity to be automation your routine tasks if you often use these services.
I’m happy if you have a challenge once.

References

Google Clasp Guide
GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)