Configure compiler in tsconfig.json

Co-authored-by: Mu-An Chiou <[email protected]>

Author: dgraham

.eslintrc.json

@@ -1,14 +1,16 @@
 {
   "extends": [
     "plugin:github/browser",
-    "plugin:github/es6"
+    "plugin:github/es6",
+    "plugin:github/typescript"
   ],
-  "parser": "babel-eslint",
+  "globals": {
+    "RemoteInputElement": "readable"
+  },
   "overrides": [
     {
       "files": "test/**/*.js",
       "rules": {
-        "flowtype/require-valid-file-annotation": "off",
         "github/unescaped-html-literal": "off"
       }
     }

package.json

@@ -12,9 +12,9 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "lint": "github-lint",
+    "lint": "github-lint src/*",
     "prebuild": "npm run clean && npm run lint",
-    "build": "tsc --target es2019 --declaration --outDir dist src/index.ts ",
+    "build": "tsc",
     "pretest": "npm run build",
     "test": "karma start test/karma.config.js",
     "prepublishOnly": "npm run build",

src/index.ts

@@ -1,7 +1,14 @@
 class RemoteInputElement extends HTMLElement {
   currentQuery: string | null
-  debounceInputChange: (Event) => void
-  boundFetchResults: (Event) => void
+  debounceInputChange: (event: Event) => void
+  boundFetchResults: (event: Event) => void
+
+  constructor() {
+    super()
+    this.currentQuery = null
+    this.debounceInputChange = debounce(() => fetchResults(this))
+    this.boundFetchResults = () => fetchResults(this)
+  }
 
   static get observedAttributes() {
     return ['src']
@@ -20,8 +27,6 @@ class RemoteInputElement extends HTMLElement {
     input.setAttribute('autocomplete', 'off')
     input.setAttribute('spellcheck', 'false')
 
-    this.debounceInputChange = debounce(() => fetchResults(this))
-    this.boundFetchResults = () => fetchResults(this)
     input.addEventListener('focus', this.boundFetchResults)
     input.addEventListener('change', this.boundFetchResults)
     input.addEventListener('input', this.debounceInputChange)
@@ -99,8 +104,8 @@ async function fetchResults(remoteInput: RemoteInputElement, checkCurrentQuery:
   remoteInput.dispatchEvent(new CustomEvent('loadend'))
 }
 
-function debounce(callback) {
-  let timeout
+function debounce(callback: () => void) {
+  let timeout: number
   return function() {
     clearTimeout(timeout)
     timeout = setTimeout(() => {

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2019",
+    "strict": true,
+    "declaration": true,
+    "outDir": "dist",
+    "removeComments": true,
+    "preserveConstEnums": true
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}