diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
index 179caaa..0fa8e31 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
@@ -789,6 +789,9 @@
 
   suite('_recomputeComments', () => {
     setup(() => {
+      element._changeNum = '1';
+      element._change = {_number: '1'};
+      flushAsynchronousOperations();
       // Fake computeDraftCount as its required for ChangeComments,
       // see gr-comment-api#reloadDrafts.
       sinon.stub(element.$.commentAPI, 'reloadDrafts')
@@ -927,7 +930,9 @@
           rev4: {_number: 4, commit: {parents: []}},
         },
         current_revision: 'rev4',
+        _number: '1',
       };
+      element._changeNum = '1';
       element._commentThreads = THREADS;
       const paperTabs = element.shadowRoot.querySelector('#primaryTabs');
       MockInteractions.tap(paperTabs.querySelectorAll('paper-tab')[3]);
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index 2828cf1..d240f2c 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -14,30 +14,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea.js';
-import '../../../styles/shared-styles.js';
-import '../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.js';
-import '../../plugins/gr-endpoint-param/gr-endpoint-param.js';
-import '../gr-button/gr-button.js';
-import '../gr-dialog/gr-dialog.js';
-import '../gr-date-formatter/gr-date-formatter.js';
-import '../gr-formatted-text/gr-formatted-text.js';
-import '../gr-icons/gr-icons.js';
-import '../gr-overlay/gr-overlay.js';
-import '../gr-rest-api-interface/gr-rest-api-interface.js';
-import '../gr-storage/gr-storage.js';
-import '../gr-textarea/gr-textarea.js';
-import '../gr-tooltip-content/gr-tooltip-content.js';
-import '../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.js';
-import '../gr-account-label/gr-account-label.js';
-import {flush} from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import {htmlTemplate} from './gr-comment_html.js';
-import {KeyboardShortcutMixin} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.js';
-import {getRootElement} from '../../../scripts/rootElement.js';
-import {appContext} from '../../../services/app-context.js';
+import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
+import '../../../styles/shared-styles';
+import '../../plugins/gr-endpoint-decorator/gr-endpoint-decorator';
+import '../../plugins/gr-endpoint-param/gr-endpoint-param';
+import '../gr-button/gr-button';
+import '../gr-dialog/gr-dialog';
+import '../gr-date-formatter/gr-date-formatter';
+import '../gr-formatted-text/gr-formatted-text';
+import '../gr-icons/gr-icons';
+import '../gr-overlay/gr-overlay';
+import '../gr-rest-api-interface/gr-rest-api-interface';
+import '../gr-storage/gr-storage';
+import '../gr-textarea/gr-textarea';
+import '../gr-tooltip-content/gr-tooltip-content';
+import '../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog';
+import '../gr-account-label/gr-account-label';
+import {flush} from '@polymer/polymer/lib/legacy/polymer.dom';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {htmlTemplate} from './gr-comment_html';
+import {KeyboardShortcutMixin} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
+import {getRootElement} from '../../../scripts/rootElement';
+import {appContext} from '../../../services/app-context';
+import {customElement, property, observe} from '@polymer/decorators';
+import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
+import {GrTextarea} from '../gr-textarea/gr-textarea';
+import {GrStorage, StorageLocation} from '../gr-storage/gr-storage';
+import {GrOverlay} from '../gr-overlay/gr-overlay';
+import {
+  RobotCommentInfo,
+  PatchSetNum,
+  CommentInfo,
+  ConfigInfo,
+  AccountDetailInfo,
+} from '../../../types/common';
+import {GrButton} from '../gr-button/gr-button';
+import {GrConfirmDeleteCommentDialog} from '../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog';
+import {GrDialog} from '../gr-dialog/gr-dialog';
 
 const STORAGE_DEBOUNCE_INTERVAL = 400;
 const TOAST_DEBOUNCE_INTERVAL = 200;
@@ -59,7 +74,7 @@
 /**
  * All candidates tips to show, will pick randomly.
  */
-const RESPECTFUL_REVIEW_TIPS= [
+const RESPECTFUL_REVIEW_TIPS = [
   'Assume competence.',
   'Provide rationale or context.',
   'Consider how comments may be interpreted.',
@@ -68,14 +83,39 @@
   'When disagreeing, explain the advantage of your approach.',
 ];
 
-/**
- * @extends PolymerElement
- */
-class GrComment extends KeyboardShortcutMixin(GestureEventListeners(
-    LegacyElementMixin(PolymerElement))) {
-  static get template() { return htmlTemplate; }
+interface Draft {
+  collapsed?: boolean;
+  __editing?: boolean;
+  __otherEditing?: boolean;
+  __draft?: boolean;
+  __draftID?: number;
+  __commentSide?: string;
+}
 
-  static get is() { return 'gr-comment'; }
+export type Comment = Draft & CommentInfo;
+export type RobotComment = Draft & RobotCommentInfo;
+
+interface CommentOverlays {
+  confirmDelete?: GrOverlay | null;
+  confirmDiscard?: GrOverlay | null;
+}
+
+export interface GrComment {
+  $: {
+    restAPI: RestApiService & Element;
+    storage: GrStorage;
+    container: HTMLDivElement;
+    resolvedCheckbox: HTMLInputElement;
+  };
+}
+@customElement('gr-comment')
+export class GrComment extends KeyboardShortcutMixin(
+  GestureEventListeners(LegacyElementMixin(PolymerElement))
+) {
+  static get template() {
+    return htmlTemplate;
+  }
+
   /**
    * Fired when the create fix comment action is triggered.
    *
@@ -118,138 +158,132 @@
    * @event comment-anchor-tap
    */
 
-  static get properties() {
-    return {
-      changeNum: String,
-      /** @type {!Gerrit.Comment} */
-      comment: {
-        type: Object,
-        notify: true,
-        observer: '_commentChanged',
-      },
-      comments: {
-        type: Array,
-      },
-      isRobotComment: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-      disabled: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-      draft: {
-        type: Boolean,
-        value: false,
-        observer: '_draftChanged',
-      },
-      editing: {
-        type: Boolean,
-        value: false,
-        observer: '_editingChanged',
-      },
-      discarding: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-      hasChildren: Boolean,
-      patchNum: String,
-      showActions: Boolean,
-      _showHumanActions: Boolean,
-      _showRobotActions: Boolean,
-      collapsed: {
-        type: Boolean,
-        value: true,
-        reflectToAttribute: true,
-        observer: '_toggleCollapseClass',
-      },
-      /** @type {?} */
-      projectConfig: Object,
-      robotButtonDisabled: Boolean,
-      _hasHumanReply: Boolean,
-      _isAdmin: {
-        type: Boolean,
-        value: false,
-      },
+  @property({type: Number})
+  changeNum!: number;
 
-      _xhrPromise: Object, // Used for testing.
-      _messageText: {
-        type: String,
-        value: '',
-        observer: '_messageTextChanged',
-      },
-      commentSide: String,
-      side: String,
+  @property({type: Object, notify: true, observer: '_commentChanged'})
+  comment!: Comment | RobotComment;
 
-      resolved: Boolean,
+  @property({type: Array})
+  comments?: (Comment | RobotComment)[];
 
-      _numPendingDraftRequests: {
-        type: Object,
-        value:
-          {number: 0}, // Intentional to share the object across instances.
-      },
+  @property({type: Boolean, reflectToAttribute: true})
+  isRobotComment = false;
 
-      _enableOverlay: {
-        type: Boolean,
-        value: false,
-      },
+  @property({type: Boolean, reflectToAttribute: true})
+  disabled = false;
 
-      /**
-       * Property for storing references to overlay elements. When the overlays
-       * are moved to getRootElement() to be shown they are no-longer
-       * children, so they can't be queried along the tree, so they are stored
-       * here.
-       */
-      _overlays: {
-        type: Object,
-        value: () => { return {}; },
-      },
+  @property({type: Boolean, observer: '_draftChanged'})
+  draft = false;
 
-      _showRespectfulTip: {
-        type: Boolean,
-        value: false,
-      },
-      showPatchset: {
-        type: Boolean,
-        value: true,
-      },
-      _respectfulReviewTip: String,
-      _respectfulTipDismissed: {
-        type: Boolean,
-        value: false,
-      },
-      _unableToSave: {
-        type: Boolean,
-        value: false,
-      },
-      _selfAccount: Object,
-    };
-  }
+  @property({type: Boolean, observer: '_editingChanged'})
+  editing = false;
 
-  static get observers() {
-    return [
-      '_commentMessageChanged(comment.message)',
-      '_loadLocalDraft(changeNum, patchNum, comment)',
-      '_isRobotComment(comment)',
-      '_calculateActionstoShow(showActions, isRobotComment)',
-      '_computeHasHumanReply(comment, comments.*)',
-      '_onEditingChange(editing)',
-    ];
-  }
+  @property({type: Boolean, reflectToAttribute: true})
+  discarding = false;
+
+  @property({type: Boolean})
+  hasChildren?: boolean;
+
+  @property({type: String})
+  patchNum!: PatchSetNum;
+
+  @property({type: Boolean})
+  showActions?: boolean;
+
+  @property({type: Boolean})
+  _showHumanActions?: boolean;
+
+  @property({type: Boolean})
+  _showRobotActions?: boolean;
+
+  @property({
+    type: Boolean,
+    reflectToAttribute: true,
+    observer: '_toggleCollapseClass',
+  })
+  collapsed = true;
+
+  @property({type: Object})
+  projectConfig?: ConfigInfo;
+
+  @property({type: Boolean})
+  robotButtonDisabled?: boolean;
+
+  @property({type: Boolean})
+  _hasHumanReply?: boolean;
+
+  @property({type: Boolean})
+  _isAdmin = false;
+
+  @property({type: Object})
+  _xhrPromise?: Promise<any>; // Used for testing.
+
+  @property({type: String, observer: '_messageTextChanged'})
+  _messageText = '';
+
+  @property({type: String})
+  commentSide?: string;
+
+  @property({type: String})
+  side?: string;
+
+  @property({type: Boolean})
+  resolved?: boolean;
+
+  // Intentional to share the object across instances.
+  @property({type: Object})
+  _numPendingDraftRequests: {number: number} = {number: 0};
+
+  @property({type: Boolean})
+  _enableOverlay = false;
+
+  /**
+   * Property for storing references to overlay elements. When the overlays
+   * are moved to getRootElement() to be shown they are no-longer
+   * children, so they can't be queried along the tree, so they are stored
+   * here.
+   */
+  @property({type: Object})
+  _overlays: CommentOverlays = {};
+
+  @property({type: Boolean})
+  _showRespectfulTip = false;
+
+  @property({type: Boolean})
+  showPatchset = true;
+
+  @property({type: String})
+  _respectfulReviewTip?: string;
+
+  @property({type: Boolean})
+  _respectfulTipDismissed = false;
+
+  @property({type: Boolean})
+  _unableToSave = false;
+
+  @property({type: Object})
+  _selfAccount?: AccountDetailInfo;
 
   get keyBindings() {
     return {
       'ctrl+enter meta+enter ctrl+s meta+s': '_handleSaveKey',
-      'esc': '_handleEsc',
+      esc: '_handleEsc',
     };
   }
 
-  constructor() {
-    super();
-    this.reporting = appContext.reportingService;
+  reporting = appContext.reportingService;
+
+  /** @override */
+  ready() {
+    super.ready();
+    if (
+      this.changeNum === undefined ||
+      this.patchNum === undefined ||
+      this.comment === undefined
+    ) {
+      throw new Error('Not all required properties are defined.');
+    }
   }
 
   /** @override */
@@ -261,10 +295,10 @@
     if (this.editing) {
       this.collapsed = false;
     } else if (this.comment) {
-      this.collapsed = this.comment.collapsed;
+      this.collapsed = !!this.comment.collapsed;
     }
     this._getIsAdmin().then(isAdmin => {
-      this._isAdmin = isAdmin;
+      this._isAdmin = !!isAdmin;
     });
   }
 
@@ -277,51 +311,51 @@
     }
   }
 
-  _getAuthor(comment) {
+  _getAuthor(comment: Comment) {
     return comment.author || this._selfAccount;
   }
 
-  _onEditingChange(editing) {
-    this.dispatchEvent(new CustomEvent('comment-editing-changed', {
-      detail: !!editing,
-      bubbles: true,
-      composed: true,
-    }));
+  @observe('editing')
+  _onEditingChange(editing?: boolean) {
+    this.dispatchEvent(
+      new CustomEvent('comment-editing-changed', {
+        detail: !!editing,
+        bubbles: true,
+        composed: true,
+      })
+    );
     if (!editing) return;
     // visibility based on cache this will make sure we only and always show
     // a tip once every Math.max(a day, period between creating comments)
-    const cachedVisibilityOfRespectfulTip =
-      this.$.storage.getRespectfulTipVisibility();
+    const cachedVisibilityOfRespectfulTip = this.$.storage.getRespectfulTipVisibility();
     if (!cachedVisibilityOfRespectfulTip) {
       // we still want to show the tip with a probability of 30%
       if (this.getRandomNum(0, 3) >= 1) return;
       this._showRespectfulTip = true;
       const randomIdx = this.getRandomNum(0, RESPECTFUL_REVIEW_TIPS.length);
       this._respectfulReviewTip = RESPECTFUL_REVIEW_TIPS[randomIdx];
-      this.reporting.reportInteraction(
-          'respectful-tip-appeared',
-          {tip: this._respectfulReviewTip}
-      );
+      this.reporting.reportInteraction('respectful-tip-appeared', {
+        tip: this._respectfulReviewTip,
+      });
       // update cache
       this.$.storage.setRespectfulTipVisibility();
     }
   }
 
   /** Set as a separate method so easy to stub. */
-  getRandomNum(min, max) {
+  getRandomNum(min: number, max: number) {
     return Math.floor(Math.random() * (max - min) + min);
   }
 
-  _computeVisibilityOfTip(showTip, tipDismissed) {
+  _computeVisibilityOfTip(showTip: boolean, tipDismissed: boolean) {
     return showTip && !tipDismissed;
   }
 
   _dismissRespectfulTip() {
     this._respectfulTipDismissed = true;
-    this.reporting.reportInteraction(
-        'respectful-tip-dismissed',
-        {tip: this._respectfulReviewTip}
-    );
+    this.reporting.reportInteraction('respectful-tip-dismissed', {
+      tip: this._respectfulReviewTip,
+    });
     // add a 14-day delay to the tip cache
     this.$.storage.setRespectfulTipVisibility(/* delayDays= */ 14);
   }
@@ -330,16 +364,17 @@
     this.reporting.reportInteraction('respectful-read-more-clicked');
   }
 
-  get textarea() {
-    return this.shadowRoot.querySelector('#editTextarea');
+  get textarea(): GrTextarea | null {
+    return this.shadowRoot?.querySelector('#editTextarea') as GrTextarea | null;
   }
 
   get confirmDeleteOverlay() {
     if (!this._overlays.confirmDelete) {
       this._enableOverlay = true;
       flush();
-      this._overlays.confirmDelete = this.shadowRoot
-          .querySelector('#confirmDeleteOverlay');
+      this._overlays.confirmDelete = this.shadowRoot?.querySelector(
+        '#confirmDeleteOverlay'
+      ) as GrOverlay | null;
     }
     return this._overlays.confirmDelete;
   }
@@ -348,21 +383,23 @@
     if (!this._overlays.confirmDiscard) {
       this._enableOverlay = true;
       flush();
-      this._overlays.confirmDiscard = this.shadowRoot
-          .querySelector('#confirmDiscardOverlay');
+      this._overlays.confirmDiscard = this.shadowRoot?.querySelector(
+        '#confirmDiscardOverlay'
+      ) as GrOverlay | null;
     }
     return this._overlays.confirmDiscard;
   }
 
-  _computeShowHideIcon(collapsed) {
+  _computeShowHideIcon(collapsed: boolean) {
     return collapsed ? 'gr-icons:expand-more' : 'gr-icons:expand-less';
   }
 
-  _computeShowHideAriaLabel(collapsed) {
+  _computeShowHideAriaLabel(collapsed: boolean) {
     return collapsed ? 'Expand' : 'Collapse';
   }
 
-  _calculateActionstoShow(showActions, isRobotComment) {
+  @observe('showActions', 'isRobotComment')
+  _calculateActionstoShow(showActions?: boolean, isRobotComment?: boolean) {
     // Polymer 2: check for undefined
     if ([showActions, isRobotComment].includes(undefined)) {
       return;
@@ -372,7 +409,8 @@
     this._showRobotActions = showActions && isRobotComment;
   }
 
-  _isRobotComment(comment) {
+  @observe('comment')
+  _isRobotComment(comment: RobotComment) {
     this.isRobotComment = !!comment.robot_id;
   }
 
@@ -384,20 +422,18 @@
     return this.$.restAPI.getIsAdmin();
   }
 
-  _computeDraftTooltip(unableToSave) {
-    return unableToSave ? `Unable to save draft. Please try to save again.` :
-      `This draft is only visible to you. To publish drafts, click the 'Reply'`
-    + `or 'Start review' button at the top of the change or press the 'A' key.`;
+  _computeDraftTooltip(unableToSave: boolean) {
+    return unableToSave
+      ? 'Unable to save draft. Please try to save again.'
+      : "This draft is only visible to you. To publish drafts, click the 'Reply'" +
+          "or 'Start review' button at the top of the change or press the 'A' key.";
   }
 
-  _computeDraftText(unableToSave) {
+  _computeDraftText(unableToSave: boolean) {
     return 'DRAFT' + (unableToSave ? '(Failed to save)' : '');
   }
 
-  /**
-   * @param {*=} opt_comment
-   */
-  save(opt_comment) {
+  save(opt_comment?: Comment) {
     let comment = opt_comment;
     if (!comment) {
       comment = this.comment;
@@ -411,29 +447,32 @@
       return this._discardDraft();
     }
 
-    this._xhrPromise = this._saveDraft(comment).then(response => {
-      this.disabled = false;
-      if (!response.ok) { return response; }
-
-      this._eraseDraftComment();
-      return this.$.restAPI.getResponseObject(response).then(obj => {
-        const resComment = obj;
-        resComment.__draft = true;
-        // Maintain the ephemeral draft ID for identification by other
-        // elements.
-        if (this.comment.__draftID) {
-          resComment.__draftID = this.comment.__draftID;
+    this._xhrPromise = this._saveDraft(comment)
+      .then(response => {
+        this.disabled = false;
+        if (!response.ok) {
+          return;
         }
-        resComment.__commentSide = this.commentSide;
-        this.comment = resComment;
-        this._fireSave();
-        return obj;
-      });
-    })
-        .catch(err => {
-          this.disabled = false;
-          throw err;
+
+        this._eraseDraftComment();
+        return this.$.restAPI.getResponseObject(response).then(obj => {
+          const resComment = (obj as unknown) as Comment;
+          resComment.__draft = true;
+          // Maintain the ephemeral draft ID for identification by other
+          // elements.
+          if (this.comment.__draftID) {
+            resComment.__draftID = this.comment.__draftID;
+          }
+          resComment.__commentSide = this.commentSide;
+          this.comment = resComment;
+          this._fireSave();
+          return obj;
         });
+      })
+      .catch(err => {
+        this.disabled = false;
+        throw err;
+      });
 
     return this._xhrPromise;
   }
@@ -443,6 +482,8 @@
     // prior to it being saved.
     this.cancelDebouncer('store');
 
+    if (!this.comment.path || this.comment.line === undefined)
+      throw new Error('Cannot erase Draft Comment');
     this.$.storage.eraseDraftComment({
       changeNum: this.changeNum,
       patchNum: this._getPatchNum(),
@@ -452,57 +493,62 @@
     });
   }
 
-  _commentChanged(comment) {
+  _commentChanged(comment: Comment) {
     this.editing = !!comment.__editing;
     this.resolved = !comment.unresolved;
-    if (this.editing) { // It's a new draft/reply, notify.
+    if (this.editing) {
+      // It's a new draft/reply, notify.
       this._fireUpdate();
     }
   }
 
+  @observe('comment', 'comments.*')
   _computeHasHumanReply() {
     if (!this.comment || !this.comments) return;
     // hide please fix button for robot comment that has human reply
-    this._hasHumanReply = this.comments
-        .some(c => c.in_reply_to && c.in_reply_to === this.comment.id &&
-          !c.robot_id);
+    this._hasHumanReply = this.comments.some(
+      c =>
+        c.in_reply_to &&
+        c.in_reply_to === this.comment.id &&
+        !(c as RobotComment).robot_id
+    );
   }
 
-  /**
-   * @param {!Object=} opt_mixin
-   *
-   * @return {!Object}
-   */
-  _getEventPayload(opt_mixin) {
-    return {...opt_mixin, comment: this.comment,
-      patchNum: this.patchNum};
+  _getEventPayload(opt_mixin?: Record<string, any>) {
+    return {...opt_mixin, comment: this.comment, patchNum: this.patchNum};
   }
 
   _fireSave() {
-    this.dispatchEvent(new CustomEvent('comment-save', {
-      detail: this._getEventPayload(),
-      composed: true, bubbles: true,
-    }));
+    this.dispatchEvent(
+      new CustomEvent('comment-save', {
+        detail: this._getEventPayload(),
+        composed: true,
+        bubbles: true,
+      })
+    );
   }
 
   _fireUpdate() {
     this.debounce('fire-update', () => {
-      this.dispatchEvent(new CustomEvent('comment-update', {
-        detail: this._getEventPayload(),
-        composed: true, bubbles: true,
-      }));
+      this.dispatchEvent(
+        new CustomEvent('comment-update', {
+          detail: this._getEventPayload(),
+          composed: true,
+          bubbles: true,
+        })
+      );
     });
   }
 
-  _computeAccountLabelClass(draft) {
+  _computeAccountLabelClass(draft: boolean) {
     return draft ? 'draft' : '';
   }
 
-  _draftChanged(draft) {
+  _draftChanged(draft: boolean) {
     this.$.container.classList.toggle('draft', draft);
   }
 
-  _editingChanged(editing, previousValue) {
+  _editingChanged(editing?: boolean, previousValue?: boolean) {
     // Polymer 2: observer fires when at least one property is defined.
     // Do nothing to prevent comment.__editing being overwritten
     // if previousValue is undefined
@@ -510,7 +556,9 @@
 
     this.$.container.classList.toggle('editing', editing);
     if (this.comment && this.comment.id) {
-      const cancelButton = this.shadowRoot.querySelector('.cancel');
+      const cancelButton = this.shadowRoot?.querySelector(
+        '.cancel'
+      ) as GrButton | null;
       if (cancelButton) {
         cancelButton.hidden = !editing;
       }
@@ -518,7 +566,7 @@
     if (this.comment) {
       this.comment.__editing = this.editing;
     }
-    if (editing != !!previousValue) {
+    if (!!editing !== !!previousValue) {
       // To prevent event firing on comment creation.
       this._fireUpdate();
     }
@@ -530,27 +578,28 @@
     }
   }
 
-  _computeDeleteButtonClass(isAdmin, draft) {
+  _computeDeleteButtonClass(isAdmin: boolean, draft: boolean) {
     return isAdmin && !draft ? 'showDeleteButtons' : '';
   }
 
-  _computeSaveDisabled(draft, comment, resolved) {
+  _computeSaveDisabled(draft: string, comment: Comment, resolved?: boolean) {
     // If resolved state has changed and a msg exists, save should be enabled.
-    if (!comment || comment.unresolved === resolved && draft) {
+    if (!comment || (comment.unresolved === resolved && draft)) {
       return false;
     }
     return !draft || draft.trim() === '';
   }
 
-  _handleSaveKey(e) {
-    if (!this._computeSaveDisabled(this._messageText, this.comment,
-        this.resolved)) {
+  _handleSaveKey(e: Event) {
+    if (
+      !this._computeSaveDisabled(this._messageText, this.comment, this.resolved)
+    ) {
       e.preventDefault();
       this._handleSave(e);
     }
   }
 
-  _handleEsc(e) {
+  _handleEsc(e: Event) {
     if (!this._messageText.length) {
       e.preventDefault();
       this._handleCancel(e);
@@ -561,7 +610,7 @@
     this.collapsed = !this.collapsed;
   }
 
-  _toggleCollapseClass(collapsed) {
+  _toggleCollapseClass(collapsed: boolean) {
     if (collapsed) {
       this.$.container.classList.add('collapsed');
     } else {
@@ -569,77 +618,92 @@
     }
   }
 
-  _commentMessageChanged(message) {
+  @observe('comment.message')
+  _commentMessageChanged(message: string) {
     this._messageText = message || '';
   }
 
-  _messageTextChanged(newValue, oldValue) {
+  _messageTextChanged(_: string, oldValue: string) {
     if (!this.comment || (this.comment && this.comment.id)) {
       return;
     }
 
-    this.debounce('store', () => {
-      const message = this._messageText;
-      const commentLocation = {
-        changeNum: this.changeNum,
-        patchNum: this._getPatchNum(),
-        path: this.comment.path,
-        line: this.comment.line,
-        range: this.comment.range,
-      };
+    this.debounce(
+      'store',
+      () => {
+        const message = this._messageText;
+        if (!this.comment.path || this.comment.line === undefined)
+          throw new Error('missing path or line in comment');
+        const commentLocation: StorageLocation = {
+          changeNum: this.changeNum,
+          patchNum: this._getPatchNum(),
+          path: this.comment.path,
+          line: this.comment.line,
+          range: this.comment.range,
+        };
 
-      if ((!this._messageText || !this._messageText.length) && oldValue) {
-        // If the draft has been modified to be empty, then erase the storage
-        // entry.
-        this.$.storage.eraseDraftComment(commentLocation);
-      } else {
-        this.$.storage.setDraftComment(commentLocation, message);
-      }
-    }, STORAGE_DEBOUNCE_INTERVAL);
+        if ((!this._messageText || !this._messageText.length) && oldValue) {
+          // If the draft has been modified to be empty, then erase the storage
+          // entry.
+          this.$.storage.eraseDraftComment(commentLocation);
+        } else {
+          this.$.storage.setDraftComment(commentLocation, message);
+        }
+      },
+      STORAGE_DEBOUNCE_INTERVAL
+    );
   }
 
-  _handleAnchorClick(e) {
+  _handleAnchorClick(e: Event) {
     e.preventDefault();
     if (!this.comment.line) {
       return;
     }
-    this.dispatchEvent(new CustomEvent('comment-anchor-tap', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        number: this.comment.line || FILE,
-        side: this.side,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent('comment-anchor-tap', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          number: this.comment.line || FILE,
+          side: this.side,
+        },
+      })
+    );
   }
 
-  _handleEdit(e) {
+  _handleEdit(e: Event) {
     e.preventDefault();
+    if (!this.comment.message) throw new Error('message undefined');
     this._messageText = this.comment.message;
     this.editing = true;
     this.reporting.recordDraftInteraction();
   }
 
-  _handleSave(e) {
+  _handleSave(e: Event) {
     e.preventDefault();
 
     // Ignore saves started while already saving.
     if (this.disabled) {
       return;
     }
-    const timingLabel = this.comment.id ?
-      REPORT_UPDATE_DRAFT : REPORT_CREATE_DRAFT;
+    const timingLabel = this.comment.id
+      ? REPORT_UPDATE_DRAFT
+      : REPORT_CREATE_DRAFT;
     const timer = this.reporting.getTimer(timingLabel);
     this.set('comment.__editing', false);
-    return this.save().then(() => { timer.end(); });
+    return this.save().then(() => {
+      timer.end();
+    });
   }
 
-  _handleCancel(e) {
+  _handleCancel(e: Event) {
     e.preventDefault();
 
-    if (!this.comment.message ||
-        this.comment.message.trim().length === 0 ||
-        !this.comment.id) {
+    if (
+      !this.comment.message ||
+      this.comment.message.trim().length === 0 ||
+      !this.comment.id
+    ) {
       this._fireDiscard();
       return;
     }
@@ -649,33 +713,40 @@
 
   _fireDiscard() {
     this.cancelDebouncer('fire-update');
-    this.dispatchEvent(new CustomEvent('comment-discard', {
-      detail: this._getEventPayload(),
-      composed: true, bubbles: true,
-    }));
+    this.dispatchEvent(
+      new CustomEvent('comment-discard', {
+        detail: this._getEventPayload(),
+        composed: true,
+        bubbles: true,
+      })
+    );
   }
 
   _handleFix() {
-    this.dispatchEvent(new CustomEvent('create-fix-comment', {
-      bubbles: true,
-      composed: true,
-      detail: this._getEventPayload(),
-    }));
+    this.dispatchEvent(
+      new CustomEvent('create-fix-comment', {
+        bubbles: true,
+        composed: true,
+        detail: this._getEventPayload(),
+      })
+    );
   }
 
   _handleShowFix() {
-    this.dispatchEvent(new CustomEvent('open-fix-preview', {
-      bubbles: true,
-      composed: true,
-      detail: this._getEventPayload(),
-    }));
+    this.dispatchEvent(
+      new CustomEvent('open-fix-preview', {
+        bubbles: true,
+        composed: true,
+        detail: this._getEventPayload(),
+      })
+    );
   }
 
-  _hasNoFix(comment) {
-    return !comment || !comment.fix_suggestions;
+  _hasNoFix(comment: Comment) {
+    return !comment || !(comment as RobotComment).fix_suggestions;
   }
 
-  _handleDiscard(e) {
+  _handleDiscard(e: Event) {
     e.preventDefault();
     this.reporting.recordDraftInteraction();
 
@@ -685,21 +756,25 @@
     }
 
     this._openOverlay(this.confirmDiscardOverlay).then(() => {
-      this.confirmDiscardOverlay.querySelector('#confirmDiscardDialog')
-          .resetFocus();
+      const dialog = this.confirmDiscardOverlay?.querySelector(
+        '#confirmDiscardDialog'
+      ) as GrDialog | null;
+      if (dialog) dialog.resetFocus();
     });
   }
 
-  _handleConfirmDiscard(e) {
+  _handleConfirmDiscard(e: Event) {
     e.preventDefault();
     const timer = this.reporting.getTimer(REPORT_DISCARD_DRAFT);
     this._closeConfirmDiscardOverlay();
-    return this._discardDraft().then(() => { timer.end(); });
+    return this._discardDraft().then(() => {
+      timer.end();
+    });
   }
 
   _discardDraft() {
     if (!this.comment.__draft) {
-      throw Error('Cannot discard a non-draft comment.');
+      return Promise.reject(new Error('Cannot discard a non-draft comment.'));
     }
     this.discarding = true;
     this.editing = false;
@@ -709,22 +784,23 @@
     if (!this.comment.id) {
       this.disabled = false;
       this._fireDiscard();
-      return;
+      return Promise.resolve();
     }
 
-    this._xhrPromise = this._deleteDraft(this.comment).then(response => {
-      this.disabled = false;
-      if (!response.ok) {
-        this.discarding = false;
-        return response;
-      }
+    this._xhrPromise = this._deleteDraft(this.comment)
+      .then(response => {
+        this.disabled = false;
+        if (!response.ok) {
+          this.discarding = false;
+        }
 
-      this._fireDiscard();
-    })
-        .catch(err => {
-          this.disabled = false;
-          throw err;
-        });
+        this._fireDiscard();
+        return response;
+      })
+      .catch(err => {
+        this.disabled = false;
+        throw err;
+      });
 
     return this._xhrPromise;
   }
@@ -733,7 +809,7 @@
     this._closeOverlay(this.confirmDiscardOverlay);
   }
 
-  _getSavingMessage(numPending, requestFailed) {
+  _getSavingMessage(numPending: number, requestFailed?: boolean) {
     if (requestFailed) {
       return UNSAVED_MESSAGE;
     }
@@ -763,19 +839,30 @@
     // Cancel the debouncer so that error toasts from the error-manager will
     // not be overridden.
     this.cancelDebouncer('draft-toast');
-    this._updateRequestToast(this._numPendingDraftRequests.number,
-        /* requestFailed=*/true);
+    this._updateRequestToast(
+      this._numPendingDraftRequests.number,
+      /* requestFailed=*/ true
+    );
   }
 
-  _updateRequestToast(numPending, requestFailed) {
+  _updateRequestToast(numPending: number, requestFailed?: boolean) {
     const message = this._getSavingMessage(numPending, requestFailed);
-    this.debounce('draft-toast', () => {
-      // Note: the event is fired on the body rather than this element because
-      // this element may not be attached by the time this executes, in which
-      // case the event would not bubble.
-      document.body.dispatchEvent(new CustomEvent(
-          'show-alert', {detail: {message}, bubbles: true, composed: true}));
-    }, TOAST_DEBOUNCE_INTERVAL);
+    this.debounce(
+      'draft-toast',
+      () => {
+        // Note: the event is fired on the body rather than this element because
+        // this element may not be attached by the time this executes, in which
+        // case the event would not bubble.
+        document.body.dispatchEvent(
+          new CustomEvent('show-alert', {
+            detail: {message},
+            bubbles: true,
+            composed: true,
+          })
+        );
+      },
+      TOAST_DEBOUNCE_INTERVAL
+    );
   }
 
   _handleDraftFailure() {
@@ -784,43 +871,51 @@
     this._handleFailedDraftRequest();
   }
 
-  _saveDraft(draft) {
+  _saveDraft(draft: Comment) {
     this._showStartRequest();
-    return this.$.restAPI.saveDiffDraft(this.changeNum, this.patchNum, draft)
-        .then(result => {
-          if (result.ok) { // remove
-            this._unableToSave = false;
-            this.$.container.classList.remove('unableToSave');
-            this._showEndRequest();
-          } else {
-            this._handleDraftFailure();
-          }
-          return result;
-        })
-        .catch(err => {
+    return this.$.restAPI
+      .saveDiffDraft(this.changeNum, this.patchNum, draft)
+      .then(result => {
+        if (result.ok) {
+          // remove
+          this._unableToSave = false;
+          this.$.container.classList.remove('unableToSave');
+          this._showEndRequest();
+        } else {
           this._handleDraftFailure();
-          throw (err);
-        });
+        }
+        return result;
+      })
+      .catch(err => {
+        this._handleDraftFailure();
+        throw err;
+      });
   }
 
-  _deleteDraft(draft) {
+  _deleteDraft(draft: Comment) {
     this._showStartRequest();
-    return this.$.restAPI.deleteDiffDraft(this.changeNum, this.patchNum,
-        draft).then(result => {
-      if (result.ok) {
-        this._showEndRequest();
-      } else {
-        this._handleFailedDraftRequest();
-      }
-      return result;
-    });
+    return this.$.restAPI
+      .deleteDiffDraft(this.changeNum, this.patchNum, draft)
+      .then(result => {
+        if (result.ok) {
+          this._showEndRequest();
+        } else {
+          this._handleFailedDraftRequest();
+        }
+        return result;
+      });
   }
 
-  _getPatchNum() {
-    return this.isOnParent() ? 'PARENT' : this.patchNum;
+  _getPatchNum(): PatchSetNum {
+    return this.isOnParent() ? ('PARENT' as PatchSetNum) : this.patchNum;
   }
 
-  _loadLocalDraft(changeNum, patchNum, comment) {
+  @observe('changeNum', 'patchNum', 'comment')
+  _loadLocalDraft(
+    changeNum: number,
+    patchNum?: PatchSetNum,
+    comment?: Comment
+  ) {
     // Polymer 2: check for undefined
     if ([changeNum, patchNum, comment].includes(undefined)) {
       return;
@@ -831,8 +926,16 @@
     //
     // Don't get local draft if there is another comment that is currently
     // in an editing state.
-    if (!comment || comment.id || comment.message || comment.__otherEditing) {
-      delete comment.__otherEditing;
+    if (
+      !comment ||
+      comment.id ||
+      comment.message ||
+      comment.__otherEditing ||
+      !comment.path ||
+      !comment.line ||
+      !comment.range
+    ) {
+      if (comment) delete comment.__otherEditing;
       return;
     }
 
@@ -856,10 +959,13 @@
     // the parent by ref.
     const payload = this._getEventPayload();
     payload.comment.unresolved = !this.$.resolvedCheckbox.checked;
-    this.dispatchEvent(new CustomEvent('comment-update', {
-      detail: payload,
-      composed: true, bubbles: true,
-    }));
+    this.dispatchEvent(
+      new CustomEvent('comment-update', {
+        detail: payload,
+        composed: true,
+        bubbles: true,
+      })
+    );
     if (!this.editing) {
       // Save the resolved state immediately.
       this.save(payload.comment);
@@ -874,31 +980,49 @@
     this._closeOverlay(this.confirmDeleteOverlay);
   }
 
-  _openOverlay(overlay) {
+  _openOverlay(overlay?: GrOverlay | null) {
+    if (!overlay) {
+      return Promise.reject(new Error('undefined overlay'));
+    }
     getRootElement().appendChild(overlay);
     return overlay.open();
   }
 
-  _computeHideRunDetails(comment, collapsed) {
+  _computeHideRunDetails(comment: RobotComment, collapsed: boolean) {
     if (!comment) return true;
     return !(comment.robot_id && comment.url && !collapsed);
   }
 
-  _closeOverlay(overlay) {
-    getRootElement().removeChild(overlay);
-    overlay.close();
+  _closeOverlay(overlay?: GrOverlay | null) {
+    if (overlay) {
+      getRootElement().removeChild(overlay);
+      overlay.close();
+    }
   }
 
   _handleConfirmDeleteComment() {
-    const dialog =
-        this.confirmDeleteOverlay.querySelector('#confirmDeleteComment');
-    this.$.restAPI.deleteComment(
-        this.changeNum, this.patchNum, this.comment.id, dialog.message)
-        .then(newComment => {
-          this._handleCancelDeleteComment();
-          this.comment = newComment;
-        });
+    const dialog = this.confirmDeleteOverlay?.querySelector(
+      '#confirmDeleteComment'
+    ) as GrConfirmDeleteCommentDialog | null;
+    if (!dialog || !dialog.message) {
+      throw new Error('missing confirm delete dialog');
+    }
+    this.$.restAPI
+      .deleteComment(
+        this.changeNum,
+        this.patchNum,
+        this.comment.id,
+        dialog.message
+      )
+      .then(newComment => {
+        this._handleCancelDeleteComment();
+        this.comment = newComment;
+      });
   }
 }
 
-customElements.define(GrComment.is, GrComment);
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-comment': GrComment;
+  }
+}
diff --git a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
index f4111e7..3dfe105 100644
--- a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
+++ b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
@@ -3226,7 +3226,7 @@
     commentID: UrlEncodedCommentId,
     reason: string
   ) {
-    return this._getChangeURLAndSend({
+    return (this._getChangeURLAndSend({
       changeNum,
       method: HttpMethod.POST,
       patchNum,
@@ -3234,7 +3234,7 @@
       body: {reason},
       parseResponse: true,
       anonymizedEndpoint: '/comments/*/delete',
-    });
+    }) as unknown) as Promise<CommentInfo>;
   }
 
   /**
diff --git a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.ts b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.ts
index 176f6c9..15914c5 100644
--- a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.ts
+++ b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.ts
@@ -25,7 +25,7 @@
   patchNum: PatchSetNum;
   path: string;
   line: number;
-  range: CommentRange;
+  range?: CommentRange;
 }
 
 export interface StorageObject {
diff --git a/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts b/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
index e8fc3f9..05500ec 100644
--- a/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
+++ b/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
@@ -78,6 +78,7 @@
   GroupAuditEventInfo,
   EncodedGroupId,
   Base64FileContent,
+  UrlEncodedCommentId,
 } from '../../../types/common';
 import {ParsedChangeInfo} from '../../../elements/shared/gr-rest-api-interface/gr-reviewer-updates-parser';
 import {HttpMethod} from '../../../constants/constants';
@@ -604,6 +605,18 @@
     label: string
   ): Promise<Response>;
 
+  deleteComment(
+    changeNum: ChangeNum,
+    patchNum: PatchSetNum,
+    commentID: UrlEncodedCommentId,
+    reason: string
+  ): Promise<CommentInfo>;
+  deleteDiffDraft(
+    changeNum: ChangeNum,
+    patchNum: PatchSetNum,
+    draft: {id: UrlEncodedCommentId}
+  ): Promise<Response>;
+
   deleteChangeCommitMessage(
     changeNum: ChangeNum,
     messageId: ChangeMessageId
diff --git a/polygerrit-ui/app/types/common.ts b/polygerrit-ui/app/types/common.ts
index cc74ef1..eec0fc3 100644
--- a/polygerrit-ui/app/types/common.ts
+++ b/polygerrit-ui/app/types/common.ts
@@ -1039,7 +1039,7 @@
  * The CommentInfo entity contains information about an inline comment.
  * https://gerrit-review.googlesource.com/Documentation/rest-api-changes.html#comment-info
  */
-export interface CommentInfo {
+export interface CommentInfo extends CommentInput {
   patch_set?: PatchSetNum;
   id: UrlEncodedCommentId;
   path?: string;
@@ -1047,9 +1047,9 @@
   parent?: number;
   line?: number;
   range?: CommentRange;
-  in_reply_to?: string;
+  in_reply_to?: UrlEncodedCommentId;
   message?: string;
-  updated: string;
+  updated: Timestamp;
   author?: AccountInfo;
   tag?: string;
   unresolved?: boolean;