Mobx-state-tree: Issues with Typescript 3.5.1 release

Created on 4 Jun 2019  Â·  24Comments  Â·  Source: mobxjs/mobx-state-tree

Typescript 3.5.1 just got released. After upgrading from [email protected] the following no longer seems to be working:

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

export const createCustomType = <ICustomType extends IAnyType>({
  CustomType
}: {
  CustomType: ICustomType;
}) => {
  return types
    .model("Example", {
      someProp: types.boolean,
      someType: CustomType
    })
    .views(self => ({
      get isSomePropTrue(): boolean {
        return self.someProp;
      }
    }));
};

Here is the complete error:

Property 'someProp' does not exist on type 'STNValue<ModelInstanceTypeProps<ModelPropertiesDeclarationToProperties<{ someProp: ISimpleType<boolean>; someType: ICustomType; }>>, IModelType<ModelPropertiesDeclarationToProperties<{ someProp: ISimpleType<boolean>; someType: ICustomType; }>, {}, _NotCustomized, _NotCustomized>>'.
  Property 'someProp' does not exist on type 'Exclude<ModelInstanceTypeProps<ModelPropertiesDeclarationToProperties<{ someProp: ISimpleType<boolean>; someType: ICustomType; }>>, object>'.ts(2339)

Are the typings of MST compatible with TS 3.5.1?

