search

SAP / fundamental-react

React implementation of the reusable component library designed in Fundamental Library Styles
https://sap.github.io/fundamental-react
Apache License 2.0
189 stars 78 forks source link

Typescript Support #32

Closed giovannidegani closed 4 years ago

giovannidegani commented 5 years ago

Any plans to use typescript or support it with typings ?

droshev commented 5 years ago

@tiefox could you share your thoughts about using TS in React projects?

o0Djeen0o commented 5 years ago

@droshev quick thoughts:

From this repository benefits:

For consumers:

I don't want to make a real advert or develop arguments, I think that many good writers have done it already :-)

giovannidegani commented 5 years ago

Sorry for late reply, but my thoughts are exactly the same as @o0Djeen0o . In my company we are looking to standardize all front-end development on Typescript, and currently looking to base our own internal component library for our internal enterprise apps on a good foundation, and we do already some Fiori + UI5, but also want to provide a standard to other teams working with React and Angular. Would be awesome if it was already in Typescript :)

droshev commented 5 years ago

@o0Djeen0o @tiefox thanks for your feedback. I have asked few colleagues writing in React such as @casche to share some ideas. They use https://flow.org/. What are your thoughts for TS vs. Flow?

giovannidegani commented 5 years ago

For me is mostly the traction that TS is getting vs Flow, the ecosystem is booming and we are making a bet on it. See this https://2018.stateofjs.com/javascript-flavors/conclusion/

droshev commented 5 years ago

@tiefox I have seen that link. Both of them are close in terms of dev's satisfaction. I know that TS is more popular this year. This may flip quite fast. Can we try to evaluate both and make a decision? What do you think if we (me, @InnaAtanasova, and @chrismanciero) we use Flow for a component and you use TS for the same component? What do you think? If you agree which component would you propose?

o0Djeen0o commented 5 years ago

Hi again @droshev,

I think that both solutions are valid for static type checking. As @tiefox mentionned, typescript has better support from the open source community, but Flow is also used and has Facebook behind, so both solutions valid here.

The real difference is that Typescript is not just about static typings. It can work like that (you have for instance a babel preset to just remove typings info, like for Flow), but it is more a language with:

I'll let you check what fits your needs best.

droshev commented 5 years ago

@o0Djeen0o @tiefox ok, we will discuss it and keep you posted

giovannidegani commented 5 years ago

@droshev Sure! Lets figure out the right component and do this :)

chrismanciero commented 5 years ago

Since the question is still out there as to how/if we should use TypeScript or Flow for our components, I took the task of seeing what would be involved with converting a component into TypeScript. There was no definitive reason why I choose TypeScript over Flow, I just wanted to learn TypeScript 😄 .

For my learning process, I decided to convert the SearchInput control. I create a separate create-react-app project with typescript enabled and it took about less than an hour to get the SearchInput control working exactly like it does in the current version. I did spend more time familiarizing myself with Typescript syntax since I haven't used it in a while than I did actually convert the JS to TSX.

Because that conversion was so fast I also did the MultiInput, Modal and Pagination components as well. I would have to say in total time worked, it probably took less than 2 hours to convert all 4 components to TypeScript.

giovannidegani commented 5 years ago

Great @chrismanciero . I didn't had time yet to look into this ( just a lousy architect with barely any time to code anymore ) but I will also try a few.

alexanderchan commented 5 years ago

I don't want to start a typescript vs flow debate but with Microsoft behind TypeScript it's been great with tooling and also the fact that the angular fundamentals codebase will also be leaning towards typescript -- I think the answer is pretty straightforward about which to choose for consistency.

chrismanciero commented 5 years ago

I created this branch that has about 18 of 31 components rewritten using TypeScript - https://github.com/SAP/fundamental-react/tree/typescript-conversion

Maybe that will push the conversation further as to what solution to use and if we go with TypeScript the ground work is setup to go foward with it.

CodesOfRa commented 5 years ago

Hi 👋 I am adding here the list of components and their status from TypeScript branch

alexanderchan commented 5 years ago

@chrismanciero and @CodesOfRa these look great! I think one thing you may want to do is export the interface of the props and anything else passed in so that devs can import those props and use them as well. palantir/blueprint has a good example of this where they export IButtonProps

alexanderchan commented 5 years ago

Looks like things are still moving towards typescript, just in case we need any more reason, Kent C Dodds has a good post on Why every new web app at PayPal starts with TypeScript coming from having him used Flow prior to TypeScript.

giovannidegani commented 5 years ago

Looks like things are still moving towards typescript, just in case we need any more reason, Kent C Dodds has a good post on Why every new web app at PayPal starts with TypeScript coming from having him used Flow prior to TypeScript.

Another interesting one: https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/

mobot11 commented 5 years ago

I really like this tweet from Dan Abramov concerning when to implement a type system. https://twitter.com/dan_abramov/status/1084850819965554688. I'd say currently most of our 'bugs' are related to infrastructure and missing features. Once the library matures a bit more I'd be more inclined to consider adding a type system.

giovannidegani commented 5 years ago

Another one bites the dust... https://github.com/facebook/jest/pull/7554

lmcarreiro commented 5 years ago

After using TypeScript for some time in a React+Redux+Material-UI project, I can't live without it anymore. It's like abandoning the syntax highlighting and start using the windows's notepad.exe. I'll start to use Fundamental the day it start supporting TypeScript.

Feinbube commented 5 years ago

enjoy: https://www.npmjs.com/package/@types/fundamental-react :D

tnurmi82 commented 4 years ago

enjoy: https://www.npmjs.com/package/@types/fundamental-react :D

Cannot thank you enough for this! thumbs up

YuJianrong commented 4 years ago

enjoy: https://www.npmjs.com/package/@types/fundamental-react :D

So nice! Is there any plan to merge these kind of typing into product and add do Typescript support officially?

I cannot imaging living without Typescript now and my Library choice priority is:

tnurmi82 commented 4 years ago

I cannot imaging living without Typescript

Could not agree more. I'm maintaining a bunch of older Javascript apps, and only recently started in a new Typescript project. It took about 3 seconds of using TS+VSCode to convince me there is no going back...

skvale commented 4 years ago

As a start, I started working on updating the DefinitelyTyped types here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/41027

zanonnicola commented 4 years ago

I just tried today to pull the types for this library but it seems there's a miss-match between some components.

Fo example the Select component seems to be called FormSelect.

From the docs:

<Select placeholder="Select">
    <List>
      <List.Item>
        <List.Text>
...

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/fundamental-react/lib/Forms/FormSelect.d.ts

Would be great to merge types definition into the project!

skvale commented 4 years ago

Drafting an update to the DefinitelyTyped types https://github.com/DefinitelyTyped/DefinitelyTyped/pull/43067

This has been merged as @types/fundamental-react@0.8.1