Install TypeScript

Author: charlesfries

.eslintrc.js

@@ -2,15 +2,11 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
-    },
+    ecmaVersion: 'latest',
   },
-  plugins: ['ember'],
+  plugins: ['ember', '@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:prettier/recommended',
@@ -21,6 +17,15 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
     // node files
     {
       files: [

addon/index.js addon/index.ts

@@ -4,7 +4,7 @@ const managedKeys = new Set();
 const localStorageCache = new TrackedMap();
 
 // like JSON.parse() but all returned objects are frozen
-function jsonParseAndFreeze(json) {
+function jsonParseAndFreeze(json: string) {
   return JSON.parse(json, (key, value) =>
     typeof value === 'object' ? Object.freeze(value) : value
   );
@@ -22,19 +22,23 @@ window.addEventListener('storage', function ({ key, newValue }) {
     return;
   }
 
-  localStorageCache.set(key, jsonParseAndFreeze(newValue));
+  localStorageCache.set(key, jsonParseAndFreeze(newValue as string));
 });
 
-export default function localStorageDecoratorFactory(...args) {
+export default function localStorageDecoratorFactory(...args: unknown[]) {
   const isDirectDecoratorInvocation = isElementDescriptor(...args);
   const customLocalStorageKey = isDirectDecoratorInvocation
     ? undefined
     : args[0];
 
-  function localStorageDecorator(target, key, descriptor) {
+  function localStorageDecorator(
+    target: unknown,
+    key: PropertyKey,
+    descriptor: PropertyDecorator & { initializer: () => void }
+  ) {
     const localStorageKey = customLocalStorageKey ?? key;
 
-    initalizeLocalStorageKey(localStorageKey);
+    initalizeLocalStorageKey(localStorageKey as string);
 
     // register getter and setter
     return {
@@ -46,21 +50,22 @@ export default function localStorageDecoratorFactory(...args) {
             : undefined)
         );
       },
-      set(value) {
+      set(value: unknown) {
         const json = JSON.stringify(value);
 
         // Update local storage cache. It must include a froozen copy the
         // the value to prevent leaking state between different consumers.
         localStorageCache.set(localStorageKey, jsonParseAndFreeze(json));
 
         // Update local storage.
-        window.localStorage.setItem(localStorageKey, json);
+        window.localStorage.setItem(localStorageKey as string, json);
       },
     };
   }
 
   return isDirectDecoratorInvocation
-    ? localStorageDecorator(...args)
+    ? // @ts-expect-error A spread argument must either have a tuple type or be passed to a rest parameter.
+      localStorageDecorator(...args)
     : localStorageDecorator;
 }
 
@@ -69,7 +74,7 @@ export function clearLocalStorageCache() {
   localStorageCache.clear();
 }
 
-export function initalizeLocalStorageKey(key) {
+export function initalizeLocalStorageKey(key: string) {
   // Check if key is already managed. If it is not managed yet, initialize it
   // in localStorageCache with the current value in local storage.
   // Need to use a separate, not tracked data store to do this check
@@ -79,7 +84,7 @@ export function initalizeLocalStorageKey(key) {
     managedKeys.add(key);
     localStorageCache.set(
       key,
-      jsonParseAndFreeze(window.localStorage.getItem(key))
+      jsonParseAndFreeze(window.localStorage.getItem(key) as string)
     );
   }
 }
@@ -88,8 +93,8 @@ export function initalizeLocalStorageKey(key) {
 //
 // Borrowed from the Ember Data source code:
 // https://github.com/emberjs/data/blob/22a8f20e2f11ed82c85160944e976073dc530d8b/packages/model/addon/-private/util.ts#L5
-function isElementDescriptor(...args) {
-  let [maybeTarget, maybeKey, maybeDescriptor] = args;
+function isElementDescriptor(...args: unknown[]) {
+  const [maybeTarget, maybeKey, maybeDescriptor] = args;
 
   return (
     // Ensure we have the right number of args

ember-cli-build.js

@@ -4,6 +4,8 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function (defaults) {
   let app = new EmberAddon(defaults, {
+    'ember-cli-babel': { enableTypeScriptTransform: true },
+
     // Add options here
   });
 

index.js

@@ -2,4 +2,8 @@
 
 module.exports = {
   name: require('./package').name,
+
+  options: {
+    'ember-cli-babel': { enableTypeScriptTransform: true },
+  },
 };

package.json

@@ -17,6 +17,9 @@
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
+    "lint:types": "tsc --noEmit",
+    "prepack": "tsc --project tsconfig.declarations.json",
+    "postpack": "rimraf declarations",
     "start": "ember serve",
     "test": "npm-run-all lint:* test:*",
     "test:ember": "ember test",
@@ -32,7 +35,13 @@
     "@ember/test-helpers": "^2.4.2",
     "@glimmer/component": "^1.0.2",
     "@glimmer/tracking": "^1.0.2",
-    "babel-eslint": "^10.1.0",
+    "@glint/environment-ember-loose": "^1.4.0",
+    "@glint/template": "^1.4.0",
+    "@tsconfig/ember": "^3.0.8",
+    "@types/qunit": "^2.19.10",
+    "@types/rsvp": "^4.0.9",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.0.0",
     "ember-cli": "~4.11.0",
@@ -63,6 +72,8 @@
     "qunit-dom": "^2.0.0",
     "release-it": "^15.0.0",
     "release-it-lerna-changelog": "^5.0.0",
+    "rimraf": "^5.0.1",
+    "typescript": "^5.4.5",
     "webpack": "^5.60.0"
   },
   "engines": {

tests/dummy/app/app.js tests/dummy/app/app.ts

@@ -0,0 +1,14 @@
+/**
+ * Type declarations for
+ *    import config from 'dummy/config/environment'
+ */
+declare const config: {
+  environment: string;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: 'history' | 'hash' | 'none';
+  rootURL: string;
+  APP: Record<string, unknown>;
+};
+
+export default config;

tests/dummy/app/config/environment.d.ts

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "declarations",
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "rootDir": "."
+  },
+  "include": ["addon", "addon-test-support"]
+}

tests/test-helper.js tests/test-helper.ts

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "compilerOptions": {
+    // The combination of `baseUrl` with `paths` allows Ember's classic package
+    // layout, which is not resolvable with the Node resolution algorithm, to
+    // work with TypeScript.
+    "baseUrl": ".",
+    "paths": {
+      "dummy/tests/*": ["tests/*"],
+      "dummy/*": ["tests/dummy/app/*", "app/*"],
+      "ember-local-storage-decorator": ["addon"],
+      "ember-local-storage-decorator/*": ["addon/*"],
+      "ember-local-storage-decorator/test-support": ["addon-test-support"],
+      "ember-local-storage-decorator/test-support/*": ["addon-test-support/*"],
+      "*": ["types/*"]
+    }
+  }
+}

tsconfig.declarations.json

@@ -0,0 +1,4 @@
+import '@glint/environment-ember-loose';
+
+import 'ember-source/types';
+import 'ember-source/types/preview';