diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js
deleted file mode 100644
index f019cc0..0000000
--- a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import './index';
-import { $$ } from 'common-sk/modules/dom';
-import { blamelist19, fakeNow } from './demo_data';
-import { testOnlySetSettings } from '../settings';
-
-Date.now = () => fakeNow;
-
-testOnlySetSettings({
-  baseRepoURL: 'https://github.com/example/example',
-});
-
-let ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19.slice(0, 1);
-$$('#single_commit').appendChild(ele);
-
-ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19.slice(0, 3);
-$$('#some_commits').appendChild(ele);
-
-ele = document.createElement('blamelist-panel-sk');
-ele.commits = blamelist19;
-$$('#many_commits').appendChild(ele);
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts
new file mode 100644
index 0000000..aff5d09
--- /dev/null
+++ b/golden/modules/blamelist-panel-sk/blamelist-panel-sk-demo.ts
@@ -0,0 +1,23 @@
+import './index';
+import { $$ } from 'common-sk/modules/dom';
+import { BlamelistPanelSk } from './blamelist-panel-sk';
+import { blamelist19, fakeNow } from './demo_data';
+import { testOnlySetSettings } from '../settings';
+
+Date.now = () => fakeNow;
+
+testOnlySetSettings({
+  baseRepoURL: 'https://github.com/example/example',
+});
+
+let ele = new BlamelistPanelSk();
+ele.commits = blamelist19.slice(0, 1);
+$$('#single_commit')!.appendChild(ele);
+
+ele = new BlamelistPanelSk();
+ele.commits = blamelist19.slice(0, 3);
+$$('#some_commits')!.appendChild(ele);
+
+ele = new BlamelistPanelSk();
+ele.commits = blamelist19;
+$$('#many_commits')!.appendChild(ele);
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.js b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
similarity index 62%
rename from golden/modules/blamelist-panel-sk/blamelist-panel-sk.js
rename to golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
index ad9d5e6..c4ad2ae 100644
--- a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.js
+++ b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
@@ -15,16 +15,16 @@
 
 const maxCommitsToDisplay = 15;
 
-const template = (ele) => html`
+const template = (ele: BlamelistPanelSk) => html`
 <h2>Commits:</h2>
 <table>
-  ${ele._commits.slice(0, maxCommitsToDisplay).map(commitRow)}
+  ${ele.commits.slice(0, maxCommitsToDisplay).map(commitRow)}
 </table>
 <div>
-  ${ele._commits.length > maxCommitsToDisplay ? '...and other commits.' : ''}
+  ${ele.commits.length > maxCommitsToDisplay ? '...and other commits.' : ''}
 </div>`;
 
-const commitRow = (c) => html`
+const commitRow = (c: Commit) => html`
 <tr>
   <td title=${c.author}>${truncateWithEllipses(c.author, 20)}</td>
   <td title=${new Date(c.commit_time * 1000)}>
@@ -35,8 +35,8 @@
 </tr>
 `;
 
-const commitHref = (commit) => {
-  // TODO(kjlubick) deduplicate with by-blame-sk
+const commitHref = (commit: Commit) => {
+  // TODO(kjlubick): Deduplicate with by-blame-sk.
   const repo = baseRepoURL();
   if (!repo) {
     throw new DOMException('repo not set in settings');
@@ -47,11 +47,23 @@
   return `${repo}/+show/${commit.hash}`;
 };
 
-define('blamelist-panel-sk', class extends ElementSk {
+/**
+ * Represents a Git commit.
+ * 
+ * Client-side equivalent of frontend.Commit Go type.
+ */
+export interface Commit {
+  readonly hash: string;
+  readonly author: string;
+  readonly message: string;
+  readonly commit_time: number;
+};
+
+export class BlamelistPanelSk extends ElementSk {
+  private _commits: Commit[] = [];
+
   constructor() {
     super(template);
-
-    this._commits = [];
   }
 
   connectedCallback() {
@@ -59,15 +71,12 @@
     this._render();
   }
 
-  /**
-   * @prop commits {Array<Object>} the commits to show. The objects should have string fields:
-   *   author, message, hash and a field commit_time that is the number of seconds since the epoch.
-   *   See frontend.Commit on the server side for more.
-   */
-  get commits() { return this._commits; }
+  get commits(): Commit[] { return this._commits; }
 
-  set commits(arr) {
-    this._commits = arr;
+  set commits(commits: Commit[]) {
+    this._commits = commits;
     this._render();
   }
-});
+};
+
+define('blamelist-panel-sk', BlamelistPanelSk);
diff --git a/golden/modules/blamelist-panel-sk/demo_data.js b/golden/modules/blamelist-panel-sk/demo_data.ts
similarity index 97%
rename from golden/modules/blamelist-panel-sk/demo_data.js
rename to golden/modules/blamelist-panel-sk/demo_data.ts
index 890a839..2fe86cb 100644
--- a/golden/modules/blamelist-panel-sk/demo_data.js
+++ b/golden/modules/blamelist-panel-sk/demo_data.ts
@@ -1,6 +1,8 @@
+import { Commit } from './blamelist-panel-sk';
+
 export const fakeNow = Date.parse('2020-03-22T00:00:00.000Z');
 
-export const blamelist19 = [
+export const blamelist19: Commit[] = [
   {
     commit_time: 1584835000,
     hash: 'dded3c7506efc5635e60ffb7a908cbe8f1f028f1',
diff --git a/golden/modules/blamelist-panel-sk/index.js b/golden/modules/blamelist-panel-sk/index.ts
similarity index 100%
rename from golden/modules/blamelist-panel-sk/index.js
rename to golden/modules/blamelist-panel-sk/index.ts