diff --git a/polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts b/polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts
index 9062a3f2ec..27866ee297 100644
--- a/polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-create-destination-dialog/gr-create-destination-dialog.ts
@@ -15,43 +15,52 @@
  * limitations under the License.
  */
 
-import '../../shared/gr-dialog/gr-dialog.js';
-import '../../shared/gr-overlay/gr-overlay.js';
-import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker.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-create-destination-dialog_html.js';
+import '../../shared/gr-dialog/gr-dialog';
+import '../../shared/gr-overlay/gr-overlay';
+import '../../shared/gr-repo-branch-picker/gr-repo-branch-picker';
+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-create-destination-dialog_html';
+import {customElement, property} from '@polymer/decorators';
+import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
+import {RepoName, BranchName} from '../../../types/common';
 
 /**
  * Fired when a destination has been picked. Event details contain the repo
  * name and the branch name.
  *
  * @event confirm
- * @extends PolymerElement
  */
-class GrCreateDestinationDialog extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
+export interface GrCreateDestinationDialog {
+  $: {
+    createOverlay: GrOverlay;
+  };
+}
 
-  static get is() { return 'gr-create-destination-dialog'; }
-
-  static get properties() {
-    return {
-      _repo: String,
-      _branch: String,
-      _repoAndBranchSelected: {
-        type: Boolean,
-        value: false,
-        computed: '_computeRepoAndBranchSelected(_repo, _branch)',
-      },
-    };
+@customElement('gr-create-destination-dialog')
+export class GrCreateDestinationDialog extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
   }
 
+  @property({type: String})
+  _repo?: RepoName;
+
+  @property({type: String})
+  _branch?: BranchName;
+
+  @property({
+    type: Boolean,
+    computed: '_computeRepoAndBranchSelected(_repo, _branch)',
+  })
+  _repoAndBranchSelected = false;
+
   open() {
-    this._repo = '';
-    this._branch = '';
+    this._repo = '' as RepoName;
+    this._branch = '' as BranchName;
     this.$.createOverlay.open();
   }
 
@@ -59,7 +68,7 @@ class GrCreateDestinationDialog extends GestureEventListeners(
     this.$.createOverlay.close();
   }
 
-  _pickerConfirm(e) {
+  _pickerConfirm(e: Event) {
     this.$.createOverlay.close();
     const detail = {repo: this._repo, branch: this._branch};
     // e is a 'confirm' event from gr-dialog. We want to fire a more detailed
@@ -69,10 +78,13 @@ class GrCreateDestinationDialog extends GestureEventListeners(
     this.dispatchEvent(new CustomEvent('confirm', {detail, bubbles: false}));
   }
 
-  _computeRepoAndBranchSelected(repo, branch) {
+  _computeRepoAndBranchSelected(repo?: RepoName, branch?: BranchName) {
     return !!(repo && branch);
   }
 }
 
-customElements.define(GrCreateDestinationDialog.is,
-    GrCreateDestinationDialog);
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-create-destination-dialog': GrCreateDestinationDialog;
+  }
+}
diff --git a/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts
index d17f7d8565..2118a8be93 100644
--- a/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts
+++ b/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.ts
@@ -14,68 +14,63 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '../gr-autocomplete/gr-autocomplete.js';
-import '../../../styles/shared-styles.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-labeled-autocomplete_html.js';
+import '../gr-autocomplete/gr-autocomplete';
+import '../../../styles/shared-styles';
+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-labeled-autocomplete_html';
+import {customElement, property} from '@polymer/decorators';
+import {
+  GrAutocomplete,
+  AutocompleteQuery,
+} from '../gr-autocomplete/gr-autocomplete';
 
-/** @extends PolymerElement */
-class GrLabeledAutocomplete extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
+export interface GrLabeledAutocomplete {
+  $: {
+    autocomplete: GrAutocomplete;
+  };
+}
+@customElement('gr-labeled-autocomplete')
+export class GrLabeledAutocomplete extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
+  }
 
-  static get is() { return 'gr-labeled-autocomplete'; }
   /**
    * Fired when a value is chosen.
    *
    * @event commit
    */
 
