v28
Addons
Guides
Typescript
Overmind is written in Typescript and it is written with a focus on you dedicating as little time as possible to help Typescript understand what your app is all about. Typescript will spend a lot more time helping you. If you are not a Typescript developer Overmind is a really great project to start learning it as you will get the most out of the little typing you have to do.
Configuration
The only typing you need is the Context. This holds information about your state, actions and effects.
overmind/index.ts
1
import { IContext } from 'overmind'
2
3
export const config = {}
4
5
export type Context = IContext<typeof config>
Copied!
You only have to set up these types once, where you bring your configuration together. That means if you use multiple namespaced configuration you still only create a single Context type.
State
The state you define in Overmind is just an object where you type that object.
overmind/state.ts
1
type State = {
2
foo: string
3
bar: boolean
4
baz: string[]
5
user: User
6
}
7
8
export const state: State = {
9
foo: 'bar',
10
bar: true,
11
baz: [],
12
user: new User()
13
}
Copied!
When writing Typescript you should not use optional values for your state (?), or use undefined in a union type. In a serializable state store world null is the value indicating “there is no value”.
1
type State = {
2
// Do not do this
3
foo?: string
4
5
// Do not do this
6
foo: string | undefined
7
8
// Do this
9
foo: string | null
10
11
// Or this, if there always will be a value there
12
foo: string
13
}
14
15
export const state: State = {
16
foo: null
17
}
Copied!
Derived
overmind/state.ts
1
import { derived } from 'overmind'
2
3
type State = {
4
foo: string
5
shoutedFoo: string
6
}
7
8
export const state: State = {
9
foo: 'bar',
10
shoutedFoo: derived((state: State) => state.foo + '!!!')
11
}
Copied!
Note that the type argument you pass is the object the derived is attached to, so with nested derived:
overmind/state.ts
1
import { derived } from 'overmind'
2
3
type State = {
4
foo: string
5
nested: {
6
shoutedFoo: string
7
}
8
}
9
10
export const state: State = {
11
foo: 'bar',
12
nested: {
13
shoutedFoo: derived((state: State['nested']) => state.foo + '!!!')
14
}
15
}
Copied!
To access the root state you can use your Context type:
overmind/state.ts
1
import { Context } from 'app/overmind'
2
3
type State = {
4
foo: string
5
shoutedFoo: string
6
}
7
8
export const state: State = {
9
foo: 'bar',
10
shoutedFoo: derived(
11
(state: State, rootState: Context["state"]) => state.foo + '!!!'
12
)
13
}
Copied!
Statemachine
Actions
You type your actions with the Context and an optional value. Any return type will be inferred.
1
import { Overmind } from 'overmind'
2
import { Context } from 'app/overmind'
3
4
export const noArgAction = (context: Context) => {
5
// actions.noArgAction()
6
}
7
8
export const argAction = (context: Context, value: string) => {
9
// actions.argAction("foo"), requires "string"
10
}
11
12
export const noArgWithReturnTypeAction = (context: Context) => {
13
// actions.noArgWithReturnTypeAction(), with return type "string"
14
return 'foo'
15
}
16
17
export const argWithReturnTypeAction = (context: Context, value: string) => {
18
// actions.argWithReturnTypeAction("foo"), requires "string" and returns "string"
19
return value + '!!!'
20
}
21
22
// The onInitialize action
23
export const onInitializeOvermind = (context: Context, instance: Overmind<Context>) => {
24
25
}
Copied!
Any of these actions could be defined as an async function or simply return a promise to be typed that way.
Effects
There are no Overmind specific types related to effects, you just type them in general.
overmind/effects.ts
1
export const api = {
2
getUser: async (): Promise<User> => {
3
const response = await fetch('/user')
4
5
return response.json()
6
}
7
}
Copied!
Operators
Operators is like the action: it can take an optional value, but it always produces a promise output. By default the promised value of an operator is the same as the input.
overmind/operators.ts
1
import { Context, filter } from 'overmind'
2
3
// Actions are interoperable with operators. So type them
4
// like an action
5
export const changeSomeState = ({ state }: Context) => {
6
state.foo = 'bar'
7
}
8
9
// Most operators takes an action signature, just type it as that
10
export const filterAwesomeUser = filter((_: Context, user: User) =>
11
user.isAwesome
12
})
Copied!
When you create a pipe and inline other operators/actions their payloads are inferred. Only the first operator needs to type its payload so that when calling doThis you will have the correct typing for the initial payload.
1
import { Context, pipe } from 'overmind'
2
3
export const doThis = pipe(
4
(context: Context, value: string) => {
5
// actions.doThis("foo"), requires "string"
6
return 123
7
},
8
(context: Context, value) => {
9
// value is now "number"
10
}
11
)
12
13
// call action
14
doThis('foo') // Typed to string, as first operator needs string
Copied!
Last modified 10mo ago
Copy link