Mapbox-gl-js: Typescript Definition

[danzel]

An issue is probably not the right place for this, but so people know, I've started on a typescript definition for mapbox-gl-js over here:

https://github.com/Smartrak/mapbox-gl-js-typescript

It's all manually created and very incomplete. I've just added what I need so far.

(This lets you use mapbox-gl-js with typescript)
Feel free to close this etc. I haven't seen a request for a typescript definition yet, so maybe no one cares about this, haha :P

[lucaswoj]

Thank you @danzel! I will add this to the README.md 😄

[lucaswoj]

Check it out: https://github.com/mapbox/mapbox-gl-js#related-projects

[danzel]

Awesome thanks :)

[dobrud]

I also wrote a definition file for Mapbox GL JS based on the documentation and source code, specifically arranged to work with typings.

You can find it here: https://github.com/dobrud/typed-mapbox-gl.

Unfortunately, I didn't spot the existing definitions of @danzel, so my work is written from scratch.

[danzel]

Awesome, your one looks more complete for some of the class (especially Map!).
Why did you make everything interfaces?

[lucaswoj]

I encourage you two to work to combine the best of your definition files into a single repo. Let me know how I can help!

[danzel]

absolutely :)

[leontyr]

Hi guys,

I think this is going to be super useful. However, I am having problem installing it.

When I run the one from @danzel, I get:

typings ERR! message Attempted to compile "'mapbox-gl/mapboxgl'" as an external module, but it looks like a global module.

typings ERR! cwd D:\Documents\Visual Studio 2015\Projects\angular
typings ERR! system Windows_NT 10.0.10586
typings ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Leon\\AppData\\Roaming\\npm\\node_modules\\typings\\dist\\bin.js" "install" "'mapbox-gl/mapboxgl'=github:Smartrak/mapbox-gl-js-typescript/mapboxgl.d.ts" "--save"
typings ERR! node -v v6.1.0
typings ERR! typings -v 1.0.1

I can install the one from @dobrud, But when I run my webpack, I get the error:

D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack-core\lib\NormalModuleMixin.js:151
                                throw e;
                                ^

TypeError: Cannot read property 'flags' of undefined
    at getSymbolLinks (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:15095:23)
    at checkExternalModuleExports (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28249:25)
    at checkExportAssignment (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28227:13)
    at checkSourceElement (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28395:28)
    at Object.forEach (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:956:30)
    at checkBlock (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:26428:16)
    at checkSourceElement (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28342:28)
    at Object.forEach (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:956:30)
    at checkSourceFileWorker (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28462:20)
    at checkSourceFile (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28442:13)
    at getDiagnosticsWorker (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28490:17)
    at Object.getDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28481:24)
    at D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39977:33
    at runWithCancellationToken (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39948:24)
    at getSemanticDiagnosticsForFile (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39968:20)
    at getDiagnosticsHelper (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39916:24)
    at Object.getSemanticDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39931:20)
    at Object.getSemanticDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:49054:47)
    at D:\Documents\Visual Studio 2015\Projects\angular\node_modules\ts-loader\index.js:332:99
    at Array.forEach (native)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\ts-loader\index.js:331:14)
    at Compiler.next (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:69:14)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:71:13)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compiler.js:400:9)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compilation.js:577:13)
    at Compilation.applyPluginsAsync (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:60:69)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compilation.js:572:10)
    at Compilation.next (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:67:11)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\optimize\UglifyJsPlugin.js:140:4)

I did npm install mapbox-gl before the typings install. Do I need to do anything else to make it work?

Thanks,

[danzel]

Will have a look, it worked with typings 0.8. but not with 1.0

[danzel]

Ok, have got it working again and put a readme in the project:
https://github.com/Smartrak/mapbox-gl-js-typescript

[leontyr]

Thanks @danzel

The typings install is fine now but I still can't import mapbox-gl. Getting the following error when run webpack:

D:\Documents\Visual Studio 2015\Projects\angular>webpack
ts-loader: Using [email protected] and D:\Documents\Visual Studio 2015\Projects\angular\tsconfig.json
D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack-core\lib\NormalModuleMixin.js:151
                                throw e;
                                ^

TypeError: Cannot read property 'flags' of undefined
    at getSymbolLinks (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:15095:23)
    at checkExternalModuleExports (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28249:25)
    at checkExportAssignment (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28227:13)
    at checkSourceElement (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28395:28)
    at Object.forEach (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:956:30)
    at checkBlock (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:26428:16)
    at checkSourceElement (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28342:28)
    at Object.forEach (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:956:30)
    at checkSourceFileWorker (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28462:20)
    at checkSourceFile (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28442:13)
    at getDiagnosticsWorker (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28490:17)
    at Object.getDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:28481:24)
    at D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39977:33
    at runWithCancellationToken (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39948:24)
    at getSemanticDiagnosticsForFile (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39968:20)
    at getDiagnosticsHelper (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39916:24)
    at Object.getSemanticDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:39931:20)
    at Object.getSemanticDiagnostics (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\typescript\lib\typescript.js:49054:47)
    at D:\Documents\Visual Studio 2015\Projects\angular\node_modules\ts-loader\index.js:332:99
    at Array.forEach (native)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\ts-loader\index.js:331:14)
    at Compiler.next (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:69:14)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:71:13)
    at Compiler.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compiler.js:400:9)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compilation.js:577:13)
    at Compilation.applyPluginsAsync (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:60:69)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\Compilation.js:572:10)
    at Compilation.next (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\tapable\lib\Tapable.js:67:11)
    at Compilation.<anonymous> (D:\Documents\Visual Studio 2015\Projects\angular\node_modules\webpack\lib\optimize\UglifyJsPlugin.js:140:4)

[danzel]

The problem is somewhere in your webpack config.
Here is a minimal working example with webpack and typescript:
https://github.com/danzel/mapboxgl-webpack-example

[leontyr]

Yes, you are right. I've fixed it and now it works but only in the entry file of webpack. I don't think this is related to your definition file though.

Thank you @danzel !

[dobrud]

Sorry for the long absence. @danzel Actually I don't know why I've started with interfaces, I have now switched the interfaces to classes.
I updated my definitions by going through the docs, so now the whole documented part of the API is covered. The style reference is the only thing that's left.

During my work, I stumbled upon some flaws in the docs. What can I do to help to resolve them?

Beside this I made a PR to the DefinitelyTyped library, maybe you want to have a quick look over it.

[danzel]

Good stuff!

For the docs you can submit a PR here, they are generated from the code, just take a read of this first:
https://github.com/mapbox/mapbox-gl-js/tree/master/docs#branch-usage

I'm unsure about having the definitions live in the DefinitelyType repository. They seem slow to merge stuff, and now that tsd is deprecated in favor of typings they don't need to be there.
I feel they should live in their own repository (unless there is a reason for them to be in DT I don't know of?)

In my types I added the style definitions, they are very useful too:
https://github.com/Smartrak/mapbox-gl-js-typescript/blob/master/mapbox-gl.d.ts#L221-L306
I also gave Layer its own interface (for use with map.addLayer).

I'm happy to send these as a PR to yours, we should decide on the DT bit first though.

[dobrud]

Yeah you're right.. I didn't get the recent changes from typings 0.x to 1.x where they ditched DT as the default source. I closed the PR at the moment.. Wouldn't it be best if the typescript definition are directly integrated into the mapbox-gl-js package? 🤔

[dobrud]

I've updated my repository to the same version as in my DefinitelyTyped PR.. Feel free to make a PR with your style definitions

[danzel]

If mapbox was maintaining the definitions then they should live in the mapbox-gl-js repo, if they aren't then it's better they live elsewhere, otherwise there is a good chance they'll ship broken or unsynced definitions.

I'll spend some time this week and send a PR to update your definitions and then we can update the README here to point to them too :)

[filoxo]

@danzel @dobrud would you two be open to reconsidering having these typings exist outside of DefinitelyTyped? Here's my use case that explains why they might be better off in DT.

Angular2 has moved away from using typings at all (its no longer a devDependency on projects created with the angular-cli-beta.14). Instead they're are recommending managing types using npm under the @types namespace (managed by DT if I'm not mistaken). These are auto-published to npm based on the main repo. In fact, in my current Angular2 project, I have external dependencies on 4 other libs. All of them have typings on @types _except_ mapbox-gl.

Of course I could just do this myself, just want to see if you guys are willing to buy into it. Otherwise I'll fork and contribute.

[danzel]

Is there somewhere that explains the npm published typing in more detail?
I've seen it on a project or two but I'm not totally sure what is going on.
Thanks :)

On Wednesday, 21 September 2016, Carlos [email protected] wrote:

@danzel https://github.com/danzel @dobrud https://github.com/dobrud
would you two be open to reconsidering having these typings exist outside
of DefinitelyTyped? Here's my use case that explains why they might be
better off in DT.

Angular2 has moved away from using typings at all (its no longer a
devDependency on projects created with the angular-cli-beta.14). Instead
they're are recommending managing types using npm under the @types
namespace. These are auto-published
https://github.com/Microsoft/types-publisher to npm based on the main
repo. In fact, in my current Angular2 project, I have external dependencies
on 4 other libs. All of them have typings on `@types
https://github.com/types

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/2440#issuecomment-248387841,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAX_fgt5G6D5P93sj8db84xQPm_UDPdXks5qsCRggaJpZM4IG3Sl
.

[filoxo]

Yea, I think its actually a simplification of type definition inclusion with TypeScript 2.

http://stackoverflow.com/questions/38444279/how-should-i-use-types-with-typescript-2

The TL;DR is:

• For contributors/maintainers
  
  
  
  • Just contribute typings to DT's repo
  
  
  • Typings will be automagically published to @types npm namespace based on Gh repo
  
  
• For user projects
  
  
  
  • typings.json is no longer needed
  
  
  • typings are instead managed and imported using npm
  
  
  • TypeScript will instead resolve from node_modules/ instead of a separate typings/ directory
  
  

That said, @types and typings can still be used together. Just include typings/ in your project's typeRoots map in tsconfig.json.
I'd just personally like to make my app's upgrade to Angular 2.0 without needing the extra dependency on typings just for mapbox-gl's types.

[filoxo]

Sorry to not have linked to a better source. Here's is a more authoritative article:
https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

[bryanjjohnson]

I added the typings to DefinitelyTyped. To download them, you first need to download the geojson typings, then mapbox-gl.

typings install --save --global dt~geojson
typings install --save --global dt~mapbox-gl

[danzel]

Awesome!
You should send a PR to change the typescript link in the readme, I'm not quite sure where to change it to link to
https://github.com/mapbox/mapbox-gl-js#third-party-projects