-  static get properties() {
-    return {
+  @property({type: Object})
+  query: AutocompleteQuery = () => Promise.resolve([]);
 
-      /**
-       * Used just like the query property of gr-autocomplete.
-       *
-       * @type {function(string): Promise<?>}
-       */
-      query: {
-        type: Function,
-        value() {
-          return function() {
-            return Promise.resolve([]);
-          };
-        },
-      },
+  @property({type: String, notify: true})
+  text = '';
 
-      text: {
-        type: String,
-        value: '',
-        notify: true,
-      },
-      label: String,
-      placeholder: String,
-      disabled: Boolean,
+  @property({type: String})
+  label?: string;
 
-      _autocompleteThreshold: {
-        type: Number,
-        value: 0,
-        readOnly: true,
-      },
-    };
-  }
+  @property({type: String})
+  placeholder?: string;
 
-  _handleTriggerClick(e) {
+  @property({type: Boolean})
+  disabled?: boolean;
+
+  @property({type: Number, readOnly: true})
+  _autocompleteThreshold = 0;
+
+  _handleTriggerClick(e: Event) {
     // Stop propagation here so we don't confuse gr-autocomplete, which
     // listens for taps on body to try to determine when it's blurred.
     e.stopPropagation();
     this.$.autocomplete.focus();
   }
 
-  setText(text) {
+  setText(text: string) {
     this.$.autocomplete.setText(text);
   }
 
@@ -84,4 +79,8 @@ class GrLabeledAutocomplete extends GestureEventListeners(
   }
 }
 
-customElements.define(GrLabeledAutocomplete.is, GrLabeledAutocomplete);
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-labeled-autocomplete': GrLabeledAutocomplete;
+  }
+}
diff --git a/polygerrit-ui/app/elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts b/polygerrit-ui/app/elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts
index 746fcf8ccc..1b2d6fc67d 100644
--- a/polygerrit-ui/app/elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts
+++ b/polygerrit-ui/app/elements/shared/gr-repo-branch-picker/gr-repo-branch-picker.ts
@@ -14,55 +14,64 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '@polymer/iron-icon/iron-icon.js';
-import '../../../styles/shared-styles.js';
-import '../gr-icons/gr-icons.js';
-import '../gr-labeled-autocomplete/gr-labeled-autocomplete.js';
-import '../gr-rest-api-interface/gr-rest-api-interface.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-repo-branch-picker_html.js';
-import {singleDecodeURL} from '../../../utils/url-util.js';
+import '@polymer/iron-icon/iron-icon';
+import '../../../styles/shared-styles';
+import '../gr-icons/gr-icons';
+import '../gr-labeled-autocomplete/gr-labeled-autocomplete';
+import '../gr-rest-api-interface/gr-rest-api-interface';
+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-repo-branch-picker_html';
+import {singleDecodeURL} from '../../../utils/url-util';
+import {customElement, property} from '@polymer/decorators';
+import {AutocompleteQuery} from '../gr-autocomplete/gr-autocomplete';
+import {
+  BranchName,
+  RepoName,
+  ProjectInfoWithName,
+  BranchInfo,
+} from '../../../types/common';
+import {GrLabeledAutocomplete} from '../gr-labeled-autocomplete/gr-labeled-autocomplete';
+import {GrRestApiInterface} from '../gr-rest-api-interface/gr-rest-api-interface';
 
 const SUGGESTIONS_LIMIT = 15;
 const REF_PREFIX = 'refs/heads/';
 
-/**
- * @extends PolymerElement
- */
-class GrRepoBranchPicker extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
+export interface GrRepoBranchPicker {
+  $: {
+    repoInput: GrLabeledAutocomplete;
+    branchInput: GrLabeledAutocomplete;
+    restAPI: GrRestApiInterface;
+  };
+}
+@customElement('gr-repo-branch-picker')
+export class GrRepoBranchPicker extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
+  }
 
-  static get is() { return 'gr-repo-branch-picker'; }
+  @property({type: String, notify: true, observer: '_repoChanged'})
+  repo?: RepoName;
 
