Clean up types

Author: charlesfries

addon/index.ts

@@ -1,5 +1,7 @@
 import { TrackedMap } from 'tracked-maps-and-sets';
 
+type PropertyDescriptorInit = PropertyDescriptor & { initializer: () => void };
+
 const managedKeys = new Set();
 const localStorageCache = new TrackedMap();
 
@@ -25,16 +27,29 @@ window.addEventListener('storage', function ({ key, newValue }) {
   localStorageCache.set(key, jsonParseAndFreeze(newValue as string));
 });
 
-export default function localStorageDecoratorFactory(...args: unknown[]) {
+export default function localStorageDecoratorFactory(
+  target: unknown,
+  propertyKey: PropertyKey
+): void;
+
+export default function localStorageDecoratorFactory(
+  customLocalStorageKey: string
+): (
+  target: unknown,
+  propertyKey: PropertyKey,
+  descriptor: PropertyDescriptorInit
+) => void;
+
+export default function localStorageDecoratorFactory(
+  ...args: [unknown, PropertyKey, PropertyDescriptorInit]
+) {
   const isDirectDecoratorInvocation = isElementDescriptor(...args);
   const customLocalStorageKey = isDirectDecoratorInvocation
     ? undefined
     : args[0];
 
   function localStorageDecorator(
-    target: unknown,
-    key: PropertyKey,
-    descriptor: PropertyDecorator & { initializer: () => void }
+    ...[target, key, descriptor]: [unknown, PropertyKey, PropertyDescriptorInit]
   ) {
     const localStorageKey = customLocalStorageKey ?? key;
 
@@ -45,7 +60,7 @@ export default function localStorageDecoratorFactory(...args: unknown[]) {
       get() {
         return (
           localStorageCache.get(localStorageKey) ??
-          (descriptor.initializer
+          (descriptor?.initializer
             ? descriptor.initializer.call(target)
             : undefined)
         );
@@ -64,8 +79,7 @@ export default function localStorageDecoratorFactory(...args: unknown[]) {
   }
 
   return isDirectDecoratorInvocation
-    ? // @ts-expect-error A spread argument must either have a tuple type or be passed to a rest parameter.
-      localStorageDecorator(...args)
+    ? localStorageDecorator(...args)
     : localStorageDecorator;
 }
 
@@ -82,18 +96,22 @@ export function initalizeLocalStorageKey(key: string) {
   // before it is set.
   if (!managedKeys.has(key)) {
     managedKeys.add(key);
-    localStorageCache.set(
-      key,
-      jsonParseAndFreeze(window.localStorage.getItem(key) as string)
-    );
+
+    const item = window.localStorage.getItem(key);
+    if (item === null) {
+      throw new Error();
+    }
+    localStorageCache.set(key, jsonParseAndFreeze(item));
   }
 }
 
 // This will detect if the function arguments match the legacy decorator pattern
 //
 // Borrowed from the Ember Data source code:
 // https://github.com/emberjs/data/blob/22a8f20e2f11ed82c85160944e976073dc530d8b/packages/model/addon/-private/util.ts#L5
-function isElementDescriptor(...args: unknown[]) {
+function isElementDescriptor(
+  ...args: [unknown, PropertyKey, PropertyDescriptor]
+): boolean {
   const [maybeTarget, maybeKey, maybeDescriptor] = args;
 
   return (

tests/dummy/app/components/test-component.js tests/dummy/app/components/test-component.ts

@@ -4,10 +4,10 @@ import localStorage from 'ember-local-storage-decorator';
 
 export default class TestComponentComponent extends Component {
   @localStorage
-  foo;
+  foo: unknown;
 
   @localStorage
-  bar;
+  bar: unknown;
 
   @action
   updateFoo() {

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

@@ -15,21 +15,24 @@ module('Integration | Component | test-component', function (hooks) {
   test('it works inside a component', async function (assert) {
     await render(hbs`<TestComponent />`);
     assert.dom().hasText('');
-    assert.equal(JSON.parse(window.localStorage.getItem('foo')), null);
+    assert.equal(JSON.parse(window.localStorage.getItem('foo')!), null);
 
     await click('button');
     assert.dom().hasText('foo');
-    assert.equal(JSON.parse(window.localStorage.getItem('foo')), 'foo');
+    assert.equal(JSON.parse(window.localStorage.getItem('foo')!), 'foo');
   });
 
   test('setting one property does not invalidate another', async function (assert) {
-    let invalidationCounter = {
+    const invalidationCounter = {
       foo: 0,
       bar: 0,
     };
-    this.set('invalidationTracker', (property) => {
-      invalidationCounter[property]++;
-    });
+    this.set(
+      'invalidationTracker',
+      (property: keyof typeof invalidationCounter) => {
+        invalidationCounter[property]++;
+      }
+    );
     await render(
       hbs`<TestComponent @onInvalidation={{this.invalidationTracker}} />`
     );

tests/integration/components/test-component-test.js tests/integration/components/test-component-test.ts

@@ -16,7 +16,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
   module('default values', function () {
     test('it defaults to null', function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown;
       })();
 
       assert.equal(klass.foo, null);
@@ -46,7 +46,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
       window.localStorage.setItem('foo', JSON.stringify('baz'));
 
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: string | undefined;
       })();
 
       assert.equal(klass.foo, 'baz');
@@ -56,19 +56,19 @@ module('Unit | Decorator | @localStorage', function (hooks) {
       window.localStorage.setItem('foo', JSON.stringify([{ bar: 'baz' }]));
 
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown[] | undefined;
       })();
 
       assert.deepEqual(klass.foo, [{ bar: 'baz' }]);
       assert.ok(Object.isFrozen(klass.foo), 'freezes complex value');
-      assert.ok(Object.isFrozen(klass.foo[0]), 'deep freezes complex value');
+      assert.ok(Object.isFrozen(klass.foo![0]), 'deep freezes complex value');
     });
 
     test('supports custom local storage key', function (assert) {
       window.localStorage.setItem('bar', JSON.stringify('baz'));
 
       const klass = new (class {
-        @localStorage('bar') foo;
+        @localStorage('bar') foo: string | undefined;
       })();
 
       assert.equal(klass.foo, 'baz');
@@ -78,7 +78,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
   module('setter', function () {
     test('user can set a simple value', function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: string | undefined;
       })();
 
       klass.foo = 'bar';
@@ -87,7 +87,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
 
     test('user can set a complex value', function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown[] | undefined;
       })();
 
       klass.foo = [{ bar: 'baz' }];
@@ -96,22 +96,22 @@ module('Unit | Decorator | @localStorage', function (hooks) {
 
     test('persistes simple value in local storage', function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: string | undefined;
       })();
 
       klass.foo = 'baz';
-      assert.equal(JSON.parse(window.localStorage.getItem('foo')), 'baz');
+      assert.equal(JSON.parse(window.localStorage.getItem('foo')!), 'baz');
     });
 
     test('persists complex value in local storage', function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown[] | undefined;
       })();
 
       const value = [{ bar: 'baz' }];
 
       klass.foo = value;
-      assert.deepEqual(JSON.parse(window.localStorage.getItem('foo')), value);
+      assert.deepEqual(JSON.parse(window.localStorage.getItem('foo')!), value);
       assert.ok(Object.isFrozen(klass.foo), 'object is frozen');
       assert.ok(Object.isFrozen(klass.foo[0]), 'object is deep frozen');
       assert.notOk(klass.foo === value, 'object is a copy of the one set');
@@ -120,21 +120,21 @@ module('Unit | Decorator | @localStorage', function (hooks) {
 
     test('supports custom local storage key', function (assert) {
       const klass = new (class {
-        @localStorage('bar') foo;
+        @localStorage('bar') foo: unknown;
       })();
 
       klass.foo = 'baz';
-      assert.equal(JSON.parse(window.localStorage.getItem('bar')), 'baz');
+      assert.equal(JSON.parse(window.localStorage.getItem('bar')!), 'baz');
     });
   });
 
   module('external changes', function () {
     test('picks up changes caused by another class', function (assert) {
       const klassA = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown;
       })();
       const klassB = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown;
       })();
 
       klassA.foo = 'bar';
@@ -143,7 +143,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
 
     test('picks up changes caused by other tabs', async function (assert) {
       const klass = new (class {
-        @localStorage() foo;
+        @localStorage() foo: unknown;
       })();
 
       // assert initial state
@@ -165,7 +165,7 @@ module('Unit | Decorator | @localStorage', function (hooks) {
     test('developer can reinitialize a local storage key in tests', function (assert) {
       // create a class, which will be used between multiple tests runs
       class Foo {
-        @localStorage foo;
+        @localStorage foo: unknown;
       }
 
       // use the class in first test