Typescript Definition #2440

danzel · 2016-04-13T22:18:07Z

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 · 2016-04-13T23:44:42Z

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

lucaswoj · 2016-04-14T00:00:55Z

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

danzel · 2016-04-14T00:02:08Z

Awesome thanks :)

dobrud · 2016-04-17T15:53:09Z

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 · 2016-04-17T20:37:08Z

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

lucaswoj · 2016-04-18T17:43:04Z

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 · 2016-04-18T20:41:09Z

absolutely :)

leontyr · 2016-05-16T19:40:03Z

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 · 2016-05-16T20:30:23Z

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

danzel · 2016-05-16T21:25:32Z

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

leontyr · 2016-05-16T21:50:08Z

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 · 2016-05-16T22:17:12Z

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 · 2016-05-17T13:13:48Z

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 · 2016-05-18T11:04:10Z

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 · 2016-05-18T20:58:37Z

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 · 2016-05-20T10:29:25Z

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 · 2016-05-20T13:16:03Z

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 · 2016-05-22T20:42:43Z

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 · 2016-09-20T18:22:16Z

@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 · 2016-09-20T19:09:42Z

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

filoxo · 2016-09-20T19:27:39Z

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 · 2016-09-22T01:43:20Z

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 · 2016-09-22T20:37:57Z

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 · 2016-09-22T23:24:04Z

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

lucaswoj closed this as completed Apr 14, 2016

danzel mentioned this issue May 23, 2016

Adding to the project Smartrak/mapbox-gl-js-typescript#1

Closed

dobrud mentioned this issue Sep 20, 2016

Add Mapbox GL JS typings DefinitelyTyped/DefinitelyTyped#9140

Closed

3 tasks

andrewharvey mentioned this issue Jan 21, 2020

add typescript declaration files mapbox/mapbox-gl-geocoder#333

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typescript Definition #2440

Typescript Definition #2440

danzel commented Apr 13, 2016

lucaswoj commented Apr 13, 2016

lucaswoj commented Apr 14, 2016

danzel commented Apr 14, 2016

dobrud commented Apr 17, 2016

danzel commented Apr 17, 2016

lucaswoj commented Apr 18, 2016 •

edited

Loading

danzel commented Apr 18, 2016

leontyr commented May 16, 2016

danzel commented May 16, 2016

danzel commented May 16, 2016

leontyr commented May 16, 2016

danzel commented May 16, 2016

leontyr commented May 17, 2016

dobrud commented May 18, 2016

danzel commented May 18, 2016

dobrud commented May 20, 2016

dobrud commented May 20, 2016

danzel commented May 22, 2016

filoxo commented Sep 20, 2016 •

edited

Loading

danzel commented Sep 20, 2016

filoxo commented Sep 20, 2016 •

edited

Loading

filoxo commented Sep 22, 2016

bryanjjohnson commented Sep 22, 2016

danzel commented Sep 22, 2016

Typescript Definition #2440

Typescript Definition #2440

Comments

danzel commented Apr 13, 2016

lucaswoj commented Apr 13, 2016

lucaswoj commented Apr 14, 2016

danzel commented Apr 14, 2016

dobrud commented Apr 17, 2016

danzel commented Apr 17, 2016

lucaswoj commented Apr 18, 2016 • edited Loading

danzel commented Apr 18, 2016

leontyr commented May 16, 2016

danzel commented May 16, 2016

danzel commented May 16, 2016

leontyr commented May 16, 2016

danzel commented May 16, 2016

leontyr commented May 17, 2016

dobrud commented May 18, 2016

danzel commented May 18, 2016

dobrud commented May 20, 2016

dobrud commented May 20, 2016

danzel commented May 22, 2016

filoxo commented Sep 20, 2016 • edited Loading

danzel commented Sep 20, 2016

filoxo commented Sep 20, 2016 • edited Loading

filoxo commented Sep 22, 2016

bryanjjohnson commented Sep 22, 2016

danzel commented Sep 22, 2016

lucaswoj commented Apr 18, 2016 •

edited

Loading

filoxo commented Sep 20, 2016 •

edited

Loading

filoxo commented Sep 20, 2016 •

edited

Loading