Typescript Definition

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

@danzel

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

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

Awesome thanks :)

@danzel

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.

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

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!

absolutely :)

@danzel

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,

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

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

@danzel

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 typescript@1.8.10 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)

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

@danzel

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 !

@danzel

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.

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.

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? 🤔

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

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 :)

@danzel

@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 notifications@github.com 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
#2440 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAX_fgt5G6D5P93sj8db84xQPm_UDPdXks5qsCRggaJpZM4IG3Sl
.

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.

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/

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

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

Navigation Menu

Repository navigation

Typescript Definition #2440

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Typescript Definition #2440

Description

Activity

lucaswoj commented on Apr 13, 2016

lucaswoj commented on Apr 14, 2016

danzel commented on Apr 14, 2016

dobrud commented on Apr 17, 2016

danzel commented on Apr 17, 2016

lucaswoj commented on Apr 18, 2016

danzel commented on Apr 18, 2016

leontyr commented on May 16, 2016

danzel commented on May 16, 2016

danzel commented on May 16, 2016

leontyr commented on May 16, 2016

danzel commented on May 16, 2016

leontyr commented on May 17, 2016

dobrud commented on May 18, 2016

danzel commented on May 18, 2016

dobrud commented on May 20, 2016

dobrud commented on May 20, 2016

danzel commented on May 22, 2016

filoxo commented on Sep 20, 2016

danzel commented on Sep 20, 2016

filoxo commented on Sep 20, 2016

filoxo commented on Sep 22, 2016

bryanjjohnson commented on Sep 22, 2016

danzel commented on Sep 22, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions