Typescript, Blockly and React

[Mark Friedman]

Hi Blocklyites,

  I recently started a new project using Blockly and React.  I also wanted to try out using Typescript, which I am not very familiar with.  Consequently, I used create-react-app with the '--template typescript' flag and then manually merged in the code from the blockly-react sample in blockly-examples.  However, it seems that despite the existence of Typescript type files for Blockly (which I'm very grateful for) the Typescript compiler still wasn't happy.

  Here is the relevant portion of the App.tsx file that the compiler wasn't happy with:

function App() {
    const simpleWorkspace = React.createRef();
    const generateCode = () => {
        const code = BlocklyJS.workspaceToCode(
            simpleWorkspace.current.workspace
        );
        console.log(code);
    }
    return (
      <div className="App">
          <button onClick={generateCode}>Convert</button>
          <BlocklyComponent ref={simpleWorkspace}
                            readOnly={false} trashcan={true} media={'media/'}

The error I got was:

Property 'workspaceToCode' does not exist on type 'typeof Generator'.  TS2339

     9 |     const simpleWorkspace = React.createRef();
    10 |     const generateCode = () => {
  > 11 |         const code = BlocklyJS.workspaceToCode(
       |                                ^
    12 |             simpleWorkspace.current.workspace
    13 |         );
    14 |         console.log(code);

To temporarily work around that I added a '// @ts-ignore' but then I got the following error:

Object is of type 'unknown'.  TS2571

    11 |         // @ts-ignore
    12 |         const code = BlocklyJS.workspaceToCode(
  > 13 |             simpleWorkspace.current.workspace
       |             ^
    14 |         );
    15 |         console.log(code);
    16 |     }

I did a bit more research, tried a few more things, got a few more errors and eventually got to this point with the code:

function App() {
  const simpleWorkspace: React.RefObject<BlocklyComponent> = React.createRef();
  const generateCode = () => {
      const currentWorkspace: BlocklyComponent = simpleWorkspace.current as BlocklyComponent;
      // @ts-ignore
      const code = BlocklyJS.workspaceToCode(currentWorkspace.workspace);
      console.log(code);
    }
  return (
    <div className="App">
        <button onClick={generateCode}>Convert</button>
        <BlocklyComponent ref={simpleWorkspace}

The above works, but I feel like I shouldn't have to explicitly type simpleWorkspace and I don't really like having to use 'as' in the definition of currentWorkspace (which otherwise causes a complaint that simpleWorkspace.current might be null.  More importantly, though, I don't think I should have to completely ignore the type checking of the call to BlocklyJS.workspaceToCode.

I'm not sure if these are issues with the Blockly (and possibly React) Typescript type definitions or something else.  Does anyone have any good ideas?

Thanks in advance.

-Mark

[Eric Edem]

I believe I ran into a similar issue in my code, and I think it may just be a missing or incomplete definition for the generators in typescript.

I was checking to see what I did, and I ended up casting the generator I'm using into an `any` which prevents the error but doesn't really give type safety:

const MyGenerator: any = BlocklyLua

There are a few other places I've noticed where the type definitions are a little off, especially in overloaded methods that can take null/undefined instead of a value. I'll see if I can spare some time myself to circle back on where I've seen these.

[Mark Friedman]

Thanks, Eric.  Ideally, I'd like to avoid using 'any' or '@ts-ignore' which basically just turn off type checking, but perhaps that's somewhat unavoidable with 3rd-party libraries that weren't specifically written with Typescript in mind.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/85e6cfe8-c71c-4dd7-98b4-b10e411fa581n%40googlegroups.com.

[Eric Edem]

It's worth noting that the typings are available here, and maybe shouldn't be too hard to update? https://github.com/google/blockly/tree/master/typings

I've been tempted to go in and update them but I have not felt confident enough in my knowledge of Blockly internals nor Typescript. A Noob through and through.

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/2pASNQrznww/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcSS%2Bb7pHpeWnAgWrvHpTKfGa89m%3DM9M5A_Q0sFSXhH3eQ%40mail.gmail.com.

[feni...@google.com]

We have an issue open for adding typings for generators, and would accept PRs for it. Here's the gulp task for generating types.

And this issue tracks other typing issues. 

Cheers,

Rachel

[Mark Friedman]

Thanks, Rachel!  I may not have the Typescript-fu to do this but I'll give it a try with the generators. If it's as easy as just adding the generators to the gulp task then it might not be that difficult.  I suspect that the issue with "simpleWorkspace.current"might be more difficult, so I may just add it to the GitHub issue that tracks the other typing issues.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/3a577373-2cf4-4a19-babb-eecee9d83188n%40googlegroups.com.