-  static get properties() {
-    return {
-      repo: {
-        type: String,
-        notify: true,
-        observer: '_repoChanged',
-      },
-      branch: {
-        type: String,
-        notify: true,
-      },
-      _branchDisabled: Boolean,
-      _query: {
-        type: Function,
-        value() {
-          return this._getRepoBranchesSuggestions.bind(this);
-        },
-      },
-      _repoQuery: {
-        type: Function,
-        value() {
-          return this._getRepoSuggestions.bind(this);
-        },
-      },
-    };
+  @property({type: String, notify: true})
+  branch?: BranchName;
+
+  @property({type: Boolean})
+  _branchDisabled?: boolean;
+
+  @property({type: Object})
+  _query?: AutocompleteQuery;
+
+  @property({type: Object})
+  _repoQuery?: AutocompleteQuery;
+
+  constructor() {
+    super();
+    this._query = input => this._getRepoBranchesSuggestions(input);
+    this._repoQuery = input => this._getRepoSuggestions(input);
   }
 
   /** @override */
@@ -79,21 +88,26 @@ class GrRepoBranchPicker extends GestureEventListeners(
     this._branchDisabled = !this.repo;
   }
 
-  _getRepoBranchesSuggestions(input) {
-    if (!this.repo) { return Promise.resolve([]); }
+  _getRepoBranchesSuggestions(input: string) {
+    if (!this.repo) {
+      return Promise.resolve([]);
+    }
     if (input.startsWith(REF_PREFIX)) {
       input = input.substring(REF_PREFIX.length);
     }
-    return this.$.restAPI.getRepoBranches(input, this.repo, SUGGESTIONS_LIMIT)
-        .then(this._branchResponseToSuggestions.bind(this));
+    return this.$.restAPI
+      .getRepoBranches(input, this.repo, SUGGESTIONS_LIMIT)
+      .then(res => this._branchResponseToSuggestions(res));
   }
 
-  _getRepoSuggestions(input) {
-    return this.$.restAPI.getRepos(input, SUGGESTIONS_LIMIT)
-        .then(this._repoResponseToSuggestions.bind(this));
+  _getRepoSuggestions(input: string) {
+    return this.$.restAPI
+      .getRepos(input, SUGGESTIONS_LIMIT)
+      .then(res => this._repoResponseToSuggestions(res));
   }
 
-  _repoResponseToSuggestions(res) {
+  _repoResponseToSuggestions(res: ProjectInfoWithName[] | undefined) {
+    if (!res) return [];
     return res.map(repo => {
       return {
         name: repo.name,
@@ -102,22 +116,25 @@ class GrRepoBranchPicker extends GestureEventListeners(
     });
   }
 
-  _branchResponseToSuggestions(res) {
-    return Object.keys(res).map(key => {
-      let branch = res[key].ref;
-      if (branch.startsWith(REF_PREFIX)) {
-        branch = branch.substring(REF_PREFIX.length);
+  _branchResponseToSuggestions(res: BranchInfo[] | undefined) {
+    if (!res) return [];
+    return res.map(branchInfo => {
+      let branch;
+      if (branchInfo.ref.startsWith(REF_PREFIX)) {
+        branch = branchInfo.ref.substring(REF_PREFIX.length);
+      } else {
+        branch = branchInfo.ref;
       }
       return {name: branch, value: branch};
     });
   }
 
-  _repoCommitted(e) {
-    this.repo = e.detail.value;
+  _repoCommitted(e: CustomEvent<{value: string}>) {
+    this.repo = e.detail.value as RepoName;
   }
 
-  _branchCommitted(e) {
-    this.branch = e.detail.value;
+  _branchCommitted(e: CustomEvent<{value: string}>) {
+    this.branch = e.detail.value as BranchName;
   }
 
   _repoChanged() {
@@ -126,4 +143,8 @@ class GrRepoBranchPicker extends GestureEventListeners(
   }
 }
 
-customElements.define(GrRepoBranchPicker.is, GrRepoBranchPicker);
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-repo-branch-picker': GrRepoBranchPicker;
+  }
+}