When hovering over self of .views(self => ({. In TS 3.4.3 it was:

(parameter) self: ModelInstanceTypeProps<ModelPropertiesDeclarationToProperties<{
    someProp: ISimpleType<boolean>;
    someType: ICustomType;
}>> & IStateTreeNode<IModelType<ModelPropertiesDeclarationToProperties<{
    someProp: ISimpleType<boolean>;
    someType: ICustomType;
}>, {}, _NotCustomized, _NotCustomized>>

While in TS 3.5.1 self of .views(self => ({ seems to be:

(parameter) self: STNValue<ModelInstanceTypeProps<ModelPropertiesDeclarationToProperties<{
    someProp: ISimpleType<boolean>;
    someType: ICustomType;
}>>, IModelType<ModelPropertiesDeclarationToProperties<{
    someProp: ISimpleType<boolean>;
    someType: ICustomType;
}>, {}, _NotCustomized, _NotCustomized>>

I tracked down that thing started breaking since [email protected]. [email protected] was still fine.

Typescript bug has PR require('@mweststrate')

Most helpful comment

I am currently having holiday, so it will take a few weeks before I can dive into this. @xaviergonz might have ideas, or otherwise you'll have to stick to older TS version for a bit. I might not be able to take a look before half august

All 24 comments

Yea looks like that 3.5.1 has broken more things. Specifically, I noticed when this sits in the same file as a model definition, the model turns out "any". It was working fine with TS 3.4. Moving that interface to different file works.

const RootModel = types.model('Root', {}) // == any

export interface TRootModel extends Instance<typeof RootModel> {}

This will need some deep understanding of TypeScript changes which I am lacking. Linking release notes for a reference...

https://devblogs.microsoft.com/typescript/announcing-typescript-3-5/

@FredyC that particular case (an empty model) might be related with this
https://github.com/mobxjs/mobx-state-tree/pull/1269

Does it do the same if the model has at least one required property?

Probably has to do something with mobx-state-tree changes as well.
Version "mobx-state-tree": "3.10.2" works fine for me. If I upgrade to latest, the problems with .views (as described above) appears.

I finally got to preparing a proper reproduction of the issue I've mentioned above. Sadly, CodeSandbox is quirky as usual and actually works for some weird reason. Here goes the repo...

https://github.com/FredyC/mobx-state-tree-ts3.5

After some initial digging, it seems that the main culprit lies about the BaseModel. The TS 3.5 got more strict or what and doesn't like such an approach. Unfortunately, I haven't found any TS option that could be causing it.

Well, I got an answer at SO that has nudged me the right way, but something is definitely wonky here.

I am sorry, but I have to ping you here @mweststrate as it basically makes MST unusable with TS 3.5, so I wonder if have some insight here. The MST typing is really complex and I have no idea where to start looking.

just created a new project and even very simple example doesn't work 😢
image

It's been 13 days since the last activity in this issue...
Where to go from here @mweststrate ?

Considering the complexity of MST's typing I don't think many people are capable to resolve this issue.

I am currently having holiday, so it will take a few weeks before I can dive into this. @xaviergonz might have ideas, or otherwise you'll have to stick to older TS version for a bit. I might not be able to take a look before half august

Ok, had a few hours to spare and upgraded TS, see #1339. As far as I can see no new problems where introuced. I tried reproducing the issue reported by @kresli, but it doesn't occur in our test. So please verify your compiler settings are the same (also added those to the docs now):

{
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitAny": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
}

Will also verify the original issue reported by @ConneXNL

Side note: for TS specific issues I typically have some problem with codesandbox, as tsconfig doesn't seem to be properly picked up occasionally, and stackblitz seems to do a better job here...

@ConneXNL the definition of ICustomExample is incomplete, as it should be <ICustomType extends ModelPrimitive | IAnyType>. I think somehow TS didn't pick up on this before, where it should have. Anyway, ModelPrimitive is not exposed atm from the library, but #1307 fixes that as well, which should fix this issue.

@mweststrate Any idea about my issue? https://github.com/FredyC/mobx-state-tree-ts3.5

Btw, strict option should be enough alone as it enables all others.

No, was there an issue open for that? Circular type refs are a big pain
point in MST + TS, I doubt we can solve it, but at least can take yet
another look :P.

On Sat, Jul 13, 2019 at 10:01 PM Daniel K. notifications@github.com wrote:

@mweststrate https://github.com/mweststrate Any idea about my issue?
https://github.com/FredyC/mobx-state-tree-ts3.5

Btw, strict option should be enough alone as it enables all others.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/1307?email_source=notifications&email_token=AAN4NBFQM3IMXWRC6M3MXNLP7IYAFA5CNFSM4HTBNV22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ3YNZQ#issuecomment-511149798,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4NBFQCXMF3Z6P2DYV3L3P7IYAFANCNFSM4HTBNV2Q
.

@mweststrate Sorry, I kinda hijacked it here as it seemed a good idea to consolidate all TS 3.5 issues here 🙈

Either way, the strangest thing is that circular reference you are talking about worked with 3.4. I wouldn't bother otherwise.

yeah it is a bit on and off story over the different TS versions (that
interface instead of type alias solution is a hack in itself already, which
quite randomly happened to work). If you would be so kind to open a
seperate issue with a link to that repro, I hope to find some time next
week to investigate more. As the original problem of this issue has a
solution and PR now, it's hopefully closed soonish :)

On Sat, Jul 13, 2019 at 10:22 PM Daniel K. notifications@github.com wrote:

@mweststrate https://github.com/mweststrate Sorry, I kinda hijacked it
here as it seemed a good idea to consolidate all TS 3.5 issues here.

Either way, the strangest thing is that circular reference you are talking
about worked with 3.4. I wouldn't bother otherwise.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/1307?email_source=notifications&email_token=AAN4NBGD4FIBX7NOT6UDJ23P7I2OTA5CNFSM4HTBNV22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ3YXXQ#issuecomment-511151070,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4NBC3GV2IHPIXNI66K7DP7I2OTANCNFSM4HTBNV2Q
.

@mweststrate Not sure if you meant do this, but you uncommented
https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/__tests__/core/type-system.test.ts#L1039

So yes, then the error goes away....

Oh, accidental commit, but it works as well if that line is enabled.

Op ma 15 jul. 2019 16:55 schreef ConneXNL notifications@github.com:

@mweststrate https://github.com/mweststrate Not sure if you meant do
this, but you uncommented

https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/__tests__/core/type-system.test.ts#L1039

So yes, then the error goes away....

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/1307?email_source=notifications&email_token=AAN4NBFCFBGLQR23RZUP3HLP7SFVJA5CNFSM4HTBNV22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ56PLQ#issuecomment-511436718,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4NBA3XM574PYBAUBQLE3P7SFVJANCNFSM4HTBNV2Q
.

@mweststrate Hmm, for me it does not. I also tried to clone mst but I am getting the same error in the tests (tried both typescript 3.5.2 and 3.5.3):

image

Ok, will check again!

Op di 16 jul. 2019 00:35 schreef ConneXNL notifications@github.com:

@mweststrate https://github.com/mweststrate Hmm, for me it does not. I
also tried to clone mst but I am getting the same error in the tests:

[image: image]
https://user-images.githubusercontent.com/971199/61253491-81a12a00-a761-11e9-8614-5f0ff4b4ef4a.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/1307?email_source=notifications&email_token=AAN4NBGZDZMMU5S5XZ6YTZDP7T3SDA5CNFSM4HTBNV22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ7FEMY#issuecomment-511595059,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4NBCI4A2ZKNYTKCW35ATP7T3SDANCNFSM4HTBNV2Q
.

@mweststrate adding "strictNullChecks": true solve basic types.optional issue for me. Stupid me, I forgot to check tsconfig. strict: true alone is not enough.

@kresli That sounds strange, here is the snapshot from offic. docs...

image

@FredyC yes you right, I double checked it and either strict: true or strictNullCheck: true works.

Released as 3.14.1

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ShootingStarr picture ShootingStarr  Â·  4Comments

FredyC picture FredyC  Â·  3Comments

xgenvn picture xgenvn  Â·  3Comments

erkieh picture erkieh  Â·  4Comments

lostfictions picture lostfictions  Â·  4Comments