Can I use TypeScript on Phaser 3?

[Majirefy]

I found there was no TS definition file for Phaser 3 now. So it means Phaser 3 have no support for TypeScript?

[nkholski]

TypeScript is supported but just wasn't ready by the launch.

[mmermerkaya]

The relevant issue is #3047. Unfortunately it was closed without actually being resolved.

[troyedwardsjr]

Making good progress on writing my Phaser 3 typescript definition generator/transpiler.

First full build:

https://github.com/troyedwardsjr/phaser3-tsd/blob/master/build/phaser.d.ts

[troyedwardsjr]

I haven't tested everything yet but using my modified version of Antriel's official (WIP) Phaser 3 typescript definitions build, I was able to get scene properties (plugins) to work using a hacky generator by stepping through Phaser code with the browser debugger, converting any useful runtime data to JSON, writing it to disk, then converting it with a simple script, and injecting it into Antriel's build.

End result: Everything appears to be compiling in the typescript compiler so far, with code hinting, autocompletion/intellisense, ect. in VS Code (and I imagine similar editors).

Note: This is a temporary, hacky, potentially unstable solution for those who want to start building their Phaser 3 typescript projects right now while we wait on offical typescript support to be completed by Antriel and the Phaser team.

Modified build here: https://github.com/troyedwardsjr/phaser3-tsd/blob/master/build/official/phaser.d.ts

Also created a boilerplate starter project, with definitions included: https://github.com/troyedwardsjr/phaser3-typescript-webpack

[camdenorrb]

@troyedwardsjr ? It appears to be missing a-lot

[Antriel]

Yes, it's still missing some things. But your screen shows v2 code. The current version is v3.

[camdenorrb]

@Antriel I was using v3, but I was having issues loading it without NodeJS so I recently moved down to 2.10 (Not in that screenshot)

[Tatsujinichi]

Any idea when this will be officially added?

[goowikns]

Would love to know as well, or at least know if it's within the next week or month.

[JamesSkemp]

Note that in the last issue of Phaser World it was mentioned that the JS Doc work being done is a step toward TS definitions. See https://madmimi.com/p/a022cb (not on the main site yet) and search for 'typescript.'

[Korigoth]

Any ETA ?

waiting for typescript definition to get in Phaser ;)

[JamesSkemp]

Last newsletter devblog suggests he willing on it but docs are a mess. I'm working on the assumption it'll be April.

[photonstorm]

Docs are the current priority. Defs will be done after the docs are sorted out. Progress so far this week has been great. Nothing about v3 stops you using TS, you just wont have any code insight for the moment. It’s really not the end of the world.

[Korigoth]

@photonstorm as a new user of Phaser i'm a bit lost, so Defs will be there to greatly add to my productivity. And normaly Defs contain some examples and links to other object, so it will be easier to learn ;)

[orblazer]

