Deck.gl: Add typescript declarations

[pannz]

Hi! great work, will deck.gl add typescript types declare file ?
thanks !

[ibgreen]

@pannz We are not planning to add a typescript types file but would happily take a contribution in the form of a PR.

[chrisgervang]

I've started one. I'll add it to https://github.com/DefinitelyTyped/DefinitelyTyped until it is mature enough to cover all the common usages. It takes a good amount of effort to write these for big libraries like deck.gl.

For example, I've made a lot of contributions to the plotly js definition. The community is still filling in gaps a year later.. But it has been so useful in teaching others how to use the library! For that reason alone, I think my effort was worth it. Hoping to get a similar result with the deck.gl/luma.gl type definition.

[ibgreen]

@chrisgervang FYI, if you want to generate type definitions for the layer props, we are adding a prop types declarations to the Layer classes.

The point being that a node.js script could import the layers, walk the prop types and auto generate typescript and flow type definitions. You'd get automatic updates whenever layers are changed or added.

Ping me if interested in this approach.

[chrisgervang]

yes! I've written scripts like this before. It gets the definition coverage up very quickly, and worth the effort for big libs! So, it's a good start, but results in a pretty low res definition since every non-primitive (i.e. function and object) prop types need to set to the any type.

[ibgreen]

pretty low res definition since every non-primitive (i.e. function and object) prop types need to set to the any type.

Not sure what the any type is. Is that a limitation in React propTypes or TypeScript? FWIW, deck.gl doesn't use React PropTypes. We can extend the system with any metadata we need.

[chrisgervang]

It's for typescript. An any (TS, Flow) type is used to opt-out of type-checking.

[danmarshall]

Hi @chrisgervang , I've also started one. Mine is also not mature but still useful for deck, luma, and a few Views and Layers. Perhaps we can collaborate in a separate repo prior to publishing to DefinitelyTyped?

[chrisgervang]

Yeah! Sure, wanna send me a link to one?

On Wed, Jun 20, 2018 at 4:39 PM Dan Marshall [e-mail]
wrote:

Hi @chrisgervang https://github.com/chrisgervang , I've also started
one. Mine is also not mature but still useful for deck, luma, and a few
Views and Layers. Perhaps we can collaborate in a separate repo prior to
publishing to DefinitelyTyped?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/uber/deck.gl/issues/1103#issuecomment-398930609, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACWPa64Pa-beXXWNULx97TfCne4nZ8c6ks5t-t0qgaJpZM4QKvlz
.

[ibgreen]

You should be able to automate this, at least for the layers. To show what I had in mind, I opened a simple PR #1943 that walks the layer prop types and generates something like the below, which you can easily customize to taste (typescript or flow...).

```
ypes BezierCurveLayer {
data: data
dataComparator: unknown
dataTransform: function
fetch: function
updateTriggers: object
numInstances: unknown
visible: boolean
pickable: boolean
opacity: number
onHover: function
onClick: function
coordinateSystem: number
coordinateOrigin: array
parameters: object
uniforms: object
framebuffer: unknown
animation: unknown
getPolygonOffset: function
highlightedObjectIndex: unknown
autoHighlight: boolean
highlightColor: color
strokeWidth: number
fp64: boolean
getSourcePosition: function
getTargetPosition: function
getControlPoint: function
getColor: function
}

types GPUScreenGridLayer {
data: data
dataComparator: unknown
dataTransform: function
fetch: function
updateTriggers: object
numInstances: unknown
visible: boolean
pickable: boolean
```

[danmarshall]

@chrisgervang - Ok, I've started a generator here: https://github.com/danmarshall/deckgl-typings
I've only generated for deck.gl but the same technique can be applied to @deck.gl/core and @deck.gl/layers to fill out the rest. I'll try to get to it a little later, or you might want to give it a go.

@ibgreen thanks for the sample 👍 it will probably come in handy if they can't be generated from source.

[ClaudiuCeia]

@danmarshall Do you have an example of successfully using deck.gl with Typescript without patching code in node_modules? I've been struggling for a few hours here and can't manage to get a simple point cloud layer to work.

Although fully typed deck.gl would be nice, at this point anything would work for me, but the TS compiler just keeps choking no matter what I try. Maybe there is a way for me to write React components in JS and use them in TS so I can get away with it but I can't seem to figure it out. Any ideas?

[chrisgervang]

We don’t yet have complete type definitions for deck.gl. Our goal is to
write a definition file that the TS compile uses to provide types on the
external interfaces of deck.gl (basically anything that is “exported”). We
don’t want to touch the deck.gl source code in this effort, nor do we have
to.

Once the definition has coverage of most of the common deck.gl use cases,
someone will put it into DefinitlyTyped or in this repo. Usually I
recommend DT until almost everything is typed, and then move it to the
project repo if the maintainers of the repo are ok with that (not all are).

Once in DT the types will be avalible as an npm package, until then you can
put any .d.ts file in project, and instruct the TS compiler to use it via
tsconfig.json

On Tue, Jun 26, 2018 at 8:40 AM Claudiu Ceia [e-mail]
wrote:

@danmarshall https://github.com/danmarshall Do you have an example of
successfully using deck.gl with Typescript without patching code in
node_modules? I've been struggling for a few hours here and can't manage
to get a simple point cloud layer to work.

Although fully typed deck.gl would be nice, at this point anything would
work for me, but the TS compiler just keeps choking no matter what I try.
Maybe there is a way for me to write React components in JS and use them in
TS so I can get away with it but I can't seem to figure it out. Any ideas?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/uber/deck.gl/issues/1103#issuecomment-400356284, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACWPa0seCCjHIysKPEvA0duxMBB5J5I3ks5uAlXVgaJpZM4QKvlz
.

[ClaudiuCeia]

@chrisgervang That makes sense, and I agree that there's no need to touch the deck.gl code at all.

But even if I declare module '*' such that everything becomes typed as any, I still see the Typescript compiler complaining about missing dependencies in deck.gl.

I imagine it may be something I'm not doing correctly in my tsconfig or something, which is why I was asking for an example project in Typescript.

[danmarshall]

Hi @ClaudiuCeia - I just this minute pushed some fixes and created a sample that consumes the typings:

https://github.com/danmarshall/deckgl-typescript-example

Please let me know if this works for you. The typings are a work in progress, there are still a ton of anys , but the shape of the library exists. This first version was generated to get the module shapes, but from here on, we will need to add minor fixups manually, or with specialized tooling as @ibgreen has suggested.

[ClaudiuCeia]

Hey @danmarshall - the example you provided works great. I still can't get the React version to work even on top of your example, but I think I may be importing from the wrong place or something, I'll open a new issue to talk there so I don't spam everyone here.

Thank you!

[CaitlinWeb]

I would also like to have Typescript definitions for deck.gl to use with a React project. What's the status of adding types to DefinitelyTyped or this repo? I can't seem to find any beyond danmarshall's repo (which may be out of date?).

[danmarshall]

Hi @CaitlinWeb - see some related comments here and here as to why these probably would not be added to this repo.
I would be happy to add my types to DefinitelyTyped, but I haven't done so, as you've noted, because I haven't revised them to the latest version of deck.gl. I've done the work of creating the types for my project https://github.com/Microsoft/SandDance, and I have plans to rewrite them when I also upgrade to deck.gl@7.

[danmarshall]

FYI I've just published typings for v7 - https://www.npmjs.com/package/@danmarshall/deckgl-typings