CODEWITHSUNDEEP
typescriptmobxyupmobx-state-tree
ridermansb
ridermansb

Reputation: 11069

Error using mobx-state-tree + yup with typescript (SchemaOf with SnapshotOut not working!!)

I'm trying to use Yup + Mobx-state-tree with Typescript... but for simple cases i'm getting erros...

const UserNameModel = types.model({
    name: types.string,
});
type UserNameModelSnapshot = SnapshotOut<typeof UserNameModel>;

const riderman: UserNameModelSnapshot = {
    name: 'a',
};
// WORKS FINE, riderman.name is a string


// Error on userNameSchema
const userNameSchema: SchemaOf<UserNameModelSnapshot> = yup.object({
    name: yup.string().required().defined().min(3),
});

Error

TS2322: Type 'OptionalObjectSchema<{ name: DefinedStringSchema<string | undefined, Record<string, any>>; }, Record<string, any>, TypeOfShape<{ name: DefinedStringSchema<string | undefined, Record<string, any>>; }>>' is not assignable to type 'ObjectSchemaOf<ModelSnapshotType<{ name: ISimpleType; }>>'.   Types of property 'fields' are incompatible.     Property '[$nonEmptyObject]' is missing in type '{ name: DefinedStringSchema<string | undefined, Record<string, any>>; }' but required in type '{ name: BaseSchema<Maybe, AnyObject, string>; [$nonEmptyObject]: BaseSchema<any, AnyObject, any> | ArraySchema<BaseSchema<...> | Lazy<...>, AnyObject, unknown[] | undefined, unknown[] | undefined> | ObjectSchemaOf<...> | ObjectSchemaOf<...>; }'.

I also tried

const userNameSchema = yup.object<UserNameModelSnapshot>({
    name: yup.string().required().defined().min(3),
});

But getting error on UserNameModelSnapshot

TS2344: Type 'ModelSnapshotType<{ name: ISimpleType; email: ISimpleType; }>' does not satisfy the constraint 'ObjectShape'.   Index signature is missing in type 'ModelSnapshotType<{ name: ISimpleType; email: ISimpleType; }>'.

I also tried

const UserNameModel = types.model({
    name: types.string,
});
type UserNameModelSnapshot = Instance<typeof UserNameModel>;

const userNameSchema = yup.object<UserNameModelSnapshot>({
    name: yup.string().required().defined().min(3),
});

But getting error on UserNameModelSnapshot

TS2344: Type '{ name: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ name: ISimpleType; }, {}, _NotCustomized, _NotCustomized>>' does not satisfy the constraint 'ObjectShape'.   Index signature is missing in type '{ name: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ name: ISimpleType; }, {}, _NotCustomized, _NotCustomized>>'.

Upvotes: 1

Views: 637

Answers (1)

Danila
Danila

Reputation: 18536

You could use this hack:

type UserNameModelSnapshot = Omit<SnapshotOut<typeof UserNameModel>, symbol>;

Other that I am not quite sure how to get rid of special fields that MST adds.

Upvotes: 1

Related Questions