Hello, i work on types definition, my work is end at ~70% (i have jsut compile all current description and function in declaration. An first realase of my definition probably out in next days.

[ampled]

@photonstorm How about adding the unfinished type-definitions to the repo for pull-requests? Or a separate definitions-repo for separate version tracking and npm-publishing (ie @types/phaser)

Having an "official" but unfinished definitions-file is better than nothing, and I'd just suggest using the "any"-type for any unfinished interface/class definitions while it's being worked on, as long as all existing usable properties are "mapped out"

[photonstorm]

The first pass at them (they're automated, not hand done) were posted to the Phaser forum a few weeks back. They're not being worked on at all until the docs are complete. Docs are the priority. Until all of the data types, config objects, events, etc are correct in the docs, the defs will never generate properly.

[ampled]

Oh, so the defs are generated from jsdoc? That makes sense then

[photonstorm]

Yes, completely from the docs (using hinting where needed to ensure they are correct). We fell into the trap of manually making defs for v2 and even today, years later, they're still being fixed now and again. It was something we couldn't bear to go through again for v3.

[ampled]

Is there any way to contribute to the docs?

[photonstorm]

The most helpful right now would be to literally do a 'find' on the source code for the string [type] - and, if you know or can work out what the data-type should be by looking at the function, replace it.

[photonstorm]

As it currently stands there are 1069 unspecified types left to replace.

Once that is done, there are 7400 [description] blocks to write.

It's really, really, not a small task. However, for the purpose of the defs it's just the [type]s that need replacing for now.

[photonstorm]

Thanks to a huge PR from @orblazer and a bunch of work I did over the weekend we're down from 1069 unknown types to just 579 remaining. Should easily be able to complete all of those this week.

[photonstorm]

Another huge batch done. Just 343 left now.

[Korigoth]

@photonstorm nice, continue, your great jobs guys ;)

[miasmos]

@photonstorm Just published a Phaser 3 project template using Typescript and just happened upon this thread, only to find out that typing support is fast approaching. Excited to integrate once it's complete. Thanks for your hard work.

https://github.com/stephenpoole/phaser3-typescript-template

[photonstorm]

Alright, that's every single data type done. Now the tedious task of checking them all to look for typos, etc. And then working out objects to TypeDefs to Interfaces.

[mmermerkaya]

I'm curious about what you are planning on using to convert JSDoc types to TypeScript types. Maybe something like Clutz?

[thosakwe]

Is there any way to contribute to this? I'd love to use Phaser 3 with TypeScript, so if there's any way I can help bring this about faster, please let me know.

[photonstorm]

The TypeScript Defs are now available here: https://github.com/photonstorm/phaser3-docs/tree/master/typescript

You can find more details in the Phaser 3 Docs readme. The full source to the parser and conversion tool we built is also in that repo. If you wish to help improve the quality of the defs, or help refine the parser, then please see the details in the readme.

I'm going to close this issue. Any problems with the defs should now be reported in the docs repo.

[hackhat]

I wonder why you don't package them in the "phaser" npm package or "@types/phaser" as is standard practice? I need to copy paste this 2.3MB and maintain it myself?

Also would be nice to explain more explicitly that you need to manually copy paste, I wasted time to figure out that you don't provide it properly and need to be done this hacky way.

Maybe explain how to use them https://github.com/photonstorm/phaser3-docs#typescript-definitions

Looks like somebody said that will be in the official phaser package, 22 days ago https://github.com/photonstorm/phaser3-docs/issues/45 I still think is worth considering documenting how to use it, as it doesn't look like it adds the types when I install with yarn add phaser.

[photonstorm]

When it's finished, we will include it. It's not ready yet. In the meantime, you can spend all of the earth-shattering 10 seconds it must have taken to copy a single file over to your project folder.

[thosakwe]

Right? It’s not that difficult to just wget the TypeScript definitions for the current version anyways.

[Nodragem]

I had the same issue as hackhat :) it does not take 10 seconds to figure out and solve when you are new to TypeScript and Webpack. Even now that I read this thread, I am not certain what I need to do ^^

[photonstorm]

Webpack has nothing to do with this really. Which-ever folder your project is being saved to in VS Code, you drop the Phaser defs file in there so VS Code can see it. That's literally all there is to it (there are other ways, like referencing the defs globally, but this by far is the quickest)

[Nodragem]

ok, so I just made a folder def and copy-paste the file phaser.d.ts in it (from https://github.com/photonstorm/phaser3-docs/blob/master/typescript/phaser.d.ts) When using VS code with tsc, the definition file is found automatically.

PS: @photonstorm, you posted just as I finished to write this :)

[miasmos]

If it isn't ready yet, it shouldn't be in public releases. Plus, by that logic, the entire framework should be in the docs repo. Either it isn't ready and it's not released publicly, or it is and it should exist in this repo. You can't have both.

On Thu, Aug 9, 2018 at 8:57 AM Geoffrey Mégardon notifications@github.com wrote:

ok, so I just made a folder def and copy-paste the file phaser.d.ts in it (from https://github.com/photonstorm/phaser3-docs/blob/master/typescript/phaser.d.ts ) When using VS code with tsc, the definition file in found automatically.

PS: @photonstorm https://github.com/photonstorm, you posted just as I finished to write this :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/photonstorm/phaser/issues/3224#issuecomment-411747794, or mute the thread https://github.com/notifications/unsubscribe-auth/ADMHHygEoGFzqjEHzqIzaWND6i-JKr9Iks5uPDGjgaJpZM4SErN3 .

[Nodragem]

I agree that this is a bit odd that the Type Definitions are in the docs repo :D maybe it should be in the phaser repo (easier to find?)?

There could be a note telling the user that this is a beta/alpha version that is improved in parallel to phaser.

[photonstorm]

And yet by existing publicly there have been hundreds of updates and fixes contributed to them. So yeah, let’s hide them away where no one can help with them, because of course that would really speed up their growth. Genius idea, can’t wait for your next insight.

[miasmos]

I'm not sure if you've heard, but git has a concept known as branching that allows features to be developed without polluting the master branch. No need to be a genius to use them. That way, you don't get confused users creating issues regarding incomplete features.

On Thu, Aug 9, 2018 at 6:24 PM Richard Davey notifications@github.com wrote:

And yet by existing publicly there have been hundreds of updates and fixes contributed to them. So yeah, let’s hide them away where no one can help with them, because of course that would really speed up their growth. Genius idea, can’t wait for your next insight.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/photonstorm/phaser/issues/3224#issuecomment-411917180, or mute the thread https://github.com/notifications/unsubscribe-auth/ADMHHwCkFyRh0fQC2tErc5ObqAQcttDOks5uPLaEgaJpZM4SErN3 .

[thosakwe]

If you are using open-source software and don’t expect to see incomplete features... Idk what else you’re expecting, especially in a docs repo, when docs tend to be a continuous body of work.

Hiding away the defs could also mean that people who could contribute to them, wouldn’t even know they were there.

Not to be harsh, but IMO it’s really not a big deal to have a single .d.ts file you have to download when you want TypeScript definitions. It’s already simpler than using a package manager to solely download a metadata file.

[Nodragem]

yep I totally agree, but maybe we could add a little sentence in the doc to explain we can just copy-paste the file in the project :)

