Type 'ISimpleType<string>' is not assignable to type 'string'

[OnkelTem]

So this simple code:

type Foo = {
  foo: string
}

const MyModelFoo = types.model<Foo>('Foo', {
  foo: types.string,
})

triggers the following error:

Type 'ISimpleType<string>' is not assignable to type 'string'

What I do wrong? This looks like a bug.

[thegedge]

The typing here is probably a bit confusing, but I'd recommend using your type for instances, not the model itself:

type Foo = {
  foo: string
}

const MyModelFoo = types.model('Foo', {
  foo: types.string,
})

const fooInstance: Foo = MyModelFoo.create({ foo: "test" })

The problem in your example is that the generic argument for types.model describes the structure of the properties and not the instance. { foo: types.string } does not match { foo: string }, hence the error you're seeing. It would match { foo: "abc" }, which would actually be the same as { foo: types.optional(types.string, "abc") }.

In general I'd recommend always letting TypeScript derive the generic arguments for types.model :)

[thegedge]

@OnkelTem everything looks to be working as expected in the TS playground links you provided. In the first one, there are no type errors as expected, since FooDerived["foo"] and Foo["foo"] are both strings. In the second there are type errors because Foo["foo"] is a number and FooDerived["foo"] is a string.

I'm also seeing intellisense when creating a model, and also when referencing properties on a created model:

Do you have a more complete example where things aren't working?

[OnkelTem]

Intellisense works for an existing model, while I speak about creating the model itself.

Instead we're given with a TypeScript API, where Foo is already defined and we create a model for it, so we type:

t.model('Foo', {... 

and get nothing, because model isn't typed.

In the second there are type errors because Foo["foo"] is a number and FooDerived["foo"] is a string.

Yeah, but that's a result of an investigation and not what is displayed in the error message.

[thegedge]

Oh, I think I understand what you're asking now. You type

t.model('Foo', {

And then ask for intellisense to show you options. There aren't meant to be options there by default, but you happen to already have an existing interface and want to have MST adhere to that. I don't think there's a natural solution that MST can give you (maybe you have some suggestions?), but I can see two options that you could use without any changes to MST:

Use satisfies

The type of a properties blob is pretty complicated, so I don't think you can easily adapt some arbitrary interface to it. If you happen to only be mapping keys to primitive values, you could probably do something similar to what we do internally (which MST could expose):

mobx-state-tree/src/types/complex-types/model.ts

Lines 76 to 96 in ab45ead

	/**
	* Unmaps syntax property declarations to a map of { propName: IType }
	*
	* @hidden
	*/
	export type ModelPropertiesDeclarationToProperties<T extends ModelPropertiesDeclaration> =
	T extends { [k: string]: IAnyType } // optimization to reduce nesting
	? T
	: {
	[K in keyof T]: T[K] extends IAnyType // keep IAnyType check on the top to reduce nesting
	? T[K]
	: T[K] extends string
	? IType<string | undefined, string, string>
	: T[K] extends number
	? IType<number | undefined, number, number>
	: T[K] extends boolean
	? IType<boolean | undefined, boolean, boolean>
	: T[K] extends Date
	? IType<number | Date | undefined, number, Date>
	: never
	}

Alternatively, if you only care about the keys, you could do something like this:

types.model("Foo", {

} satisfies Record<keyof Foo, any>)

That's kind of gross though, so maybe this would be better:

import { types, IType } from "mobx-state-tree";

type Foo = {
  foo: string;
};

const MyModelFoo = types.model("Foo", {
  foo: types.string,
}) satisfies IType<any, Foo, any>;

Adjust your type assertions

If your interface is meant to match an instance/snapshot of a model, which I'm guessing it is given your playground links, I would recommend something close to what you had in TS playground:

import { types, SnapshotOut } from "mobx-state-tree";

type Foo = { foo: number; };

const MyModelFoo = types.model("Foo", {
  foo: types.string,
});

type FooDerived = SnapshotOut<typeof MyModelFoo>

type Test<T extends Foo> = "yes";
type _ = Test<FooDerived>

That will give you something a little more meaningful in the error message at the cost of having to write these out for every model:

[OnkelTem]

I see, Jason! Many thanks :)

As for the ideas - yeah, I've got one: #2239 :)

[coolsoftwaretyler]

@thegedge really nailed it here, but I understand where you're coming from, @OnkelTem.

I'll add that I've seen the satisfies approach work pretty well. I did a bit of consulting with a team that used it for a similar use case as yours, and I thought it was clever.

I'll read through #2239 and think it over. But as things stand, that's my best recommendation for you with MST as-is.