add typescript

.babelrc

@@ -7,6 +7,7 @@
           "node": "10"
         }
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ]
-}
+}

.eslintrc

@@ -6,7 +6,7 @@
       "jsx": true
     }
   },
-  "extends": ["eslint:recommended"],
+  "extends": ["eslint:recommended", "eslint-config-prettier"],
   "rules": {
     "strict": ["error", "never"]
   },

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

package-lock.json

@@ -110,6 +110,20 @@
         "@babel/types": "^7.7.0"
       }
     },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.0.tgz",
+      "integrity": "sha512-MZiB5qvTWoyiFOgootmRSDV1udjIqJW/8lmxgzKq6oDqxdmHUjeP2ZUOmgHdYjmUVNABqRrHjYAYRvj8Eox/UA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.7.0",
+        "@babel/helper-member-expression-to-functions": "^7.7.0",
+        "@babel/helper-optimise-call-expression": "^7.7.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/helper-replace-supers": "^7.7.0",
+        "@babel/helper-split-export-declaration": "^7.7.0"
+      }
+    },
     "@babel/helper-create-regexp-features-plugin": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.2.tgz",
@@ -425,6 +439,15 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz",
+      "integrity": "sha512-dGwbSMA1YhVS8+31CnPR7LB4pcbrzcV99wQzby4uAfrkZPYZlQ7ImwdpzLqi6Z6IL02b8IAL379CaMwo0x5Lag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-transform-arrow-functions": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz",
@@ -721,6 +744,17 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.2.tgz",
+      "integrity": "sha512-UWhDaJRqdPUtdK1s0sKYdoRuqK0NepjZto2UZltvuCgMoMZmdjhgz5hcRokie/3aYEaSz3xvusyoayVaq4PjRg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.7.0",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-typescript": "^7.2.0"
+      }
+    },
     "@babel/plugin-transform-unicode-regex": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz",
@@ -790,6 +824,16 @@
         "semver": "^5.5.0"
       }
     },
+    "@babel/preset-typescript": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.7.2.tgz",
+      "integrity": "sha512-1B4HthAelaLGfNRyrWqJtBEjXX1ulThCrLQ5B2VOtEAznWFIFXFJahgXImqppy66lx/Oh+cOSCQdJzZqh2Jh5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-transform-typescript": "^7.7.2"
+      }
+    },
     "@babel/template": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
@@ -1503,6 +1547,15 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.5.0.tgz",
+      "integrity": "sha512-cjXp8SbO9VFGW/Z7mbTydqS9to8Z58E5aYhj3e1+Hx7lS9s6gL5ILKNpCqZAFOVYRcSkWPFYljHrEh8QFEK5EQ==",
+      "dev": true,
+      "requires": {
+        "get-stdin": "^6.0.0"
+      }
+    },
     "eslint-scope": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
@@ -2385,6 +2438,12 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "get-stdin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+      "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+      "dev": true
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -3879,6 +3938,12 @@
       "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==",
       "dev": true
     },
+    "typescript": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
+      "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==",
+      "dev": true
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -4,15 +4,22 @@
   "author": "Kent C. Dodds (http://kentcdodds.com/)",
   "license": "GPLv3",
   "scripts": {
-    "build": "babel src --out-dir dist",
+    "build": "babel src --extensions .js,.ts,.tsx --out-dir dist",
     "lint": "eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|json)\""
+    "check-types": "tsc",
+    "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json|ts|tsx)\"",
+    "format": "npm run prettier -- --write",
+    "check-format": "npm run prettier -- --list-different",
+    "validate": "npm run check-types && npm run check-format && npm run lint && npm run build"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.2",
     "@babel/preset-env": "^7.7.1",
+    "@babel/preset-typescript": "^7.7.2",
     "eslint": "^6.6.0",
-    "prettier": "^1.19.1"
+    "eslint-config-prettier": "^6.5.0",
+    "prettier": "^1.19.1",
+    "typescript": "^3.7.2"
   }
 }

src/example.js

@@ -1,10 +1,10 @@
-const username = "freddy";
-typeof username === "string";
+const username = 'freddy'
+typeof username === 'string'
 
-if (!("serviceWorker" in navigator)) {
+if (!('serviceWorker' in navigator)) {
   // you have an old browser :-(
 }
 
-const greeting = "hello";
-console.log(`${greeting} world!`);
-[1, 2, 3].forEach(x => console.log(x));
+const greeting = 'hello'
+console.log(`${greeting} world!`)
+;[1, 2, 3].forEach(x => console.log(x))

src/typescript-example.ts

@@ -0,0 +1,21 @@
+function add(a: number, b: number): number {
+  return a + b
+}
+
+interface User {
+  name: {
+    first: string
+    middle: string
+    last: string
+  }
+}
+function getFullName(user: User): string {
+  const {
+    name: {first, middle, last},
+  } = user
+  return [first, middle, last].filter(Boolean).join('')
+}
+
+add(1, 2)
+
+getFullName({name: {first: 'Joe', middle: 'Bud', last: 'Matthews'}})

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "./src"
+  }
+}