Anyway, I am a big fan of Phaser; I am very happy to have met this amazingly-fun-to-use library; take all the time you need to polish Phaser 3 :) Thank you to all the contributors, and to the creator @photonstorm!

[hackhat]

@photonstorm is not about taking time. I can copy paste quickly, is about wasting time figuring out that's the "best practice". I couldn't believe I still need to copy paste a library in 2018, so that's why it took me a while to "accept" it.

[photonstorm]

It literally tells you what to do, and why, in the readme, under the TypeScript heading:

“As soon as we're happy with the accuracy of the TS defs we'll merge them into the main repo, for now, please download them from the docs repo, linked above, and add them to your project. When we release new versions of Phaser we publish new TS defs too.”

[Nodragem]

@hackhat yes and no. I agree that it took me time to figure it out, but I disagree with the "we are in 2018" comment :) it is totally acceptable to have to copy-paste a "beta" version of the TS defs file.

@photonstorm ... Whaahou I just discovered Phaser 3's documentation :D is there a link to it on the official website? For people who wonder, the piece of text can be found here: https://photonstorm.github.io/phaser3-docs/index.html#toc4__anchor Maybe the text can be slightly modified to say something like: Copy-paste the TS defs file (available here) anywhere in your project, if using VS code it will be detected automatically (does it work automatically with other editors?).

[hackhat]

@photonstorm as you can see many people have the same issue. I was in a rush, I saw "TypeScript Definitions are now available.", just clicked on it and tried to use. If that happens, means something is not put a in way that is easy to understand.

For example "please download them from the docs repo", I understand "go to the docs repo and download them with npm/yarn", not open the file, copy the contents and paste in a file in your project. I think that's the default meaning for downloading a library in js nowadays, but I might be wrong.

@Nodragem but you can install a beta version of phaser for example. Anyway, doesn't really matter. I just gave my opinion, I don't mind copy pasting, but I last time I did that was probably a few years ago. I didn't say is not acceptable, I just say I can't believe.

[SeanA91]

I'm sorry but if you're in too much of a rush to do proper research into new technologies when you use them for the first time then that is on you, this is true of any field of work.

For example, I googled phaser 3 typescript, found this thread, read through it, (was astonished by how much the developers of this free and open source platform have to deal with,) and mid way through found the information I needed and was ready to start using it with typscript in all of a few minutes of reading, and will not have this issue again when starting a new project with it.

I would also like to point out it has been on the main github readme since march 30th according to commit history.

I apologize for the mini rant that is somewhat off topic, but after reading through this I couldn't really help it. I've never used this before but I have to say, I'm not sure I would have had the same patience as these devs.

[thosakwe]

Honestly, this thread makes me want to become a Phaser contributor... Guess I'll get started on some open issues.

[G-Rath]

@photonstorm why not just publish the types to DefinitelyTyped? That way people can install it (and find it, since doing @types/* for packages in TypeScript is almost second nature, to the point that TypeScript itself suggests this as a quickfix), and keep it up to date very easily.

Personally, I prefer having types over at DefinitelyTyped anyway, as in the past it's proven to be annoying for developers to have to release whole new versions of their packages just for fixing issues with .d.ts files (This is what happened with react-redux, for example).

[ampled]

I'm pretty sure they're not published yet because they're not quite ready / finished but at this point I'm experiencing more and more benefits to publish them than not:

• They're already pretty good (anything is better than nothing when it comes to typedefs)
• Publishing them behind @types/phaser would provide versioning without having to track the published versions in the documentation repo with git
• Publishing them would identify problems earlier

I'll assume that the desired goal is to publish them in the main repo which would also make it easer to direct people eager to contribute to the correct place to fix typing issues (jsdoc)