scratch-blocks 2.0.0-spork.2 → 2.0.0-spork.3

package/src/blocks/{procedures.js → procedures.ts}

@@ -23,38 +23,78 @@
  */
 
 import * as Blockly from "blockly/core";
-import { FieldTextInputRemovable } from "../fields/field_textinput_removable.js";
+import { FieldTextInputRemovable } from "../fields/field_textinput_removable";
+import type { ScratchDragger } from "../scratch_dragger";
 
-class DuplicateOnDragDraggable {
-  constructor(block) {
-    this.block = block;
-  }
+/**
+ * An object mapping argument IDs to blocks and shadow DOMs.
+ */
+type ConnectionMap = {
+  [key: string]: {
+    shadow: Element;
+    block: Blockly.BlockSvg;
+  };
+};
+
+/**
+ * Possible types for procedure arguments.
+ */
+enum ArgumentType {
+  STRING = "s",
+  NUMBER = "n",
+  BOOLEAN = "b",
+}
 
-  isMovable() {
+/**
+ * Class representing a draggable block that copies itself on drag.
+ */
+class DuplicateOnDragDraggable implements Blockly.IDraggable {
+  /**
+   * The newly-created duplicate block.
+   */
+  private copy?: Blockly.BlockSvg;
+  constructor(private block: Blockly.BlockSvg) {}
+
+  /**
+   * Returns whether or not this draggable is movable. */
+  isMovable(): boolean {
     return true;
   }
 
-  startDrag(e) {
+  /**
+   * Handles the start of a drag.
+   *
+   * @param e The event that triggered the drag.
+   */
+  startDrag(e: PointerEvent) {
     const data = this.block.toCopyData();
-    this.copy = Blockly.clipboard.paste(data, this.block.workspace);
+    this.copy = Blockly.clipboard.paste(
+      data,
+      this.block.workspace
+    ) as Blockly.BlockSvg;
     this.copy.startDrag(e);
   }
 
-  drag(e) {
-    this.block.workspace
-      .getGesture(e)
-      .getCurrentDragger()
-      .setDraggable(this.copy);
-    this.copy.drag(e);
+  drag(newLoc: Blockly.utils.Coordinate, e?: PointerEvent) {
+    (
+      this.block.workspace.getGesture(e).getCurrentDragger() as ScratchDragger
+    ).setDraggable(this.copy);
+    this.copy.drag(newLoc, e);
   }
 
-  endDrag(e) {
+  endDrag(e: PointerEvent) {
     this.copy?.endDrag(e);
   }
 
-  revertDrag(e) {
+  revertDrag() {
     this.copy?.dispose();
   }
+
+  getRelativeToSurfaceXY() {
+    return this.copy
+      ? this.copy.getRelativeToSurfaceXY()
+      : this.block.getRelativeToSurfaceXY();
+  }
 }
 
 // Serialization and deserialization.
@@ -62,11 +102,11 @@ class DuplicateOnDragDraggable {
 /**
  * Create XML to represent the (non-editable) name and arguments of a procedure
  * call block.
- * @return {!Element} XML storage element.
- * @this Blockly.Block
+ *
+ * @returns XML storage element.
  */
-function callerMutationToDom() {
-  var container = document.createElement("mutation");
+function callerMutationToDom(this: ProcedureCallBlock): Element {
+  const container = document.createElement("mutation");
   container.setAttribute("proccode", this.procCode_);
   container.setAttribute("argumentids", JSON.stringify(this.argumentIds_));
   container.setAttribute("warp", JSON.stringify(this.warp_));
@@ -76,10 +116,10 @@ function callerMutationToDom() {
 /**
  * Parse XML to restore the (non-editable) name and arguments of a procedure
  * call block.
- * @param {!Element} xmlElement XML storage element.
- * @this Blockly.Block
+ *
+ * @param xmlElement XML storage element.
  */
-function callerDomToMutation(xmlElement) {
+function callerDomToMutation(this: ProcedureCallBlock, xmlElement: Element) {
   this.procCode_ = xmlElement.getAttribute("proccode");
   this.generateShadows_ = JSON.parse(
     xmlElement.getAttribute("generateshadows")
@@ -92,16 +132,19 @@ function callerDomToMutation(xmlElement) {
 /**
  * Create XML to represent the (non-editable) name and arguments of a
  * procedures_prototype block or a procedures_declaration block.
- * @param {boolean=} opt_generateShadows Whether to include the generateshadows
- *     flag in the generated XML.  False if not provided.
- * @return {!Element} XML storage element.
- * @this Blockly.Block
+ *
+ * @param opt_generateShadows Whether to include the generateshadows flag in the
+ *     generated XML. False if not provided.
+ * @returns XML storage element.
  */
-function definitionMutationToDom(opt_generateShadows) {
-  var container = document.createElement("mutation");
+function definitionMutationToDom(
+  this: ProcedurePrototypeBlock | ProcedureDeclarationBlock,
+  opt_generateShadows?: boolean
+): Element {
+  const container = document.createElement("mutation");
 
   if (opt_generateShadows) {
-    container.setAttribute("generateshadows", true);
+    container.setAttribute("generateshadows", "true");
   }
   container.setAttribute("proccode", this.procCode_);
   container.setAttribute("argumentids", JSON.stringify(this.argumentIds_));
@@ -117,15 +160,18 @@ function definitionMutationToDom(opt_generateShadows) {
 /**
  * Parse XML to restore the (non-editable) name and arguments of a
  * procedures_prototype block or a procedures_declaration block.
- * @param {!Element} xmlElement XML storage element.
- * @this Blockly.Block
+ *
+ * @param xmlElement XML storage element.
  */
-function definitionDomToMutation(xmlElement) {
+function definitionDomToMutation(
+  this: ProcedurePrototypeBlock | ProcedureDeclarationBlock,
+  xmlElement: Element
+) {
   this.procCode_ = xmlElement.getAttribute("proccode");
   this.warp_ = JSON.parse(xmlElement.getAttribute("warp"));
 
-  var prevArgIds = this.argumentIds_;
-  var prevDisplayNames = this.displayNames_;
+  const prevArgIds = this.argumentIds_;
+  const prevDisplayNames = this.displayNames_;
 
   this.argumentIds_ = JSON.parse(xmlElement.getAttribute("argumentids"));
   this.displayNames_ = JSON.parse(xmlElement.getAttribute("argumentnames"));
@@ -133,7 +179,7 @@ function definitionDomToMutation(xmlElement) {
     xmlElement.getAttribute("argumentdefaults")
   );
   this.updateDisplay_();
-  if (this.updateArgumentReporterNames_) {
+  if ("updateArgumentReporterNames_" in this) {
     this.updateArgumentReporterNames_(prevArgIds, prevDisplayNames);
   }
 }
@@ -145,21 +191,19 @@ function definitionDomToMutation(xmlElement) {
 /**
  * Returns the name of the procedure this block calls, or the empty string if
  * it has not yet been set.
- * @return {string} Procedure name.
- * @this Blockly.Block
+ *
+ * @returns Procedure name.
  */
-function getProcCode() {
+function getProcCode(this: ProcedureBlock): string {
   return this.procCode_;
 }
 
 /**
  * Update the block's structure and appearance to match the internally stored
  * mutation.
- * @private
- * @this Blockly.Block
  */
-function updateDisplay_() {
-  var connectionMap = this.disconnectOldBlocks_();
+function updateDisplay_(this: ProcedureBlock) {
+  const connectionMap = this.disconnectOldBlocks_();
   this.removeAllInputs_();
   this.createAllInputs_(connectionMap);
   this.deleteShadows_(connectionMap);
@@ -170,18 +214,16 @@ function updateDisplay_() {
  * in case they can be reattached later.  Also save the shadow DOM if it exists.
  * The result is a map from argument ID to information that was associated with
  * that argument at the beginning of the mutation.
- * @return {!Object.<string, {shadow: Element, block: Blockly.Block}>} An object
- *     mapping argument IDs to blocks and shadow DOMs.
- * @private
- * @this Blockly.Block
+ *
+ * @returns An object mapping argument IDs to blocks and shadow DOMs.
  */
-function disconnectOldBlocks_() {
+function disconnectOldBlocks_(this: ProcedureBlock): ConnectionMap {
   // Remove old stuff
-  var connectionMap = {};
-  for (var i = 0, input; (input = this.inputList[i]); i++) {
+  const connectionMap: ConnectionMap = {};
+  for (const input of this.inputList) {
     if (input.connection) {
-      var target = input.connection.targetBlock();
-      var saveInfo = {
+      const target = input.connection.targetBlock() as Blockly.BlockSvg;
+      const saveInfo = {
         shadow: input.connection.getShadowDom(),
         block: target,
       };
@@ -198,40 +240,39 @@ function disconnectOldBlocks_() {
 /**
  * Remove all inputs on the block, including dummy inputs.
  * Assumes no input has shadow DOM set.
- * @private
- * @this Blockly.Block
  */
-function removeAllInputs_() {
+function removeAllInputs_(this: ProcedureBlock) {
   // Delete inputs directly instead of with block.removeInput to avoid splicing
   // out of the input list at every index.
-  for (var i = 0, input; (input = this.inputList[i]); i++) {
-    input.dispose();
-  }
+  this.inputList.forEach((input: Blockly.Input) => input.dispose());
   this.inputList = [];
 }
 
 /**
  * Create all inputs specified by the new procCode, and populate them with
  * shadow blocks or reconnected old blocks as appropriate.
- * @param {!Object.<string, {shadow: Element, block: Blockly.Block}>}
- *     connectionMap An object mapping argument IDs to blocks and shadow DOMs.
- * @private
- * @this Blockly.Block
+ *
+ * @param connectionMap An object mapping argument IDs to blocks and shadow DOMs.
  */
-function createAllInputs_(connectionMap) {
+function createAllInputs_(this: ProcedureBlock, connectionMap: ConnectionMap) {
   // Split the proc into components, by %n, %b, and %s (ignoring escaped).
-  var procComponents = this.procCode_.split(/(?=[^\\]%[nbs])/);
-  procComponents = procComponents.map(function (c) {
-    return c.trim(); // Strip whitespace.
-  });
+  const procComponents = this.procCode_
+    .split(/(?=[^\\]%[nbs])/)
+    .map(function (c: string) {
+      return c.trim(); // Strip whitespace.
+    });
   // Create arguments and labels as appropriate.
-  var argumentCount = 0;
-  for (var i = 0, component; (component = procComponents[i]); i++) {
-    var labelText;
-    if (component.substring(0, 1) == "%") {
-      var argumentType = component.substring(1, 2);
+  let argumentCount = 0;
+  for (const component of procComponents) {
+    let labelText;
+    if (component.substring(0, 1) === "%") {
+      const argumentType = component.substring(1, 2);
       if (
-        !(argumentType == "n" || argumentType == "b" || argumentType == "s")
+        !(
+          argumentType === ArgumentType.NUMBER ||
+          argumentType === ArgumentType.BOOLEAN ||
+          argumentType === ArgumentType.STRING
+        )
       ) {
         throw new Error(
           "Found an custom procedure with an invalid type: " + argumentType
@@ -239,10 +280,10 @@ function createAllInputs_(connectionMap) {
       }
       labelText = component.substring(2).trim();
 
-      var id = this.argumentIds_[argumentCount];
+      const id = this.argumentIds_[argumentCount];
 
-      var input = this.appendValueInput(id);
-      if (argumentType == "b") {
+      const input = this.appendValueInput(id);
+      if (argumentType === ArgumentType.BOOLEAN) {
         input.setCheck("Boolean");
       }
       this.populateArgument_(
@@ -262,19 +303,17 @@ function createAllInputs_(connectionMap) {
 
 /**
  * Delete all shadow blocks in the given map.
- * @param {!Object.<string, Blockly.Block>} connectionMap An object mapping
- *     argument IDs to the blocks that were connected to those IDs at the
- *     beginning of the mutation.
- * @private
- * @this Blockly.Block
+ *
+ * @param connectionMap An object mapping argument IDs to the blocks that were
+ *     connected to those IDs at the beginning of the mutation.
  */
-function deleteShadows_(connectionMap) {
+function deleteShadows_(this: ProcedureBlock, connectionMap: ConnectionMap) {
   // Get rid of all of the old shadow blocks if they aren't connected.
   if (connectionMap) {
-    for (var id in connectionMap) {
-      var saveInfo = connectionMap[id];
+    for (const id in connectionMap) {
+      const saveInfo = connectionMap[id];
       if (saveInfo) {
-        var block = saveInfo["block"];
+        const block = saveInfo["block"];
         if (block && block.isShadow()) {
           block.dispose();
           connectionMap[id] = null;
@@ -290,10 +329,13 @@ function deleteShadows_(connectionMap) {
 /**
  * Add a label field with the given text to a procedures_call or
  * procedures_prototype block.
- * @param {string} text The label text.
- * @private
+ *
+ * @param text The label text.
  */
-function addLabelField_(text) {
+function addLabelField_(
+  this: ProcedureCallBlock | ProcedurePrototypeBlock,
+  text: string
+) {
   this.appendDummyInput().appendField(text);
 }
 
@@ -301,10 +343,10 @@ function addLabelField_(text) {
  * Add a label editor with the given text to a procedures_declaration
  * block.  Editing the text in the label editor updates the text of the
  * corresponding label fields on function calls.
- * @param {string} text The label text.
- * @private
+ *
+ * @param text The label text.
  */
-function addLabelEditor_(text) {
+function addLabelEditor_(this: ProcedureDeclarationBlock, text: string) {
   if (text) {
     this.appendDummyInput(Blockly.utils.idGenerator.genUid()).appendField(
       new FieldTextInputRemovable(text)
@@ -314,24 +356,25 @@ function addLabelEditor_(text) {
 
 /**
  * Build a DOM node representing a shadow block of the given type.
- * @param {string} type One of 's' (string) or 'n' (number).
- * @return {!Element} The DOM node representing the new shadow block.
- * @private
- * @this Blockly.Block
- */
-function buildShadowDom_(type) {
-  var shadowDom = goog.dom.createDom("shadow");
-  if (type == "n") {
-    var shadowType = "math_number";
-    var fieldName = "NUM";
-    var fieldValue = "1";
+ *
+ * @param type One of 's' (string) or 'n' (number).
+ * @returns The DOM node representing the new shadow block.
+ */
+function buildShadowDom_(type: ArgumentType): Element {
+  const shadowDom = document.createElement("shadow");
+  let shadowType, fieldName, fieldValue;
+  if (type === ArgumentType.NUMBER) {
+    shadowType = "math_number";
+    fieldName = "NUM";
+    fieldValue = "1";
   } else {
-    var shadowType = "text";
-    var fieldName = "TEXT";
-    var fieldValue = "";
+    shadowType = "text";
+    fieldName = "TEXT";
+    fieldValue = "";
   }
   shadowDom.setAttribute("type", shadowType);
-  var fieldDom = goog.dom.createDom("field", null, fieldValue);
+  const fieldDom = document.createElement("field");
+  fieldDom.textContent = fieldValue;
   fieldDom.setAttribute("name", fieldName);
   shadowDom.appendChild(fieldDom);
   return shadowDom;
@@ -339,19 +382,27 @@ function buildShadowDom_(type) {
 
 /**
  * Create a new shadow block and attach it to the given input.
- * @param {!Blockly.Input} input The value input to attach a block to.
- * @param {string} argumentType One of 'b' (boolean), 's' (string) or
+ *
+ * @param input The value input to attach a block to.
+ * @param argumentType One of 'b' (boolean), 's' (string) or
  *     'n' (number).
- * @private
- * @this Blockly.Block
  */
-function attachShadow_(input, argumentType) {
-  if (argumentType == "n" || argumentType == "s") {
-    var blockType = argumentType == "n" ? "math_number" : "text";
+function attachShadow_(
+  this: ProcedureCallBlock,
+  input: Blockly.Input,
+  argumentType: ArgumentType
+) {
+  if (
+    argumentType === ArgumentType.NUMBER ||
+    argumentType === ArgumentType.STRING
+  ) {
+    const blockType =
+      argumentType === ArgumentType.NUMBER ? "math_number" : "text";
     Blockly.Events.disable();
+    let newBlock;
     try {
-      var newBlock = this.workspace.newBlock(blockType);
-      if (argumentType == "n") {
+      newBlock = this.workspace.newBlock(blockType);
+      if (argumentType === ArgumentType.NUMBER) {
         newBlock.setFieldValue("1", "NUM");
       } else {
         newBlock.setFieldValue("", "TEXT");
@@ -359,7 +410,7 @@ function attachShadow_(input, argumentType) {
       newBlock.setShadow(true);
       if (!this.isInsertionMarker()) {
         newBlock.initSvg();
-        newBlock.render(false);
+        newBlock.render();
       }
     } finally {
       Blockly.Events.enable();
@@ -375,28 +426,36 @@ function attachShadow_(input, argumentType) {
 
 /**
  * Create a new argument reporter block.
- * @param {string} argumentType One of 'b' (boolean), 's' (string) or
+ *
+ * @param argumentType One of 'b' (boolean), 's' (string) or
  *     'n' (number).
- * @param {string} displayName The name of the argument as provided by the
+ * @param displayName The name of the argument as provided by the
  *     user, which becomes the text of the label on the argument reporter block.
- * @return {!Blockly.BlockSvg} The newly created argument reporter block.
- * @private
- * @this Blockly.Block
+ * @returns The newly created argument reporter block.
  */
-function createArgumentReporter_(argumentType, displayName) {
-  if (argumentType == "n" || argumentType == "s") {
-    var blockType = "argument_reporter_string_number";
+function createArgumentReporter_(
+  this: ProcedurePrototypeBlock,
+  argumentType: ArgumentType,
+  displayName: string
+): Blockly.BlockSvg {
+  let blockType;
+  if (
+    argumentType === ArgumentType.NUMBER ||
+    argumentType === ArgumentType.STRING
+  ) {
+    blockType = "argument_reporter_string_number";
   } else {
-    var blockType = "argument_reporter_boolean";
+    blockType = "argument_reporter_boolean";
   }
   Blockly.Events.disable();
+  let newBlock;
   try {
-    var newBlock = this.workspace.newBlock(blockType);
+    newBlock = this.workspace.newBlock(blockType);
     newBlock.setShadow(true);
     newBlock.setFieldValue(displayName, "VALUE");
     if (!this.isInsertionMarker()) {
       newBlock.initSvg();
-      newBlock.render(false);
+      newBlock.render();
     }
   } finally {
     Blockly.Events.enable();
@@ -412,20 +471,25 @@ function createArgumentReporter_(argumentType, displayName) {
 /**
  * Populate the argument by attaching the correct child block or shadow to the
  * given input.
- * @param {string} type One of 'b' (boolean), 's' (string) or 'n' (number).
- * @param {number} index The index of this argument into the argument id array.
- * @param {!Object.<string, {shadow: Element, block: Blockly.Block}>}
- *     connectionMap An object mapping argument IDs to blocks and shadow DOMs.
- * @param {string} id The ID of the input to populate.
- * @param {!Blockly.Input} input The newly created input to populate.
- * @private
- * @this Blockly.Block
- */
-function populateArgumentOnCaller_(type, index, connectionMap, id, input) {
-  var oldBlock = null;
-  var oldShadow = null;
+ *
+ * @param type One of 'b' (boolean), 's' (string) or 'n' (number).
+ * @param index The index of this argument into the argument id array.
+ * @param connectionMap An object mapping argument IDs to blocks and shadow DOMs.
+ * @param id The ID of the input to populate.
+ * @param input The newly created input to populate.
+ */
+function populateArgumentOnCaller_(
+  this: ProcedureCallBlock,
+  type: ArgumentType,
+  index: number,
+  connectionMap: ConnectionMap,
+  id: string,
+  input: Blockly.Input
+) {
+  let oldBlock: Blockly.BlockSvg;
+  let oldShadow: Element;
   if (connectionMap && id in connectionMap) {
-    var saveInfo = connectionMap[id];
+    const saveInfo = connectionMap[id];
     oldBlock = saveInfo["block"];
     oldShadow = saveInfo["shadow"];
   }
@@ -434,9 +498,8 @@ function populateArgumentOnCaller_(type, index, connectionMap, id, input) {
     // Reattach the old block and shadow DOM.
     connectionMap[input.name] = null;
     oldBlock.outputConnection.connect(input.connection);
-    if (type != "b" && this.generateShadows_) {
-      var shadowDom = oldShadow || this.buildShadowDom_(type);
-      console.log("setting shadow dom: " + shadowDom);
+    if (type !== ArgumentType.BOOLEAN && this.generateShadows_) {
+      const shadowDom = oldShadow || this.buildShadowDom_(type);
       input.connection.setShadowDom(shadowDom);
     }
   } else if (this.generateShadows_) {
@@ -447,35 +510,41 @@ function populateArgumentOnCaller_(type, index, connectionMap, id, input) {
 /**
  * Populate the argument by attaching the correct argument reporter to the given
  * input.
- * @param {string} type One of 'b' (boolean), 's' (string) or 'n' (number).
- * @param {number} index The index of this argument into the argument ID and
+ *
+ * @param type One of 'b' (boolean), 's' (string) or 'n' (number).
+ * @param index The index of this argument into the argument ID and
  *     argument display name arrays.
- * @param {!Object.<string, {shadow: Element, block: Blockly.Block}>}
- *     connectionMap An object mapping argument IDs to blocks and shadow DOMs.
- * @param {string} id The ID of the input to populate.
- * @param {!Blockly.Input} input The newly created input to populate.
- * @private
- * @this Blockly.Block
- */
-function populateArgumentOnPrototype_(type, index, connectionMap, id, input) {
-  var oldBlock = null;
+ * @param connectionMap An object mapping argument IDs to blocks and shadow DOMs.
+ * @param id The ID of the input to populate.
+ * @param input The newly created input to populate.
+ */
+function populateArgumentOnPrototype_(
+  this: ProcedurePrototypeBlock,
+  type: ArgumentType,
+  index: number,
+  connectionMap: ConnectionMap,
+  id: string,
+  input: Blockly.Input
+) {
+  let oldBlock = null;
   if (connectionMap && id in connectionMap) {
-    var saveInfo = connectionMap[id];
+    const saveInfo = connectionMap[id];
     oldBlock = saveInfo["block"];
   }
 
-  var oldTypeMatches = checkOldTypeMatches_(oldBlock, type);
-  var displayName = this.displayNames_[index];
+  const oldTypeMatches = checkOldTypeMatches_(oldBlock, type);
+  const displayName = this.displayNames_[index];
 
   // Decide which block to attach.
+  let argumentReporter: Blockly.BlockSvg;
   if (connectionMap && oldBlock && oldTypeMatches) {
     // Update the text if needed. The old argument reporter is the same type,
     // and on the same input, but the argument's display name may have changed.
-    var argumentReporter = oldBlock;
+    argumentReporter = oldBlock;
     argumentReporter.setFieldValue(displayName, "VALUE");
     connectionMap[input.name] = null;
   } else {
-    var argumentReporter = this.createArgumentReporter_(type, displayName);
+    argumentReporter = this.createArgumentReporter_(type, displayName);
   }
 
   // Attach the block.
@@ -485,36 +554,42 @@ function populateArgumentOnPrototype_(type, index, connectionMap, id, input) {
 /**
  * Populate the argument by attaching the correct argument editor to the given
  * input.
- * @param {string} type One of 'b' (boolean), 's' (string) or 'n' (number).
- * @param {number} index The index of this argument into the argument id and
- *     argument display name arrays.
- * @param {!Object.<string, {shadow: Element, block: Blockly.Block}>}
- *     connectionMap An object mapping argument IDs to blocks and shadow DOMs.
- * @param {string} id The ID of the input to populate.
- * @param {!Blockly.Input} input The newly created input to populate.
- * @private
- * @this Blockly.Block
- */
-function populateArgumentOnDeclaration_(type, index, connectionMap, id, input) {
-  var oldBlock = null;
+ *
+ * @param type One of 'b' (boolean), 's' (string) or 'n' (number).
+ * @param index The index of this argument into the argument id and argument
+ *     display name arrays.
+ * @param connectionMap An object mapping argument IDs to blocks and shadow DOMs.
+ * @param id The ID of the input to populate.
+ * @param input The newly created input to populate.
+ */
+function populateArgumentOnDeclaration_(
+  this: ProcedureDeclarationBlock,
+  type: ArgumentType,
+  index: number,
+  connectionMap: ConnectionMap,
+  id: string,
+  input: Blockly.Input
+) {
+  let oldBlock = null;
   if (connectionMap && id in connectionMap) {
-    var saveInfo = connectionMap[id];
+    const saveInfo = connectionMap[id];
     oldBlock = saveInfo["block"];
   }
 
   // TODO: This always returns false, because it checks for argument reporter
   // blocks instead of argument editor blocks.  Create a new version for argument
   // editors.
-  var oldTypeMatches = checkOldTypeMatches_(oldBlock, type);
-  var displayName = this.displayNames_[index];
+  const oldTypeMatches = checkOldTypeMatches_(oldBlock, type);
+  const displayName = this.displayNames_[index];
 
   // Decide which block to attach.
+  let argumentEditor: Blockly.BlockSvg;
   if (oldBlock && oldTypeMatches) {
-    var argumentEditor = oldBlock;
+    argumentEditor = oldBlock;
     oldBlock.setFieldValue(displayName, "TEXT");
     connectionMap[input.name] = null;
   } else {
-    var argumentEditor = this.createArgumentEditor_(type, displayName);
+    argumentEditor = this.createArgumentEditor_(type, displayName);
   }
 
   // Attach the block.
@@ -524,21 +599,28 @@ function populateArgumentOnDeclaration_(type, index, connectionMap, id, input) {
 /**
  * Check whether the type of the old block corresponds to the given argument
  * type.
- * @param {Blockly.BlockSvg} oldBlock The old block to check.
- * @param {string} type The argument type.  One of 'n', 'n', or 's'.
- * @return {boolean} True if the type matches, false otherwise.
+ *
+ * @param oldBlock The old block to check.
+ * @param type The argument type.  One of 'n', 'n', or 's'.
+ * @returns True if the type matches, false otherwise.
  */
-function checkOldTypeMatches_(oldBlock, type) {
+function checkOldTypeMatches_(
+  oldBlock: Blockly.BlockSvg | null,
+  type: string
+): boolean {
   if (!oldBlock) {
     return false;
   }
   if (
-    (type == "n" || type == "s") &&
-    oldBlock.type == "argument_reporter_string_number"
+    (type === ArgumentType.NUMBER || type === ArgumentType.STRING) &&
+    oldBlock.type === "argument_reporter_string_number"
   ) {
     return true;
   }
-  if (type == "b" && oldBlock.type == "argument_reporter_boolean") {
+  if (
+    type === ArgumentType.BOOLEAN &&
+    oldBlock.type === "argument_reporter_boolean"
+  ) {
     return true;
   }
   return false;
@@ -548,21 +630,27 @@ function checkOldTypeMatches_(oldBlock, type) {
  * Create an argument editor.
  * An argument editor is a shadow block with a single text field, which is used
  * to set the display name of the argument.
- * @param {string} argumentType One of 'b' (boolean), 's' (string) or
- *     'n' (number).
- * @param {string} displayName The display name  of this argument, which is the
- *     text of the field on the shadow block.
- * @return {!Blockly.BlockSvg} The newly created argument editor block.
- * @private
- * @this Blockly.Block
+ *
+ * @param argumentType One of 'b' (boolean), 's' (string) or 'n' (number).
+ * @param displayName The display name  of this argument, which is the text of
+ *     the field on the shadow block.
+ * @returns The newly created argument editor block.
  */
-function createArgumentEditor_(argumentType, displayName) {
+function createArgumentEditor_(
+  this: ProcedureDeclarationBlock,
+  argumentType: ArgumentType,
+  displayName: string
+): Blockly.BlockSvg {
   Blockly.Events.disable();
+  let newBlock;
   try {
-    if (argumentType == "n" || argumentType == "s") {
-      var newBlock = this.workspace.newBlock("argument_editor_string_number");
+    if (
+      argumentType === ArgumentType.NUMBER ||
+      argumentType === ArgumentType.STRING
+    ) {
+      newBlock = this.workspace.newBlock("argument_editor_string_number");
     } else {
-      var newBlock = this.workspace.newBlock("argument_editor_boolean");
+      newBlock = this.workspace.newBlock("argument_editor_boolean");
     }
     newBlock.setFieldValue(displayName, "TEXT");
     newBlock.setShadow(true);
@@ -585,23 +673,23 @@ function createArgumentEditor_(argumentType, displayName) {
  * Update the serializable information on the block based on the existing inputs
  * and their text.
  */
-function updateDeclarationProcCode_() {
+function updateDeclarationProcCode_(this: ProcedureDeclarationBlock) {
   this.procCode_ = "";
   this.displayNames_ = [];
   this.argumentIds_ = [];
-  for (var i = 0; i < this.inputList.length; i++) {
-    if (i != 0) {
+  for (let i = 0; i < this.inputList.length; i++) {
+    if (i !== 0) {
       this.procCode_ += " ";
     }
-    var input = this.inputList[i];
-    if (input.type == Blockly.inputs.inputTypes.DUMMY) {
+    const input = this.inputList[i];
+    if (input.type === Blockly.inputs.inputTypes.DUMMY) {
       this.procCode_ += input.fieldRow[0].getValue();
-    } else if (input.type == Blockly.inputs.inputTypes.VALUE) {
+    } else if (input.type === Blockly.inputs.inputTypes.VALUE) {
       // Inspect the argument editor.
-      var target = input.connection.targetBlock();
+      const target = input.connection.targetBlock();
       this.displayNames_.push(target.getFieldValue("TEXT"));
       this.argumentIds_.push(input.name);
-      if (target.type == "argument_editor_boolean") {
+      if (target.type === "argument_editor_boolean") {
         this.procCode_ += "%b";
       } else {
         this.procCode_ += "%s";
@@ -616,27 +704,25 @@ function updateDeclarationProcCode_() {
 
 /**
  * Focus on the last argument editor or label editor on the block.
- * @private
  */
-function focusLastEditor_() {
+function focusLastEditor_(this: ProcedureDeclarationBlock) {
   if (this.inputList.length > 0) {
-    var newInput = this.inputList[this.inputList.length - 1];
-    if (newInput.type == Blockly.inputs.inputTypes.DUMMY) {
-      newInput.fieldRow[0].showEditor_();
-    } else if (newInput.type == Blockly.inputs.inputTypes.VALUE) {
+    const newInput = this.inputList[this.inputList.length - 1];
+    if (newInput.type === Blockly.inputs.inputTypes.DUMMY) {
+      newInput.fieldRow[0].showEditor();
+    } else if (newInput.type === Blockly.inputs.inputTypes.VALUE) {
       // Inspect the argument editor.
-      var target = newInput.connection.targetBlock();
-      target.getField("TEXT").showEditor_();
+      const target = newInput.connection.targetBlock();
+      target.getField("TEXT").showEditor();
     }
   }
 }
 
 /**
  * Externally-visible function to add a label to the procedure declaration.
- * @public
  */
-function addLabelExternal() {
-  Blockly.WidgetDiv.hide(true);
+function addLabelExternal(this: ProcedureDeclarationBlock) {
+  Blockly.WidgetDiv.hide();
   this.procCode_ = this.procCode_ + " label text";
   this.updateDisplay_();
   this.focusLastEditor_();
@@ -645,10 +731,9 @@ function addLabelExternal() {
 /**
  * Externally-visible function to add a boolean argument to the procedure
  * declaration.
- * @public
  */
-function addBooleanExternal() {
-  Blockly.WidgetDiv.hide(true);
+function addBooleanExternal(this: ProcedureDeclarationBlock) {
+  Blockly.WidgetDiv.hide();
   this.procCode_ = this.procCode_ + " %b";
   this.displayNames_.push("boolean");
   this.argumentIds_.push(Blockly.utils.idGenerator.genUid());
@@ -660,10 +745,9 @@ function addBooleanExternal() {
 /**
  * Externally-visible function to add a string/number argument to the procedure
  * declaration.
- * @public
  */
-function addStringNumberExternal() {
-  Blockly.WidgetDiv.hide(true);
+function addStringNumberExternal(this: ProcedureDeclarationBlock) {
+  Blockly.WidgetDiv.hide();
   this.procCode_ = this.procCode_ + " %s";
   this.displayNames_.push("number or text");
   this.argumentIds_.push(Blockly.utils.idGenerator.genUid());
@@ -674,28 +758,31 @@ function addStringNumberExternal() {
 
 /**
  * Externally-visible function to get the warp on procedure declaration.
- * @return {boolean} The value of the warp_ property.
- * @public
+ *
+ * @returns The value of the warp_ property.
  */
-function getWarp() {
+function getWarp(this: ProcedureDeclarationBlock): boolean {
   return this.warp_;
 }
 
 /**
  * Externally-visible function to set the warp on procedure declaration.
- * @param {boolean} warp The value of the warp_ property.
- * @public
+ *
+ * @param warp The value of the warp_ property.
  */
-function setWarp(warp) {
+function setWarp(this: ProcedureDeclarationBlock, warp: boolean) {
   this.warp_ = warp;
 }
 
 /**
  * Callback to remove a field, only for the declaration block.
- * @param {Blockly.Field} field The field being removed.
- * @public
+ *
+ * @param field The field being removed.
  */
-function removeFieldCallback(field) {
+function removeFieldCallback(
+  this: ProcedureDeclarationBlock,
+  field: Blockly.Field
+) {
   // Do not delete if there is only one input
   if (this.inputList.length === 1) {
     return;
@@ -705,19 +792,19 @@ function removeFieldCallback(field) {
     var input = this.inputList[n];
     if (input.connection) {
       var target = input.connection.targetBlock();
-      if (field.name && target.getField(field.name) == field) {
+      if (field.name && target.getField(field.name) === field) {
         inputNameToRemove = input.name;
       }
     } else {
       for (var j = 0; j < input.fieldRow.length; j++) {
-        if (input.fieldRow[j] == field) {
+        if (input.fieldRow[j] === field) {
           inputNameToRemove = input.name;
         }
       }
     }
   }
   if (inputNameToRemove) {
-    Blockly.WidgetDiv.hide(true);
+    Blockly.WidgetDiv.hide();
     this.removeInput(inputNameToRemove);
     this.onChangeFn();
     this.updateDisplay_();
@@ -726,12 +813,16 @@ function removeFieldCallback(field) {
 
 /**
  * Callback to pass removeField up to the declaration block from arguments.
- * @param {Blockly.Field} field The field being removed.
- * @public
+ *
+ * @param field The field being removed.
  */
-function removeArgumentCallback_(field) {
-  if (this.parentBlock_ && this.parentBlock_.removeFieldCallback) {
-    this.parentBlock_.removeFieldCallback(field);
+function removeArgumentCallback_(
+  this: ProcedureDeclarationBlock | ProcedureArgumentEditorBlock,
+  field: Blockly.Field
+) {
+  const parent = this.getParent();
+  if (parent && parent.removeFieldCallback) {
+    parent.removeFieldCallback(field);
   }
 }
 
@@ -744,20 +835,22 @@ function removeArgumentCallback_(field) {
  * Until there is a more explicit way of identifying argument reporter blocks using ids,
  * be conservative and only update argument reporters that are used in the
  * stack below the prototype, ie the definition.
- * @param {!Array<string>} prevArgIds The previous ordering of argument ids.
- * @param {!Array<string>} prevDisplayNames The previous argument names.
- * @this Blockly.Block
- */
-function updateArgumentReporterNames_(prevArgIds, prevDisplayNames) {
-  var nameChanges = [];
-  var argReporters = [];
-  var definitionBlock = this.getParent();
+ *
+ * @param prevArgIds The previous ordering of argument ids.
+ * @param prevDisplayNames The previous argument names.
+ */
+function updateArgumentReporterNames_(
+  this: ProcedurePrototypeBlock,
+  prevArgIds: string[],
+  prevDisplayNames: string[]
+) {
+  const nameChanges: { newName: string; blocks: Blockly.BlockSvg[] }[] = [];
+  const argReporters: Blockly.BlockSvg[] = [];
+  const definitionBlock = this.getParent();
   if (!definitionBlock) return;
 
   // Create a list of argument reporters that are descendants of the definition stack (see above comment)
-  var allBlocks = definitionBlock.getDescendants(false);
-  for (var i = 0; i < allBlocks.length; i++) {
-    var block = allBlocks[i];
+  definitionBlock.getDescendants(false).forEach((block: Blockly.BlockSvg) => {
     if (
       (block.type === "argument_reporter_string_number" ||
         block.type === "argument_reporter_boolean") &&
@@ -766,20 +859,20 @@ function updateArgumentReporterNames_(prevArgIds, prevDisplayNames) {
       // Exclude arg reporters in the prototype block, which are shadows.
       argReporters.push(block);
     }
-  }
+  });
 
   // Create a list of "name changes", including the new name and blocks matching the old name
   // Only search over the current set of argument ids, ignore args that have been removed
-  for (var i = 0, id; (id = this.argumentIds_[i]); i++) {
+  for (let i = 0, id; (id = this.argumentIds_[i]); i++) {
     // Find the previous index of this argument id. Could be -1 if it is newly added.
-    var prevIndex = prevArgIds.indexOf(id);
-    if (prevIndex == -1) continue; // Newly added argument, no corresponding previous argument to update.
-    var prevName = prevDisplayNames[prevIndex];
-    if (prevName != this.displayNames_[i]) {
+    const prevIndex = prevArgIds.indexOf(id);
+    if (prevIndex === -1) continue; // Newly added argument, no corresponding previous argument to update.
+    const prevName = prevDisplayNames[prevIndex];
+    if (prevName !== this.displayNames_[i]) {
       nameChanges.push({
         newName: this.displayNames_[i],
-        blocks: argReporters.filter(function (block) {
-          return block.getFieldValue("VALUE") == prevName;
+        blocks: argReporters.filter((block) => {
+          return block.getFieldValue("VALUE") === prevName;
         }),
       });
     }
@@ -787,8 +880,8 @@ function updateArgumentReporterNames_(prevArgIds, prevDisplayNames) {
 
   // Finally update the blocks for each name change.
   // Do this after creating the lists to avoid cycles of renaming.
-  for (var j = 0, nameChange; (nameChange = nameChanges[j]); j++) {
-    for (var k = 0, block; (block = nameChange.blocks[k]); k++) {
+  for (const nameChange of nameChanges) {
+    for (const block of nameChange.blocks) {
       block.setFieldValue(nameChange.newName, "VALUE");
     }
   }
@@ -797,9 +890,8 @@ function updateArgumentReporterNames_(prevArgIds, prevDisplayNames) {
 Blockly.Blocks["procedures_definition"] = {
   /**
    * Block for defining a procedure with no return value.
-   * @this Blockly.Block
    */
-  init: function () {
+  init: function (this: Blockly.Block) {
     this.jsonInit({
       message0: Blockly.Msg.PROCEDURES_DEFINITION,
       args0: [
@@ -820,9 +912,8 @@ Blockly.Blocks["procedures_definition"] = {
 Blockly.Blocks["procedures_call"] = {
   /**
    * Block for calling a procedure with no return value.
-   * @this Blockly.Block
    */
-  init: function () {
+  init: function (this: ProcedureCallBlock) {
     this.jsonInit({
       extensions: [
         "colours_more",
@@ -858,9 +949,8 @@ Blockly.Blocks["procedures_prototype"] = {
   /**
    * Block for calling a procedure with no return value, for rendering inside
    * define block.
-   * @this Blockly.Block
    */
-  init: function () {
+  init: function (this: ProcedurePrototypeBlock) {
     this.jsonInit({
       extensions: ["colours_more", "shape_statement"],
     });
@@ -894,9 +984,8 @@ Blockly.Blocks["procedures_prototype"] = {
 Blockly.Blocks["procedures_declaration"] = {
   /**
    * The root block in the procedure declaration editor.
-   * @this Blockly.Block
    */
-  init: function () {
+  init: function (this: ProcedureDeclarationBlock) {
     this.jsonInit({
       extensions: ["colours_more", "shape_statement"],
     });
@@ -937,7 +1026,7 @@ Blockly.Blocks["procedures_declaration"] = {
 };
 
 Blockly.Blocks["argument_reporter_boolean"] = {
-  init: function () {
+  init: function (this: Blockly.BlockSvg) {
     this.jsonInit({
       message0: " %1",
       args0: [
@@ -954,7 +1043,7 @@ Blockly.Blocks["argument_reporter_boolean"] = {
 };
 
 Blockly.Blocks["argument_reporter_string_number"] = {
-  init: function () {
+  init: function (this: Blockly.BlockSvg) {
     this.jsonInit({
       message0: " %1",
       args0: [
@@ -971,7 +1060,7 @@ Blockly.Blocks["argument_reporter_string_number"] = {
 };
 
 Blockly.Blocks["argument_editor_boolean"] = {
-  init: function () {
+  init: function (this: ProcedureArgumentEditorBlock) {
     this.jsonInit({
       message0: " %1",
       args0: [
@@ -990,7 +1079,7 @@ Blockly.Blocks["argument_editor_boolean"] = {
 };
 
 Blockly.Blocks["argument_editor_string_number"] = {
-  init: function () {
+  init: function (this: ProcedureArgumentEditorBlock) {
     this.jsonInit({
       message0: " %1",
       args0: [
@@ -1007,3 +1096,63 @@ Blockly.Blocks["argument_editor_string_number"] = {
     this.removeFieldCallback = removeArgumentCallback_.bind(this);
   },
 };
+
+interface ProcedureBlock extends Blockly.BlockSvg {
+  procCode_: string;
+  argumentIds_: string[];
+  warp_: boolean;
+  getProcCode: () => string;
+  removeAllInputs_: () => void;
+  disconnectOldBlocks_: () => ConnectionMap;
+  deleteShadows_: (connectionMap: ConnectionMap) => void;
+  createAllInputs_: (connectionMap: ConnectionMap) => void;
+  updateDisplay_: () => void;
+  populateArgument_: (
+    type: ArgumentType,
+    index: number,
+    connectionMap: ConnectionMap,
+    id: string,
+    input: Blockly.Input
+  ) => void;
+  addProcedureLabel_: (text: string) => void;
+}
+
+export interface ProcedureDeclarationBlock extends ProcedureBlock {
+  displayNames_: string[];
+  argumentDefaults_: string[];
+  removeFieldCallback: (field: Blockly.Field) => void;
+  createArgumentEditor_: (
+    argumentType: ArgumentType,
+    displayName: string
+  ) => Blockly.BlockSvg;
+  focusLastEditor_: () => void;
+  getWarp: () => boolean;
+  setWarp: (warp: boolean) => void;
+  addLabelExternal: () => void;
+  addBooleanExternal: () => void;
+  addStringNumberExternal: () => void;
+  onChangeFn: () => void;
+}
+
+interface ProcedureCallBlock extends ProcedureBlock {
+  generateShadows_: boolean;
+  attachShadow_: (input: Blockly.Input, argumentType: ArgumentType) => void;
+  buildShadowDom_: (type: ArgumentType) => Element;
+}
+
+interface ProcedurePrototypeBlock extends ProcedureBlock {
+  displayNames_: string[];
+  argumentDefaults_: string[];
+  createArgumentReporter_: (
+    argumentType: ArgumentType,
+    displayName: string
+  ) => Blockly.BlockSvg;
+  updateArgumentReporterNames_: (
+    prevArgIds: string[],
+    prevDisplayNames: string[]
+  ) => void;
+}
+
+interface ProcedureArgumentEditorBlock extends Blockly.BlockSvg {
+  removeFieldCallback: (field: Blockly.Field) => void;
+}