Kepler.gl: [Dev Feature] Add TypeScript Support

[bojdell]

Is your feature request related to a problem? Please describe.
User story: As a developer working in the kepler.gl codebase, I want better
type safety to make development faster, safer, and more enjoyable.

Describe the solution you'd like
There are a few type safety tools out there for Javascript projects.
We've used Typescript for 2+ years at Samsara and it has worked
very well for us at scale, so I would advocate for using Typescript
over other frameworks (but open to discussion). Some other
potential reasons for using Typescript:

• Incremental migration - since Typescript is a superset of Javascript,
  all Javascript is valid Typescript and files can be migrated one at a time.

• Plenty of tooling, docs, and community support

There is a concise doc here about how to migrate a React Javascript project
to Typescript: https://github.com/microsoft/TypeScript-React-Conversion-Guide

Happy to talk in more detail about migration plans if there is interest in this
sort of change.

Describe alternatives you've considered
Some alternatives are listed in this blog post (Flow, etc.). I'll be honest -
I haven't worked with other JS typing frameworks besides Typescript,
so I'm open to having a discussion. I just know that I've seen Typescript
work at scale and it has been a good experience for us at Samsara.

Additional context
N/A

[heshan0131]

I personally like Typescript. But migrating kepler to Typescript is probably a way bigger project than we can take on right now. Also it won't be friendly to js only contributors.

We are considering adding Flow. it would be an intermediate solution to provide type safety.
https://github.com/keplergl/kepler.gl/issues/732

[bojdell]

I agree migrating the entire codebase would be a large project, but I was hoping that at least configuring a tool and then incrementally migrating things over time could be an option. I'd be willing to submit a PR that adds Typescript support.

I did some more reading about Flow - I think its feature set sounds pretty similar to Typescript. They both provide some static analysis of JS files and require type annotations in the code to get the most benefit out of the tool. I think Flow actually requires more work to setup since @flow comments must be added throughout the codebase (but maybe I'm wrong). Curious why Flow's type annotations would be more friendly to JS-only contributers than Typescript?

Obviously I'm a newcomer to this codebase, so not trying to rock the boat too much if the broader team feels strongly about using Flow. But was hoping that I could help leave things better than I found them by adding some type safety :)

PS - According to Github, Typescript is used in 20x+ more projects than Flow (~1.5M vs ~70K) and it is ranked in the top most loved and wanted languages by Stackoverflow (but maybe that's unfair since Flow may not have been considered a "language" in the survey). No worries if you still go with Flow - just wanted to surface some data in case it helps!

[heshan0131]

We are considering Flow because we use it in all our other web applications inside Uber. That said, I do think TypeScript is better at providing type safety.

Can we just export a .d.ts file from kepler.gl for TypeScript project to import as an intermediate step?

[simPod]

_BaseUI went full TS and they're doing great https://github.com/uber/baseweb_

Have anyone already started working on .d.ts definition? I could not find any more info on that so I'm not entirely sure where to start, whether from scratch or to contribute somewhere. Thanks!

[ChrisJamesC]

For reference, some work towards typescript has been done in #1116. Thanks a lot!
It seems like typings are not exported yet though, so we can't use them when importing the library.

[ibgreen]

We are working towards the goal of getting all types exported but it is a big effort and it is taking more time than we would like.

This is definitely an area were we could use some help, if anyone is interested in contributing here let us know.

[thien-do]

Hi, just want to say thank you that the typing currently seems good :+1: it isn't automatically and I must imported from "src" (don't know why you guys don't put it in "dist") but the types are good and complete!

[sunboshan]

Hi, thanks for adding the types definition in the codebase! However, when I use it in a typescript project for the , it's complaining that there's missing properties like mapStyles, appName etc. It's because it's defined as required in the d.ts for KeplerGl component. https://github.com/keplergl/kepler.gl/blob/master/src/components/kepler-gl.d.ts#L30-L33

Is there a way for us to use the component without putting those required props? I believe not all of them are required, right?