blockly 8.0.5 → 9.0.0-beta.0

package/core/{field.js → field.ts}

@@ -9,7 +9,6 @@
  * This is an abstract class that defines the UI on the block.  Actual
  * instances would be FieldTextInput, FieldDropdown, etc.
  */
-'use strict';
 
 /**
  * Field.  Used for editable titles, variables, etc.
@@ -17,283 +16,240 @@
  * instances would be FieldTextInput, FieldDropdown, etc.
  * @class
  */
-goog.module('Blockly.Field');
-
-const Tooltip = goog.require('Blockly.Tooltip');
-const WidgetDiv = goog.require('Blockly.WidgetDiv');
-const Xml = goog.require('Blockly.Xml');
-const browserEvents = goog.require('Blockly.browserEvents');
-const dom = goog.require('Blockly.utils.dom');
-const dropDownDiv = goog.require('Blockly.dropDownDiv');
-const eventUtils = goog.require('Blockly.Events.utils');
-const parsing = goog.require('Blockly.utils.parsing');
-const style = goog.require('Blockly.utils.style');
-const userAgent = goog.require('Blockly.utils.userAgent');
-const utilsXml = goog.require('Blockly.utils.xml');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
-/* eslint-disable-next-line no-unused-vars */
-const {Coordinate} = goog.requireType('Blockly.utils.Coordinate');
-/* eslint-disable-next-line no-unused-vars */
-const {IASTNodeLocationSvg} = goog.require('Blockly.IASTNodeLocationSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {IASTNodeLocationWithBlock} = goog.require('Blockly.IASTNodeLocationWithBlock');
-/* eslint-disable-next-line no-unused-vars */
-const {IKeyboardAccessible} = goog.require('Blockly.IKeyboardAccessible');
-/* eslint-disable-next-line no-unused-vars */
-const {IRegistrable} = goog.require('Blockly.IRegistrable');
-/* eslint-disable-next-line no-unused-vars */
-const {Input} = goog.requireType('Blockly.Input');
-const {MarkerManager} = goog.require('Blockly.MarkerManager');
-const {Rect} = goog.require('Blockly.utils.Rect');
-const {Sentinel} = goog.require('Blockly.utils.Sentinel');
-/* eslint-disable-next-line no-unused-vars */
-const {ShortcutRegistry} = goog.requireType('Blockly.ShortcutRegistry');
-const {Size} = goog.require('Blockly.utils.Size');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.Field');
+
 /* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.BlockChange');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Gesture');
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './shortcut_registry.js';
+// Unused import preserved for side-effects. Remove if unneeded.
+import './events/events_block_change.js';
+// Unused import preserved for side-effects. Remove if unneeded.
+// import './gesture.js';
+
+import type {Block} from './block.js';
+import type {BlockSvg} from './block_svg.js';
+import * as browserEvents from './browser_events.js';
+import * as dropDownDiv from './dropdowndiv.js';
+import * as eventUtils from './events/utils.js';
+import type {Input} from './input.js';
+import type {IASTNodeLocationSvg} from './interfaces/i_ast_node_location_svg.js';
+import type {IASTNodeLocationWithBlock} from './interfaces/i_ast_node_location_with_block.js';
+import type {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
+import type {IRegistrable} from './interfaces/i_registrable.js';
+import {MarkerManager} from './marker_manager.js';
+import type {ConstantProvider} from './renderers/common/constants.js';
+import type {KeyboardShortcut} from './shortcut_registry.js';
+import * as Tooltip from './tooltip.js';
+import type {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import * as parsing from './utils/parsing.js';
+import {Rect} from './utils/rect.js';
+import {Sentinel} from './utils/sentinel.js';
+import {Size} from './utils/size.js';
+import * as style from './utils/style.js';
+import {Svg} from './utils/svg.js';
+import * as userAgent from './utils/useragent.js';
+import * as utilsXml from './utils/xml.js';
+import * as WidgetDiv from './widgetdiv.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
+import * as Xml from './xml.js';
 
 
 /**
  * Abstract class for an editable field.
- * @implements {IASTNodeLocationSvg}
- * @implements {IASTNodeLocationWithBlock}
- * @implements {IKeyboardAccessible}
- * @implements {IRegistrable}
- * @abstract
  * @alias Blockly.Field
  */
-class Field {
+export abstract class Field implements IASTNodeLocationSvg,
+                                       IASTNodeLocationWithBlock,
+                                       IKeyboardAccessible, IRegistrable {
+  /** The default value for this field. */
+  protected DEFAULT_VALUE: any = null;
+
+  /** Non-breaking space. */
+  static readonly NBSP = '\u00A0';
+
   /**
-   * @param {*} value The initial value of the field.
-   *     Also accepts Field.SKIP_SETUP if you wish to skip setup (only used by
-   *     subclasses that want to handle configuration and setting the field
-   *     value after their own constructors have run).
-   * @param {?Function=} opt_validator  A function that is called to validate
-   *    changes to the field's value. Takes in a value & returns a validated
-   *    value, or null to abort the change.
-   * @param {Object=} opt_config A map of options used to configure the field.
-   *    Refer to the individual field's documentation for a list of properties
-   *    this parameter supports.
+   * A value used to signal when a field's constructor should *not* set the
+   * field's value or run configure_, and should allow a subclass to do that
+   * instead.
    */
-  constructor(value, opt_validator, opt_config) {
-    /**
-     * Name of field.  Unique within each block.
-     * Static labels are usually unnamed.
-     * @type {string|undefined}
-     */
-    this.name = undefined;
+  static readonly SKIP_SETUP = new Sentinel();
 
-    /**
-     * A generic value possessed by the field.
-     * Should generally be non-null, only null when the field is created.
-     * @type {*}
-     * @protected
-     */
-    this.value_ =
-        /** @type {typeof Field} */ (new.target).prototype.DEFAULT_VALUE;
+  /**
+   * Name of field.  Unique within each block.
+   * Static labels are usually unnamed.
+   */
+  name?: string = undefined;
+  protected value_: AnyDuringMigration;
 
-    /**
-     * Validation function called when user edits an editable field.
-     * @type {Function}
-     * @protected
-     */
-    this.validator_ = null;
+  /** Validation function called when user edits an editable field. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'Function'.
+  protected validator_: Function = null as AnyDuringMigration;
 
-    /**
-     * Used to cache the field's tooltip value if setTooltip is called when the
-     * field is not yet initialized. Is *not* guaranteed to be accurate.
-     * @type {?Tooltip.TipInfo}
-     * @private
-     */
-    this.tooltip_ = null;
+  /**
+   * Used to cache the field's tooltip value if setTooltip is called when the
+   * field is not yet initialized. Is *not* guaranteed to be accurate.
+   */
+  private tooltip_: Tooltip.TipInfo|null = null;
+  protected size_: Size;
 
-    /**
-     * The size of the area rendered by the field.
-     * @type {!Size}
-     * @protected
-     */
-    this.size_ = new Size(0, 0);
+  /**
+   * Holds the cursors svg element when the cursor is attached to the field.
+   * This is null if there is no cursor on the field.
+   */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private cursorSvg_: SVGElement = null as AnyDuringMigration;
 
-    /**
-     * Holds the cursors svg element when the cursor is attached to the field.
-     * This is null if there is no cursor on the field.
-     * @type {SVGElement}
-     * @private
-     */
-    this.cursorSvg_ = null;
+  /**
+   * Holds the markers svg element when the marker is attached to the field.
+   * This is null if there is no marker on the field.
+   */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGElement'.
+  private markerSvg_: SVGElement = null as AnyDuringMigration;
 
-    /**
-     * Holds the markers svg element when the marker is attached to the field.
-     * This is null if there is no marker on the field.
-     * @type {SVGElement}
-     * @private
-     */
-    this.markerSvg_ = null;
+  /** The rendered field's SVG group element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGGElement'.
+  protected fieldGroup_: SVGGElement = null as AnyDuringMigration;
 
-    /**
-     * The rendered field's SVG group element.
-     * @type {SVGGElement}
-     * @protected
-     */
-    this.fieldGroup_ = null;
+  /** The rendered field's SVG border element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGRectElement'.
+  protected borderRect_: SVGRectElement = null as AnyDuringMigration;
 
-    /**
-     * The rendered field's SVG border element.
-     * @type {SVGRectElement}
-     * @protected
-     */
-    this.borderRect_ = null;
+  /** The rendered field's SVG text element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'SVGTextElement'.
+  protected textElement_: SVGTextElement = null as AnyDuringMigration;
 
-    /**
-     * The rendered field's SVG text element.
-     * @type {SVGTextElement}
-     * @protected
-     */
-    this.textElement_ = null;
+  /** The rendered field's text content element. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type 'Text'.
+  protected textContent_: Text = null as AnyDuringMigration;
 
-    /**
-     * The rendered field's text content element.
-     * @type {Text}
-     * @protected
-     */
-    this.textContent_ = null;
+  /** Mouse down event listener data. */
+  private mouseDownWrapper_: browserEvents.Data|null = null;
 
-    /**
-     * Mouse down event listener data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.mouseDownWrapper_ = null;
+  /** Constants associated with the source block's renderer. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'ConstantProvider'.
+  protected constants_: ConstantProvider = null as AnyDuringMigration;
 
-    /**
-     * Constants associated with the source block's renderer.
-     * @type {ConstantProvider}
-     * @protected
-     */
-    this.constants_ = null;
+  /**
+   * Has this field been disposed of?
+   * @internal
+   */
+  disposed = false;
 
-    /**
-     * Has this field been disposed of?
-     * @type {boolean}
-     * @package
-     */
-    this.disposed = false;
+  /** Maximum characters of text to display before adding an ellipsis. */
+  maxDisplayLength = 50;
 
-    /**
-     * Maximum characters of text to display before adding an ellipsis.
-     * @type {number}
-     */
-    this.maxDisplayLength = 50;
+  /** Block this field is attached to.  Starts as null, then set in init. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type 'Block'.
+  protected sourceBlock_: Block = null as AnyDuringMigration;
 
-    /**
-     * Block this field is attached to.  Starts as null, then set in init.
-     * @type {Block}
-     * @protected
-     */
-    this.sourceBlock_ = null;
+  /** Does this block need to be re-rendered? */
+  protected isDirty_ = true;
 
-    /**
-     * Does this block need to be re-rendered?
-     * @type {boolean}
-     * @protected
-     */
-    this.isDirty_ = true;
+  /** Is the field visible, or hidden due to the block being collapsed? */
+  protected visible_ = true;
 
-    /**
-     * Is the field visible, or hidden due to the block being collapsed?
-     * @type {boolean}
-     * @protected
-     */
-    this.visible_ = true;
+  /**
+   * Can the field value be changed using the editor on an editable block?
+   */
+  protected enabled_ = true;
 
-    /**
-     * Can the field value be changed using the editor on an editable block?
-     * @type {boolean}
-     * @protected
-     */
-    this.enabled_ = true;
+  /** The element the click handler is bound to. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'Element'.
+  protected clickTarget_: Element = null as AnyDuringMigration;
 
-    /**
-     * The element the click handler is bound to.
-     * @type {Element}
-     * @protected
-     */
-    this.clickTarget_ = null;
+  /**
+   * The prefix field.
+   * @internal
+   */
+  prefixField: string|null = null;
 
-    /**
-     * The prefix field.
-     * @type {?string}
-     * @package
-     */
-    this.prefixField = null;
+  /**
+   * The suffix field.
+   * @internal
+   */
+  suffixField: string|null = null;
 
-    /**
-     * The suffix field.
-     * @type {?string}
-     * @package
-     */
-    this.suffixField = null;
+  /**
+   * Editable fields usually show some sort of UI indicating they are
+   * editable. They will also be saved by the serializer.
+   */
+  EDITABLE = true;
 
-    /**
-     * Editable fields usually show some sort of UI indicating they are
-     * editable. They will also be saved by the serializer.
-     * @type {boolean}
-     */
-    this.EDITABLE = true;
+  /**
+   * Serializable fields are saved by the serializer, non-serializable fields
+   * are not. Editable fields should also be serializable. This is not the
+   * case by default so that SERIALIZABLE is backwards compatible.
+   */
+  SERIALIZABLE = false;
 
-    /**
-     * Serializable fields are saved by the serializer, non-serializable fields
-     * are not. Editable fields should also be serializable. This is not the
-     * case by default so that SERIALIZABLE is backwards compatible.
-     * @type {boolean}
-     */
-    this.SERIALIZABLE = false;
+  /** Mouse cursor style when over the hotspot that initiates the editor. */
+  CURSOR = '';
 
+  /**
+   * @param value The initial value of the field.
+   *     Also accepts Field.SKIP_SETUP if you wish to skip setup (only used by
+   * subclasses that want to handle configuration and setting the field value
+   * after their own constructors have run).
+   * @param opt_validator  A function that is called to validate changes to the
+   *     field's value. Takes in a value & returns a validated value, or null to
+   *     abort the change.
+   * @param opt_config A map of options used to configure the field.
+   *    Refer to the individual field's documentation for a list of properties
+   * this parameter supports.
+   */
+  constructor(
+      value: AnyDuringMigration, opt_validator?: Function|null,
+      opt_config?: FieldConfig) {
     /**
-     * Mouse cursor style when over the hotspot that initiates the editor.
-     * @type {string}
+     * A generic value possessed by the field.
+     * Should generally be non-null, only null when the field is created.
      */
-    this.CURSOR = '';
+    this.value_ = (new.target).prototype.DEFAULT_VALUE;
+
+    /** The size of the area rendered by the field. */
+    this.size_ = new Size(0, 0);
 
-    if (value === Field.SKIP_SETUP) return;
-    if (opt_config) this.configure_(opt_config);
+    if (value === Field.SKIP_SETUP) {
+      return;
+    }
+    if (opt_config) {
+      this.configure_(opt_config);
+    }
     this.setValue(value);
-    if (opt_validator) this.setValidator(opt_validator);
+    if (opt_validator) {
+      this.setValidator(opt_validator);
+    }
   }
 
   /**
    * Process the configuration map passed to the field.
-   * @param {!Object} config A map of options used to configure the field. See
-   *    the individual field's documentation for a list of properties this
-   *    parameter supports.
-   * @protected
-   */
-  configure_(config) {
-    let tooltip = config['tooltip'];
-    if (typeof tooltip === 'string') {
-      tooltip = parsing.replaceMessageReferences(config['tooltip']);
-    }
-    tooltip && this.setTooltip(tooltip);
-
+   * @param config A map of options used to configure the field. See the
+   *     individual field's documentation for a list of properties this
+   *     parameter supports.
+   */
+  protected configure_(config: FieldConfig) {
     // TODO (#2884): Possibly add CSS class config option.
     // TODO (#2885): Possibly add cursor config option.
+    if (config.tooltip) {
+      this.setTooltip(parsing.replaceMessageReferences(config.tooltip));
+    }
   }
 
   /**
    * Attach this field to a block.
-   * @param {!Block} block The block containing this field.
+   * @param block The block containing this field.
    */
-  setSourceBlock(block) {
+  setSourceBlock(block: Block) {
     if (this.sourceBlock_) {
       throw Error('Field already bound to a block');
     }
@@ -302,44 +258,42 @@ class Field {
 
   /**
    * Get the renderer constant provider.
-   * @return {?ConstantProvider} The renderer constant
-   *     provider.
+   * @return The renderer constant provider.
    */
-  getConstants() {
-    if (!this.constants_ && this.sourceBlock_ && this.sourceBlock_.workspace &&
+  getConstants(): ConstantProvider|null {
+    if (!this.constants_ && this.sourceBlock_ && !this.sourceBlock_.disposed &&
         this.sourceBlock_.workspace.rendered) {
-      this.constants_ =
-          /** @type {!WorkspaceSvg} */ (this.sourceBlock_.workspace)
-              .getRenderer()
-              .getConstants();
+      this.constants_ = (this.sourceBlock_.workspace as WorkspaceSvg)
+                            .getRenderer()
+                            .getConstants();
     }
     return this.constants_;
   }
 
   /**
    * Get the block this field is attached to.
-   * @return {Block} The block containing this field.
+   * @return The block containing this field.
    */
-  getSourceBlock() {
+  getSourceBlock(): Block {
     return this.sourceBlock_;
   }
 
   /**
    * Initialize everything to render this field. Override
    * methods initModel and initView rather than this method.
-   * @package
    * @final
+   * @internal
    */
   init() {
     if (this.fieldGroup_) {
       // Field has already been initialized once.
       return;
     }
-    this.fieldGroup_ = dom.createSvgElement(Svg.G, {}, null);
+    this.fieldGroup_ = dom.createSvgElement(Svg.G, {});
     if (!this.isVisible()) {
       this.fieldGroup_.style.display = 'none';
     }
-    const sourceBlockSvg = /** @type {!BlockSvg} **/ (this.sourceBlock_);
+    const sourceBlockSvg = this.sourceBlock_ as BlockSvg;
     sourceBlockSvg.getSvgRoot().appendChild(this.fieldGroup_);
     this.initView();
     this.updateEditable();
@@ -350,7 +304,7 @@ class Field {
 
   /**
    * Create the block UI for this field.
-   * @package
+   * @internal
    */
   initView() {
     this.createBorderRect_();
@@ -360,7 +314,7 @@ class Field {
   /**
    * Initializes the model of the field after it has been installed on a block.
    * No-op by default.
-   * @package
+   * @internal
    */
   initModel() {}
 
@@ -368,13 +322,12 @@ class Field {
    * Create a field border rect element. Not to be overridden by subclasses.
    * Instead modify the result of the function inside initView, or create a
    * separate function to call.
-   * @protected
    */
-  createBorderRect_() {
+  protected createBorderRect_() {
     this.borderRect_ = dom.createSvgElement(
         Svg.RECT, {
-          'rx': this.getConstants().FIELD_BORDER_RECT_RADIUS,
-          'ry': this.getConstants().FIELD_BORDER_RECT_RADIUS,
+          'rx': this.getConstants()!.FIELD_BORDER_RECT_RADIUS,
+          'ry': this.getConstants()!.FIELD_BORDER_RECT_RADIUS,
           'x': 0,
           'y': 0,
           'height': this.size_.height,
@@ -388,15 +341,14 @@ class Field {
    * Create a field text element. Not to be overridden by subclasses. Instead
    * modify the result of the function inside initView, or create a separate
    * function to call.
-   * @protected
    */
-  createTextElement_() {
+  protected createTextElement_() {
     this.textElement_ = dom.createSvgElement(
         Svg.TEXT, {
           'class': 'blocklyText',
         },
         this.fieldGroup_);
-    if (this.getConstants().FIELD_TEXT_BASELINE_CENTER) {
+    if (this.getConstants()!.FIELD_TEXT_BASELINE_CENTER) {
       this.textElement_.setAttribute('dominant-baseline', 'central');
     }
     this.textContent_ = document.createTextNode('');
@@ -406,9 +358,8 @@ class Field {
   /**
    * Bind events to the field. Can be overridden by subclasses if they need to
    * do custom input handling.
-   * @protected
    */
-  bindEvents_() {
+  protected bindEvents_() {
     Tooltip.bindMouseEvents(this.getClickTarget_());
     this.mouseDownWrapper_ = browserEvents.conditionalBind(
         this.getClickTarget_(), 'mousedown', this, this.onMouseDown_);
@@ -417,22 +368,21 @@ class Field {
   /**
    * Sets the field's value based on the given XML element. Should only be
    * called by Blockly.Xml.
-   * @param {!Element} fieldElement The element containing info about the
-   *    field's state.
-   * @package
+   * @param fieldElement The element containing info about the field's state.
+   * @internal
    */
-  fromXml(fieldElement) {
+  fromXml(fieldElement: Element) {
     this.setValue(fieldElement.textContent);
   }
 
   /**
    * Serializes this field's value to XML. Should only be called by Blockly.Xml.
-   * @param {!Element} fieldElement The element to populate with info about the
-   *    field's state.
-   * @return {!Element} The element containing info about the field's state.
-   * @package
+   * @param fieldElement The element to populate with info about the field's
+   *     state.
+   * @return The element containing info about the field's state.
+   * @internal
    */
-  toXml(fieldElement) {
+  toXml(fieldElement: Element): Element {
     fieldElement.textContent = this.getValue();
     return fieldElement;
   }
@@ -440,14 +390,13 @@ class Field {
   /**
    * Saves this fields value as something which can be serialized to JSON.
    * Should only be called by the serialization system.
-   * @param {boolean=} _doFullSerialization If true, this signals to the field
-   *     that if it normally just saves a reference to some state (eg variable
-   *     fields) it should instead serialize the full state of the thing being
-   *     referenced.
-   * @return {*} JSON serializable state.
-   * @package
-   */
-  saveState(_doFullSerialization) {
+   * @param _doFullSerialization If true, this signals to the field that if it
+   *     normally just saves a reference to some state (eg variable fields) it
+   *     should instead serialize the full state of the thing being referenced.
+   * @return JSON serializable state.
+   * @internal
+   */
+  saveState(_doFullSerialization?: boolean): AnyDuringMigration {
     const legacyState = this.saveLegacyState(Field);
     if (legacyState !== null) {
       return legacyState;
@@ -458,10 +407,10 @@ class Field {
   /**
    * Sets the field's state based on the given state value. Should only be
    * called by the serialization system.
-   * @param {*} state The state we want to apply to the field.
-   * @package
+   * @param state The state we want to apply to the field.
+   * @internal
    */
-  loadState(state) {
+  loadState(state: AnyDuringMigration) {
     if (this.loadLegacyState(Field, state)) {
       return;
     }
@@ -472,12 +421,11 @@ class Field {
    * Returns a stringified version of the XML state, if it should be used.
    * Otherwise this returns null, to signal the field should use its own
    * serialization.
-   * @param {*} callingClass The class calling this method.
+   * @param callingClass The class calling this method.
    *     Used to see if `this` has overridden any relevant hooks.
-   * @return {?string} The stringified version of the XML state, or null.
-   * @protected
+   * @return The stringified version of the XML state, or null.
    */
-  saveLegacyState(callingClass) {
+  protected saveLegacyState(callingClass: AnyDuringMigration): string|null {
     if (callingClass.prototype.saveState === this.saveState &&
         callingClass.prototype.toXml !== this.toXml) {
       const elem = utilsXml.createElement('field');
@@ -492,17 +440,18 @@ class Field {
   }
 
   /**
-   * Loads the given state using either the old XML hoooks, if they should be
+   * Loads the given state using either the old XML hooks, if they should be
    * used. Returns true to indicate loading has been handled, false otherwise.
-   * @param {*} callingClass The class calling this method.
+   * @param callingClass The class calling this method.
    *     Used to see if `this` has overridden any relevant hooks.
-   * @param {*} state The state to apply to the field.
-   * @return {boolean} Whether the state was applied or not.
+   * @param state The state to apply to the field.
+   * @return Whether the state was applied or not.
    */
-  loadLegacyState(callingClass, state) {
+  loadLegacyState(callingClass: AnyDuringMigration, state: AnyDuringMigration):
+      boolean {
     if (callingClass.prototype.loadState === this.loadState &&
         callingClass.prototype.fromXml !== this.fromXml) {
-      this.fromXml(Xml.textToDom(/** @type {string} */ (state)));
+      this.fromXml(Xml.textToDom(state as string));
       return true;
     }
     // Either they called this on purpose from their loadState, or they have
@@ -512,7 +461,7 @@ class Field {
 
   /**
    * Dispose of all DOM objects and events belonging to this editable field.
-   * @package
+   * @internal
    */
   dispose() {
     dropDownDiv.hideIfOwner(this);
@@ -528,9 +477,7 @@ class Field {
     this.disposed = true;
   }
 
-  /**
-   * Add or remove the UI indicating if this field is editable or not.
-   */
+  /** Add or remove the UI indicating if this field is editable or not. */
   updateEditable() {
     const group = this.fieldGroup_;
     if (!this.EDITABLE || !group) {
@@ -550,9 +497,9 @@ class Field {
   /**
    * Set whether this field's value can be changed using the editor when the
    *     source block is editable.
-   * @param {boolean} enabled True if enabled.
+   * @param enabled True if enabled.
    */
-  setEnabled(enabled) {
+  setEnabled(enabled: boolean) {
     this.enabled_ = enabled;
     this.updateEditable();
   }
@@ -560,17 +507,17 @@ class Field {
   /**
    * Check whether this field's value can be changed using the editor when the
    *     source block is editable.
-   * @return {boolean} Whether this field is enabled.
+   * @return Whether this field is enabled.
    */
-  isEnabled() {
+  isEnabled(): boolean {
     return this.enabled_;
   }
 
   /**
    * Check whether this field defines the showEditor_ function.
-   * @return {boolean} Whether this field is clickable.
+   * @return Whether this field is clickable.
    */
-  isClickable() {
+  isClickable(): boolean {
     return this.enabled_ && !!this.sourceBlock_ &&
         this.sourceBlock_.isEditable() &&
         this.showEditor_ !== Field.prototype.showEditor_;
@@ -580,10 +527,10 @@ class Field {
    * Check whether this field is currently editable.  Some fields are never
    * EDITABLE (e.g. text labels). Other fields may be EDITABLE but may exist on
    * non-editable blocks or be currently disabled.
-   * @return {boolean} Whether this field is currently enabled, editable and on
-   * an editable block.
+   * @return Whether this field is currently enabled, editable and on an
+   *     editable block.
    */
-  isCurrentlyEditable() {
+  isCurrentlyEditable(): boolean {
     return this.enabled_ && this.EDITABLE && !!this.sourceBlock_ &&
         this.sourceBlock_.isEditable();
   }
@@ -591,9 +538,9 @@ class Field {
   /**
    * Check whether this field should be serialized by the XML renderer.
    * Handles the logic for backwards compatibility and incongruous states.
-   * @return {boolean} Whether this field should be serialized or not.
+   * @return Whether this field should be serialized or not.
    */
-  isSerializable() {
+  isSerializable(): boolean {
     let isSerializable = false;
     if (this.name) {
       if (this.SERIALIZABLE) {
@@ -611,19 +558,19 @@ class Field {
 
   /**
    * Gets whether this editable field is visible or not.
-   * @return {boolean} True if visible.
+   * @return True if visible.
    */
-  isVisible() {
+  isVisible(): boolean {
     return this.visible_;
   }
 
   /**
    * Sets whether this editable field is visible or not. Should only be called
    * by input.setVisible.
-   * @param {boolean} visible True if visible.
-   * @package
+   * @param visible True if visible.
+   * @internal
    */
-  setVisible(visible) {
+  setVisible(visible: boolean) {
     if (this.visible_ === visible) {
       return;
     }
@@ -646,47 +593,45 @@ class Field {
    * value is accepted as valid. This is to allow for fields using the
    * validated function as a field-level change event notification.
    *
-   * @param {Function} handler The validator function
-   *     or null to clear a previous validator.
+   * @param handler The validator function or null to clear a previous
+   *     validator.
    */
-  setValidator(handler) {
+  setValidator(handler: Function) {
     this.validator_ = handler;
   }
 
   /**
    * Gets the validation function for editable fields, or null if not set.
-   * @return {?Function} Validation function, or null.
+   * @return Validation function, or null.
    */
-  getValidator() {
+  getValidator(): Function|null {
     return this.validator_;
   }
 
   /**
    * Gets the group element for this editable field.
    * Used for measuring the size and for positioning.
-   * @return {!SVGGElement} The group element.
+   * @return The group element.
    */
-  getSvgRoot() {
-    return /** @type {!SVGGElement} */ (this.fieldGroup_);
+  getSvgRoot(): SVGGElement {
+    return this.fieldGroup_;
   }
 
   /**
    * Updates the field to match the colour/style of the block. Should only be
    * called by BlockSvg.applyColour().
-   * @package
+   * @internal
    */
-  applyColour() {
-    // Non-abstract sub-classes may wish to implement this. See FieldDropdown.
-  }
+  applyColour() {}
+  // Non-abstract sub-classes may wish to implement this. See FieldDropdown.
 
   /**
    * Used by getSize() to move/resize any DOM elements, and get the new size.
    *
    * All rendering that has an effect on the size/shape of the block should be
    * done here, and should be triggered by getSize().
-   * @protected
    */
-  render_() {
+  protected render_() {
     if (this.textContent_) {
       this.textContent_.nodeValue = this.getDisplayText_();
     }
@@ -696,12 +641,12 @@ class Field {
   /**
    * Calls showEditor_ when the field is clicked if the field is clickable.
    * Do not override.
-   * @param {Event=} opt_e Optional mouse event that triggered the field to
-   *     open, or undefined if triggered programmatically.
-   * @package
+   * @param opt_e Optional mouse event that triggered the field to open, or
+   *     undefined if triggered programmatically.
    * @final
+   * @internal
    */
-  showEditor(opt_e) {
+  showEditor(opt_e?: Event) {
     if (this.isClickable()) {
       this.showEditor_(opt_e);
     }
@@ -710,39 +655,33 @@ class Field {
   /**
    * A developer hook to create an editor for the field. This is no-op by
    * default, and must be overriden to create an editor.
-   * @param {Event=} _e Optional mouse event that triggered the field to
-   *     open, or undefined if triggered programmatically.
-   * @return {void}
-   * @protected
+   * @param _e Optional mouse event that triggered the field to open, or
+   *     undefined if triggered programmatically.
    */
-  showEditor_(_e) {
-    // NOP
-  }
+  protected showEditor_(_e?: Event): void {}
+  // NOP
 
   /**
    * Updates the size of the field based on the text.
-   * @param {number=} opt_margin margin to use when positioning the text
-   *     element.
-   * @protected
+   * @param opt_margin margin to use when positioning the text element.
    */
-  updateSize_(opt_margin) {
+  protected updateSize_(opt_margin?: number) {
     const constants = this.getConstants();
-    const xOffset = opt_margin !== undefined ?
-        opt_margin :
-        (this.borderRect_ ? this.getConstants().FIELD_BORDER_RECT_X_PADDING :
-                            0);
+    const xOffset = opt_margin !== undefined ? opt_margin :
+        this.borderRect_ ? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING :
+                           0;
     let totalWidth = xOffset * 2;
-    let totalHeight = constants.FIELD_TEXT_HEIGHT;
+    let totalHeight = constants!.FIELD_TEXT_HEIGHT;
 
     let contentWidth = 0;
     if (this.textElement_) {
       contentWidth = dom.getFastTextWidth(
-          this.textElement_, constants.FIELD_TEXT_FONTSIZE,
-          constants.FIELD_TEXT_FONTWEIGHT, constants.FIELD_TEXT_FONTFAMILY);
+          this.textElement_, constants!.FIELD_TEXT_FONTSIZE,
+          constants!.FIELD_TEXT_FONTWEIGHT, constants!.FIELD_TEXT_FONTFAMILY);
       totalWidth += contentWidth;
     }
     if (this.borderRect_) {
-      totalHeight = Math.max(totalHeight, constants.FIELD_BORDER_RECT_HEIGHT);
+      totalHeight = Math.max(totalHeight, constants!.FIELD_BORDER_RECT_HEIGHT);
     }
 
     this.size_.height = totalHeight;
@@ -755,52 +694,64 @@ class Field {
   /**
    * Position a field's text element after a size change.  This handles both LTR
    * and RTL positioning.
-   * @param {number} xOffset x offset to use when positioning the text element.
-   * @param {number} contentWidth The content width.
-   * @protected
+   * @param xOffset x offset to use when positioning the text element.
+   * @param contentWidth The content width.
    */
-  positionTextElement_(xOffset, contentWidth) {
+  protected positionTextElement_(xOffset: number, contentWidth: number) {
     if (!this.textElement_) {
       return;
     }
     const constants = this.getConstants();
     const halfHeight = this.size_.height / 2;
 
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
     this.textElement_.setAttribute(
         'x',
-        this.sourceBlock_.RTL ? this.size_.width - contentWidth - xOffset :
-                                xOffset);
+        (this.sourceBlock_.RTL ? this.size_.width - contentWidth - xOffset :
+                                 xOffset) as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
     this.textElement_.setAttribute(
         'y',
-        constants.FIELD_TEXT_BASELINE_CENTER ?
-            halfHeight :
-            halfHeight - constants.FIELD_TEXT_HEIGHT / 2 +
-                constants.FIELD_TEXT_BASELINE);
+        (constants!.FIELD_TEXT_BASELINE_CENTER ?
+             halfHeight :
+             halfHeight - constants!.FIELD_TEXT_HEIGHT / 2 +
+                 constants!.FIELD_TEXT_BASELINE) as AnyDuringMigration);
   }
 
-  /**
-   * Position a field's border rect after a size change.
-   * @protected
-   */
-  positionBorderRect_() {
+  /** Position a field's border rect after a size change. */
+  protected positionBorderRect_() {
     if (!this.borderRect_) {
       return;
     }
-    this.borderRect_.setAttribute('width', this.size_.width);
-    this.borderRect_.setAttribute('height', this.size_.height);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
     this.borderRect_.setAttribute(
-        'rx', this.getConstants().FIELD_BORDER_RECT_RADIUS);
+        'width', this.size_.width as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
     this.borderRect_.setAttribute(
-        'ry', this.getConstants().FIELD_BORDER_RECT_RADIUS);
+        'height', this.size_.height as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.borderRect_.setAttribute(
+        'rx',
+        this.getConstants()!.FIELD_BORDER_RECT_RADIUS as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.borderRect_.setAttribute(
+        'ry',
+        this.getConstants()!.FIELD_BORDER_RECT_RADIUS as AnyDuringMigration);
   }
 
   /**
    * Returns the height and width of the field.
    *
    * This should *in general* be the only place render_ gets called from.
-   * @return {!Size} Height and width.
+   * @return Height and width.
    */
-  getSize() {
+  getSize(): Size {
     if (!this.isVisible()) {
       return new Size(0, 0);
     }
@@ -822,12 +773,11 @@ class Field {
   /**
    * Returns the bounding box of the rendered field, accounting for workspace
    * scaling.
-   * @return {!Rect} An object with top, bottom, left, and right in
-   *     pixels relative to the top left corner of the page (window
-   * coordinates).
-   * @package
+   * @return An object with top, bottom, left, and right in pixels relative to
+   *     the top left corner of the page (window coordinates).
+   * @internal
    */
-  getScaledBBox() {
+  getScaledBBox(): Rect {
     let scaledWidth;
     let scaledHeight;
     let xy;
@@ -835,9 +785,8 @@ class Field {
       // Browsers are inconsistent in what they return for a bounding box.
       // - Webkit / Blink: fill-box / object bounding box
       // - Gecko / Triden / EdgeHTML: stroke-box
-      const bBox = this.sourceBlock_.getHeightWidth();
-      const scale =
-          /** @type {!WorkspaceSvg} */ (this.sourceBlock_.workspace).scale;
+      const bBox = (this.sourceBlock_ as BlockSvg).getHeightWidth();
+      const scale = (this.sourceBlock_.workspace as WorkspaceSvg).scale;
       xy = this.getAbsoluteXY_();
       scaledWidth = bBox.width * scale;
       scaledHeight = bBox.height * scale;
@@ -867,10 +816,9 @@ class Field {
   /**
    * Get the text from this field to display on the block. May differ from
    * ``getText`` due to ellipsis, and other formatting.
-   * @return {string} Text to display.
-   * @protected
+   * @return Text to display.
    */
-  getDisplayText_() {
+  protected getDisplayText_(): string {
     let text = this.getText();
     if (!text) {
       // Prevent the field from disappearing if empty.
@@ -893,14 +841,16 @@ class Field {
    * Get the text from this field.
    * Override getText_ to provide a different behavior than simply casting the
    * value to a string.
-   * @return {string} Current text.
+   * @return Current text.
    * @final
    */
-  getText() {
+  getText(): string {
     // this.getText_ was intended so that devs don't have to remember to call
     // super when overriding how the text of the field is generated. (#2910)
     const text = this.getText_();
-    if (text !== null) return String(text);
+    if (text !== null) {
+      return String(text);
+    }
     return String(this.getValue());
   }
 
@@ -909,10 +859,9 @@ class Field {
    * Override if the text representation of the value of this field
    * is not just a string cast of its value.
    * Return null to resort to a string cast.
-   * @return {?string} Current text or null.
-   * @protected
+   * @return Current text or null.
    */
-  getText_() {
+  protected getText_(): string|null {
     return null;
   }
 
@@ -921,11 +870,13 @@ class Field {
    * rerender this field and adjust for any sizing changes.
    * Other fields on the same block will not rerender, because their sizes have
    * already been recorded.
-   * @package
+   * @internal
    */
   markDirty() {
     this.isDirty_ = true;
-    this.constants_ = null;
+    // AnyDuringMigration because:  Type 'null' is not assignable to type
+    // 'ConstantProvider'.
+    this.constants_ = null as AnyDuringMigration;
   }
 
   /**
@@ -933,13 +884,13 @@ class Field {
    * rerender this field and adjust for any sizing changes.
    * Other fields on the same block will not rerender, because their sizes have
    * already been recorded.
-   * @package
+   * @internal
    */
   forceRerender() {
     this.isDirty_ = true;
     if (this.sourceBlock_ && this.sourceBlock_.rendered) {
-      this.sourceBlock_.render();
-      this.sourceBlock_.bumpNeighbours();
+      (this.sourceBlock_ as BlockSvg).render();
+      (this.sourceBlock_ as BlockSvg).bumpNeighbours();
       this.updateMarkers_();
     }
   }
@@ -948,10 +899,10 @@ class Field {
    * Used to change the value of the field. Handles validation and events.
    * Subclasses should override doClassValidation_ and doValueUpdate_ rather
    * than this method.
-   * @param {*} newValue New value.
+   * @param newValue New value.
    * @final
    */
-  setValue(newValue) {
+  setValue(newValue: AnyDuringMigration) {
     const doLogging = false;
     if (newValue === null) {
       doLogging && console.log('null, return');
@@ -992,8 +943,8 @@ class Field {
 
     this.doValueUpdate_(newValue);
     if (source && eventUtils.isEnabled()) {
-      eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CHANGE))(
-          source, 'field', this.name || null, oldValue, newValue));
+      eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CHANGE))!
+                      (source, 'field', this.name || null, oldValue, newValue));
     }
     if (this.isDirty_) {
       this.forceRerender();
@@ -1003,12 +954,13 @@ class Field {
 
   /**
    * Process the result of validation.
-   * @param {*} newValue New value.
-   * @param {*} validatedValue Validated value.
-   * @return {*} New value, or an Error object.
-   * @private
+   * @param newValue New value.
+   * @param validatedValue Validated value.
+   * @return New value, or an Error object.
    */
-  processValidation_(newValue, validatedValue) {
+  private processValidation_(
+      newValue: AnyDuringMigration,
+      validatedValue: AnyDuringMigration): AnyDuringMigration {
     if (validatedValue === null) {
       this.doValueInvalid_(newValue);
       if (this.isDirty_) {
@@ -1024,20 +976,20 @@ class Field {
 
   /**
    * Get the current value of the field.
-   * @return {*} Current value.
+   * @return Current value.
    */
-  getValue() {
+  getValue(): AnyDuringMigration {
     return this.value_;
   }
 
   /**
    * Used to validate a value. Returns input by default. Can be overridden by
    * subclasses, see FieldDropdown.
-   * @param {*=} opt_newValue The value to be validated.
-   * @return {*} The validated value, same as input by default.
-   * @protected
+   * @param opt_newValue The value to be validated.
+   * @return The validated value, same as input by default.
    */
-  doClassValidation_(opt_newValue) {
+  protected doClassValidation_(opt_newValue?: AnyDuringMigration):
+      AnyDuringMigration {
     if (opt_newValue === null || opt_newValue === undefined) {
       return null;
     }
@@ -1047,10 +999,9 @@ class Field {
   /**
    * Used to update the value of a field. Can be overridden by subclasses to do
    * custom storage of values/updating of external things.
-   * @param {*} newValue The value to be saved.
-   * @protected
+   * @param newValue The value to be saved.
    */
-  doValueUpdate_(newValue) {
+  protected doValueUpdate_(newValue: AnyDuringMigration) {
     this.value_ = newValue;
     this.isDirty_ = true;
   }
@@ -1059,25 +1010,20 @@ class Field {
    * Used to notify the field an invalid value was input. Can be overridden by
    * subclasses, see FieldTextInput.
    * No-op by default.
-   * @param {*} _invalidValue The input value that was determined to be invalid.
-   * @protected
+   * @param _invalidValue The input value that was determined to be invalid.
    */
-  doValueInvalid_(_invalidValue) {
-    // NOP
-  }
+  protected doValueInvalid_(_invalidValue: AnyDuringMigration) {}
+  // NOP
 
   /**
    * Handle a mouse down event on a field.
-   * @param {!Event} e Mouse down event.
-   * @protected
+   * @param e Mouse down event.
    */
-  onMouseDown_(e) {
-    if (!this.sourceBlock_ || !this.sourceBlock_.workspace) {
+  protected onMouseDown_(e: Event) {
+    if (!this.sourceBlock_ || this.sourceBlock_.disposed) {
       return;
     }
-    const gesture =
-        /** @type {!WorkspaceSvg} */ (this.sourceBlock_.workspace)
-            .getGesture(e);
+    const gesture = (this.sourceBlock_.workspace as WorkspaceSvg).getGesture(e);
     if (gesture) {
       gesture.setStartField(this);
     }
@@ -1085,18 +1031,18 @@ class Field {
 
   /**
    * Sets the tooltip for this field.
-   * @param {?Tooltip.TipInfo} newTip The
-   *     text for the tooltip, a function that returns the text for the tooltip,
-   * a parent object whose tooltip will be used, or null to display the tooltip
-   *     of the parent block. To not display a tooltip pass the empty string.
+   * @param newTip The text for the tooltip, a function that returns the text
+   *     for the tooltip, a parent object whose tooltip will be used, or null to
+   *     display the tooltip of the parent block. To not display a tooltip pass
+   *     the empty string.
    */
-  setTooltip(newTip) {
+  setTooltip(newTip: Tooltip.TipInfo|null) {
     if (!newTip && newTip !== '') {  // If null or undefined.
       newTip = this.sourceBlock_;
     }
     const clickTarget = this.getClickTarget_();
     if (clickTarget) {
-      clickTarget.tooltip = newTip;
+      (clickTarget as AnyDuringMigration).tooltip = newTip;
     } else {
       // Field has not been initialized yet.
       this.tooltip_ = newTip;
@@ -1105,9 +1051,9 @@ class Field {
 
   /**
    * Returns the tooltip text for this field.
-   * @return {string} The tooltip text for this field.
+   * @return The tooltip text for this field.
    */
-  getTooltip() {
+  getTooltip(): string {
     const clickTarget = this.getClickTarget_();
     if (clickTarget) {
       return Tooltip.getTooltipOfObject(clickTarget);
@@ -1120,51 +1066,47 @@ class Field {
    * The element to bind the click handler to. If not set explicitly, defaults
    * to the SVG root of the field. When this element is
    * clicked on an editable field, the editor will open.
-   * @return {!Element} Element to bind click handler to.
-   * @protected
+   * @return Element to bind click handler to.
    */
-  getClickTarget_() {
+  protected getClickTarget_(): Element {
     return this.clickTarget_ || this.getSvgRoot();
   }
 
   /**
    * Return the absolute coordinates of the top-left corner of this field.
    * The origin (0,0) is the top-left corner of the page body.
-   * @return {!Coordinate} Object with .x and .y properties.
-   * @protected
+   * @return Object with .x and .y properties.
    */
-  getAbsoluteXY_() {
-    return style.getPageOffset(
-        /** @type {!SVGRectElement} */ (this.getClickTarget_()));
+  protected getAbsoluteXY_(): Coordinate {
+    return style.getPageOffset(this.getClickTarget_() as SVGRectElement);
   }
 
   /**
    * Whether this field references any Blockly variables.  If true it may need
    * to be handled differently during serialization and deserialization.
    * Subclasses may override this.
-   * @return {boolean} True if this field has any variable references.
-   * @package
+   * @return True if this field has any variable references.
+   * @internal
    */
-  referencesVariables() {
+  referencesVariables(): boolean {
     return false;
   }
 
   /**
    * Refresh the variable name referenced by this field if this field references
    * variables.
-   * @package
+   * @internal
    */
-  refreshVariableName() {
-    // NOP
-  }
+  refreshVariableName() {}
+  // NOP
 
   /**
    * Search through the list of inputs and their fields in order to find the
    * parent input of a field.
-   * @return {Input} The input that the field belongs to.
-   * @package
+   * @return The input that the field belongs to.
+   * @internal
    */
-  getParentInput() {
+  getParentInput(): Input {
     let parentInput = null;
     const block = this.sourceBlock_;
     const inputs = block.inputList;
@@ -1179,45 +1121,46 @@ class Field {
         }
       }
     }
-    return parentInput;
+    // AnyDuringMigration because:  Type 'Input | null' is not assignable to
+    // type 'Input'.
+    return parentInput as AnyDuringMigration;
   }
 
   /**
    * Returns whether or not we should flip the field in RTL.
-   * @return {boolean} True if we should flip in RTL.
+   * @return True if we should flip in RTL.
    */
-  getFlipRtl() {
+  getFlipRtl(): boolean {
     return false;
   }
 
   /**
    * Returns whether or not the field is tab navigable.
-   * @return {boolean} True if the field is tab navigable.
+   * @return True if the field is tab navigable.
    */
-  isTabNavigable() {
+  isTabNavigable(): boolean {
     return false;
   }
 
   /**
    * Handles the given keyboard shortcut.
-   * @param {!ShortcutRegistry.KeyboardShortcut} _shortcut The shortcut to be
-   *     handled.
-   * @return {boolean} True if the shortcut has been handled, false otherwise.
-   * @public
+   * @param _shortcut The shortcut to be handled.
+   * @return True if the shortcut has been handled, false otherwise.
    */
-  onShortcut(_shortcut) {
+  onShortcut(_shortcut: KeyboardShortcut): boolean {
     return false;
   }
 
   /**
    * Add the cursor SVG to this fields SVG group.
-   * @param {SVGElement} cursorSvg The SVG root of the cursor to be added to the
-   *     field group.
-   * @package
+   * @param cursorSvg The SVG root of the cursor to be added to the field group.
+   * @internal
    */
-  setCursorSvg(cursorSvg) {
+  setCursorSvg(cursorSvg: SVGElement) {
     if (!cursorSvg) {
-      this.cursorSvg_ = null;
+      // AnyDuringMigration because:  Type 'null' is not assignable to type
+      // 'SVGElement'.
+      this.cursorSvg_ = null as AnyDuringMigration;
       return;
     }
 
@@ -1227,13 +1170,14 @@ class Field {
 
   /**
    * Add the marker SVG to this fields SVG group.
-   * @param {SVGElement} markerSvg The SVG root of the marker to be added to the
-   *     field group.
-   * @package
+   * @param markerSvg The SVG root of the marker to be added to the field group.
+   * @internal
    */
-  setMarkerSvg(markerSvg) {
+  setMarkerSvg(markerSvg: SVGElement) {
     if (!markerSvg) {
-      this.markerSvg_ = null;
+      // AnyDuringMigration because:  Type 'null' is not assignable to type
+      // 'SVGElement'.
+      this.markerSvg_ = null as AnyDuringMigration;
       return;
     }
 
@@ -1241,42 +1185,22 @@ class Field {
     this.markerSvg_ = markerSvg;
   }
 
-  /**
-   * Redraw any attached marker or cursor svgs if needed.
-   * @protected
-   */
-  updateMarkers_() {
-    const workspace =
-        /** @type {!WorkspaceSvg} */ (this.sourceBlock_.workspace);
+  /** Redraw any attached marker or cursor svgs if needed. */
+  protected updateMarkers_() {
+    const workspace = this.sourceBlock_.workspace as WorkspaceSvg;
     if (workspace.keyboardAccessibilityMode && this.cursorSvg_) {
-      workspace.getCursor().draw();
+      workspace.getCursor()!.draw();
     }
     if (workspace.keyboardAccessibilityMode && this.markerSvg_) {
       // TODO(#4592): Update all markers on the field.
-      workspace.getMarker(MarkerManager.LOCAL_MARKER).draw();
+      workspace.getMarker(MarkerManager.LOCAL_MARKER)!.draw();
     }
   }
 }
 
 /**
- * The default value for this field.
- * @type {*}
- * @protected
+ * Extra configuration options for the base field.
  */
-Field.prototype.DEFAULT_VALUE = null;
-
-/**
- * Non-breaking space.
- * @const
- */
-Field.NBSP = '\u00A0';
-
-/**
- * A value used to signal when a field's constructor should *not* set the
- * field's value or run configure_, and should allow a subclass to do that
- * instead.
- * @const
- */
-Field.SKIP_SETUP = new Sentinel();
-
-exports.Field = Field;
+export interface FieldConfig {
+  tooltip?: string;
+}