refactor: prefer interfaces (#1012)

.eslintrc.json

@@ -46,8 +46,8 @@
     ],
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
     "jest/consistent-test-it": [
       "error",
       { "fn": "it", "withinDescribe": "it" }

src/context.ts

@@ -14,7 +14,7 @@ import {
   useStore,
 } from 'zustand'
 
-type UseContextStore<S extends StoreApi<State>> = {
+interface UseContextStore<S extends StoreApi<State>> {
   (): ExtractState<S>
   <U>(
     selector: StateSelector<ExtractState<S>, U>,

src/middleware/devtools.ts

@@ -16,7 +16,7 @@ declare module '../vanilla' {
 }
 
 // FIXME https://github.com/reduxjs/redux-devtools/issues/1097
-type Message = {
+interface Message {
   type: string
   payload?: any
   state?: any

src/middleware/persist.ts

@@ -5,15 +5,18 @@ import {
   StoreMutatorIdentifier,
 } from '../vanilla'
 
-export type StateStorage = {
+export interface StateStorage {
   getItem: (name: string) => string | null | Promise<string | null>
   setItem: (name: string, value: string) => void | Promise<void>
   removeItem: (name: string) => void | Promise<void>
 }
 
-type StorageValue<S> = { state: S; version?: number }
+interface StorageValue<S> {
+  state: S
+  version?: number
+}
 
-export type PersistOptions<S, PersistedState = S> = {
+export interface PersistOptions<S, PersistedState = S> {
   /** Name of the storage (must be unique) */
   name: string
   /**
@@ -74,7 +77,7 @@ export type PersistOptions<S, PersistedState = S> = {
 
 type PersistListener<S> = (state: S) => void
 
-type StorePersist<S extends State, Ps> = {
+interface StorePersist<S extends State, Ps> {
   persist: {
     setOptions: (options: Partial<PersistOptions<S, Ps>>) => void
     clearStorage: () => void
@@ -85,7 +88,7 @@ type StorePersist<S extends State, Ps> = {
   }
 }
 
-type Thenable<Value> = {
+interface Thenable<Value> {
   then<V>(
     onFulfilled: (value: Value) => V | Promise<V> | Thenable<V>
   ): Thenable<V>

src/middleware/redux.ts

@@ -4,15 +4,15 @@ import { NamedSet } from './devtools'
 type Write<T extends object, U extends object> = Omit<T, keyof U> & U
 type Cast<T, U> = T extends U ? T : U
 
-type Action = {
+interface Action {
   type: unknown
 }
 
-type ReduxState<A extends Action> = {
+interface ReduxState<A extends Action> {
   dispatch: StoreRedux<A>['dispatch']
 }
 
-type StoreRedux<A extends Action> = {
+interface StoreRedux<A extends Action> {
   dispatch: (a: A) => A
   dispatchFromDevtools: true
 }

src/middleware/subscribeWithSelector.ts

@@ -32,7 +32,7 @@ declare module '../vanilla' {
   }
 }
 
-type StoreSubscribeWithSelector<T extends State> = {
+interface StoreSubscribeWithSelector<T extends State> {
   subscribe: {
     (listener: (selectedState: T, previousSelectedState: T) => void): () => void
     <U>(

src/react.ts

@@ -50,7 +50,7 @@ export type UseBoundStore<S extends WithReact<StoreApi<State>>> = {
   ): U
 } & S
 
-type Create = {
+interface Create {
   <T extends State, Mos extends [StoreMutatorIdentifier, unknown][] = []>(
     initializer: StateCreator<T, [], Mos>
   ): UseBoundStore<Mutate<StoreApi<T>, Mos>>

src/vanilla.ts

@@ -9,7 +9,7 @@ export type StateListener<T> = (state: T, previousState: T) => void
  * @deprecated Use `StateListener<T>` instead of `StateSliceListener<T>`.
  */
 export type StateSliceListener<T> = (slice: T, previousSlice: T) => void
-export type Subscribe<T extends State> = {
+export interface Subscribe<T extends State> {
   (listener: StateListener<T>): () => void
 }
 
@@ -21,7 +21,7 @@ export type SetState<T extends State> = {
 }['_']
 export type GetState<T extends State> = () => T
 export type Destroy = () => void
-export type StoreApi<T extends State> = {
+export interface StoreApi<T extends State> {
   setState: SetState<T>
   getState: GetState<T>
   subscribe: Subscribe<T>
@@ -40,7 +40,7 @@ export type StateCreator<
   $$storeMutations: Mis
 ) => U) & { $$storeMutators?: Mos }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-interface
 export interface StoreMutators<S, A> {}
 export type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>
 
@@ -52,7 +52,7 @@ export type Mutate<S, Ms> = Ms extends []
 
 type Get<T, K, F = never> = K extends keyof T ? T[K] : F
 
-type CreateStore = {
+interface CreateStore {
   <T extends State, Mos extends [StoreMutatorIdentifier, unknown][] = []>(
     initializer: StateCreator<T, [], Mos>
   ): Mutate<StoreApi<T>, Mos>

tests/basic.test.tsx

@@ -37,7 +37,7 @@ it('creates a store hook and api object', () => {
   `)
 })
 
-type CounterState = {
+interface CounterState {
   count: number
   inc: () => void
 }
@@ -185,8 +185,13 @@ it('can batch updates', async () => {
 })
 
 it('can update the selector', async () => {
-  type State = { one: string; two: string }
-  type Props = { selector: StateSelector<State, string> }
+  interface State {
+    one: string
+    two: string
+  }
+  interface Props {
+    selector: StateSelector<State, string>
+  }
   const useStore = create<State>(() => ({
     one: 'one',
     two: 'two',
@@ -204,8 +209,12 @@ it('can update the selector', async () => {
 })
 
 it('can update the equality checker', async () => {
-  type State = { value: number }
-  type Props = { equalityFn: EqualityChecker<State> }
+  interface State {
+    value: number
+  }
+  interface Props {
+    equalityFn: EqualityChecker<State>
+  }
   const useStore = create<State>(() => ({ value: 0 }))
   const { setState } = useStore
   const selector: StateSelector<State, State> = (s) => s
@@ -238,8 +247,10 @@ it('can update the equality checker', async () => {
 })
 
 it('can call useStore with progressively more arguments', async () => {
-  type State = { value: number }
-  type Props = {
+  interface State {
+    value: number
+  }
+  interface Props {
     selector?: StateSelector<State, number>
     equalityFn?: EqualityChecker<number>
   }
@@ -283,7 +294,9 @@ it('can call useStore with progressively more arguments', async () => {
 
 it('can throw an error in selector', async () => {
   console.error = jest.fn()
-  type State = { value: string | number }
+  interface State {
+    value: string | number
+  }
 
   const initialState: State = { value: 'foo' }
   const useStore = create<State>(() => initialState)
@@ -328,7 +341,9 @@ it('can throw an error in selector', async () => {
 
 it('can throw an error in equality checker', async () => {
   console.error = jest.fn()
-  type State = { value: string | number }
+  interface State {
+    value: string | number
+  }
 
   const initialState: State = { value: 'foo' }
   const useStore = create(() => initialState)
@@ -373,7 +388,7 @@ it('can throw an error in equality checker', async () => {
 })
 
 it('can get the store', () => {
-  type State = {
+  interface State {
     value: number
     getState1: () => State
     getState2: () => State
@@ -389,7 +404,7 @@ it('can get the store', () => {
 })
 
 it('can set the store', () => {
-  type State = {
+  interface State {
     value: number
     setState1: SetState<State>
     setState2: SetState<State>
@@ -438,7 +453,10 @@ it('can destroy the store', () => {
 })
 
 it('only calls selectors when necessary', async () => {
-  type State = { a: number; b: number }
+  interface State {
+    a: number
+    b: number
+  }
   const useStore = create<State>(() => ({ a: 0, b: 0 }))
   const { setState } = useStore
   let inlineSelectorCallCount = 0
@@ -474,10 +492,12 @@ it('only calls selectors when necessary', async () => {
 })
 
 it('ensures parent components subscribe before children', async () => {
-  type State = {
+  interface State {
     children: { [key: string]: { text: string } }
   }
-  type Props = { id: string }
+  interface Props {
+    id: string
+  }
   const useStore = create<State>(() => ({
     children: {
       '1': { text: 'child 1' },

tests/context.test.tsx

@@ -15,7 +15,7 @@ afterEach(() => {
   console.error = consoleError
 })
 
-type CounterState = {
+interface CounterState {
   count: number
   inc: () => void
 }

tests/middlewareTypes.test.tsx

@@ -9,7 +9,7 @@ import {
 import { immer } from 'zustand/middleware/immer'
 import createVanilla from 'zustand/vanilla'
 
-type CounterState = {
+interface CounterState {
   count: number
   inc: () => void
 }
@@ -597,7 +597,7 @@ describe('more complex state spec with subscribeWithSelector', () => {
   })
 
   it('#631', () => {
-    type MyState = {
+    interface MyState {
       foo: number | null
     }
     const useStore = create<MyState>()(
@@ -622,7 +622,7 @@ describe('more complex state spec with subscribeWithSelector', () => {
   })
 
   it('#650', () => {
-    type MyState = {
+    interface MyState {
       token: string | undefined
       authenticated: boolean
       authenticate: (username: string, password: string) => Promise<void>

tests/types.test.tsx

@@ -111,7 +111,9 @@ type AssertEqual<Type, Expected> = Type extends Expected
   : never
 
 it('should have correct (partial) types for setState', () => {
-  type Count = { count: number }
+  interface Count {
+    count: number
+  }
 
   const store = create<Count>((set) => ({
     count: 0,
@@ -137,7 +139,10 @@ it('should have correct (partial) types for setState', () => {
 })
 
 it('should allow for different partial keys to be returnable from setState', () => {
-  type State = { count: number; something: string }
+  interface State {
+    count: number
+    something: string
+  }
 
   const store = create<State>(() => ({
     count: 0,