@flow typeerror

[stephen-dahl]

Intended outcome:

use the @flow annotation

    @flow
    *fetch() {
      return true
    }

Actual outcome:

type error on @flow

How to reproduce the issue:

add the @flow decorator to a generator inside a class

https://codesandbox.io/p/sandbox/gifted-dawn-w2vdz9?workspaceId=6ecfa4fe-9261-4054-86f0-83188ee28c65

code sandbox does not show the error, not sure if they show ts errors. I see the error locally in vscode and webstorm.

Versions
"mobx": "^6.13.3",
"mobx-react-lite": "^4.0.7",
"typescript": "^5.6.3",

[mweststrate]

You might need to specify the return type explicitly to Generator<boolean, boolean>. Without that I had the same error: 7f10f7a

[stephen-dahl]

same error
before

after

[mweststrate]

In the sandbox you linked it fixes the issue, so it probably relates to the further compilation configuration. Are you using legacy decorators for example? As work around it might be worth trying the old onProgress = flow((..) => { } syntax

[dmitriykozlov]

Have the same issue in my project

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
    "target": "es6",
    "lib": ["ESNext", "dom"],
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "jsx": "react",
    "typeRoots": ["./typings"]
  },
}

babel

export default ({ env }) => {
  const isProduction = env('production')
  console.log('Babel isProduction=', isProduction)
  const plugins = [
    ['@babel/plugin-proposal-decorators', { version: '2023-11' }],
    [
      'babel-plugin-styled-components',
      {
        displayName: false,
        ssr: false,
        minify: isProduction,
        pure: isProduction,
      },
    ],
  ]
  if (!isProduction) {
    plugins.push(['react-refresh/babel'])
  }

  return {
    presets: [
      '@babel/preset-env',
      '@babel/preset-react',
      '@babel/preset-typescript',
    ],
    plugins,
    minified: true,
    sourceType: 'unambiguous',
  }
}

npm ls mobx mobx-react-lite typescript @babel/plugin-proposal-decorators 
[email protected] /Users/dima/WorkProjects/correqts-common
└─┬ @correqts-common/[email protected] -> ./chat
  ├── @babel/[email protected]
  ├─┬ @mobx-devtools/[email protected]
  │ └── [email protected] deduped
  ├─┬ @svgr/[email protected]
  │ └─┬ @svgr/[email protected]
  │   └─┬ [email protected]
  │     └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├── [email protected]
  └─┬ [email protected]
    └── [email protected]

[andrewkucz]

fwiw I am still experiencing this with "mobx": "^6.13.5" and "typescript": "^5.7.3"

The docs mention a utility function flowResult and mentions its to trick TS types, but I dont see any usage examples and Im unclear on exactly what it's for.

Does anyone know how to properly type a Class function using the @flow decorator in typescript, is there any examples out there?

I was able to get TS to stop complaining with this, but Im not sure if its "correct" as it doesn't seem super elegant

	@flow
	testFn() {
		return function* testDouble() {
			yield fetch("https://example.com");
		};
	}

you could also add the function as a class variable like so but dont love this either

	testFn2 = flow(function* (this: TestClass) {
		yield fetch("https://example.com");
	});

any help is appreciated