How to type hint Google Types in Google Scripts?

Question

I am trying to typehint a bunch of javascript in Google Script, and I have gotten as far as trying this:

/**
 *  Get (named) range given by name
 *
 *  @param {String} name 
 *  @return {Range}
 *
 */
function getRange(name) {
  return SpreadsheetApp.getActiveSpreadsheet().getRangeByName(name);
}

Which displays well and gives the same typehint as the builtin getRangeByName, however it does not actually work, i.e. the auto-complete script editor does not autocomplete when I type something like getRange("hello").get", like it should. Should I be name spacing the Range or am I doing something else wrong?

Answer 1

Tl;Dr: As of April 3, 2025 it's possible to use the JSDoc tags @param, @type, @typedef and @property to add type hints for function parameters and variables.

Example: Parameters / @param JSDoc tag

/**
 * @param {SpreadsheetApp.Sheet} sheet
 */
function doSomething(sheet){
   s

}

When typing s inside the doSomething function block, the autocomplete will open, showing a wrench tool icon on the left of sheet and (parameter): SpreadsheetApp.Sheet on the right as shown below

Example: Variables / @type JSDoc tag

When typing s after the variable declaration the autocomplete will open, showing a wrench tool icon on the left of sheet and const sheet: SpreadsheetApp.Sheet on the right as shown below

Example: Custom type / @typedef and @property JSDoc tag

/**
 * On edit event object
 * 
 * @typedef {Object} OnEditEvent
 * @property {SpreadsheetApp.Spreadsheet} e.source
 */

/**
 * @param {OnEditEvent} e
 */
function doSomething(e) {

  const sheet = e.

}

When typing e. inside doSomething function code block the autocomplete will open, showing a cube icon on the left of sheet and property source: SpreadsheetApp.Spreads... on the right as shown below

Example Custom Class

/**
 * My Custom Class
 */
class MyClass {
  constructor(){

  }

  myMethod() {

  }
}


function doSomething(){
  const a = new MyClass();
  a.

}

When typing the variable name holding the class instance, followed by a dot, the autocomplete will open, showing a three icon on the left of the class name and (method) followed by the class dot method name on the right as shown below

---

As of October 27th, 2020, the Google Apps Script IDE didn't use local JSDOC to extend the autocomplete feature. Options:

1. Create a Goole Apps Script library and attach it to your project
2. Use another IDE

Regarding using another IDE at this time there is a tool called CLASP that helps to download/upload script which make it possible to use other IDEs.

Resources

• https://developers.google.com/apps-script/guides/libraries
• https://developers.google.com/apps-script/guides/clasp

Related

• Google Apps Script Auto Generated Library Documentation
• Is it possible to get the autocomplete functionality in AppsScript's script editor to work on custom classes?
• How do I get a suggestions?

Other related

• How to force newlines in Google Apps jsdoc descriptions

Answer 2

One can add type hints for a plain old javascript object by defining a class for it, and adding a comment above the constructor defining the parameter types

onEdit(e) (when a cell is edited) has an event, e as an input. Unfortunately, it there is no Event type in the script editor. We can fix that by defining an event class and adding a type hint for the parameter e like so:

class User {
   /**
    * @param {string} email
    * @param {string} nickname
    */
    constructor(email, nickname) {
    this.email = email;
    this.nickname = nickname;
  }
}

class Range {
   /**
    * @param {Number} columnEnd
    * @param {Number} columnStart
    * @param {Number} rowEnd
    * @param {Number} rowStart
    */
    constructor(columnEnd, columnStart, rowEnd, rowStart) {
    this.columnEnd = columnEnd;
    this.columnStart = columnStart;
    this.rowEnd = rowEnd;
    this.rowStart = rowStart;
  }
}

class Event {
   /**
    * @param {string} value
    * @param {User} user
    * @param {ScriptApp.AuthMode} authMode
    * @param {Range} range
    * @param {string} oldValue
    */
    constructor(value, user, authMode, range) {
    this.value = value;
    this.user = user;
    this.authMode = authMode;
    this.range = range;
  }
}

/**
* @param {Event} e
*/
function onEdit(e) {
  // now we have autocompletion on e properties
  SpreadsheetApp.getUi().alert(JSON.stringify(e));
  SpreadsheetApp.getUi().alert(e.user.email);
}