Typescript Support about fundamental-react HOT 27 CLOSED

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

from fundamental-react.

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.

from fundamental-react.

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.

from fundamental-react.

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

• ActionBar
• Alert
• Badge
• Breadcrumb
• Button
• Calendar
• Combobox Input
• Contextual Menu
• DatePicker
• Dropdown
• Forms
• Icon
• Identifier
• Image
• InlineHelp
• InputGroup
• List Group
• Localisation Editor
• Menu
• Modal
• MultiInput
• Navigation Bar
• Pagination
• Panel
• Popover
• SearchInput
• Side Navigation
• Table
• Tabs
• Tile and Tile Grid
• Time
• Time Picker
• Toggle
• Token
• Tree

from fundamental-react.

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.

from fundamental-react.

Another one bites the dust...
jestjs/jest#7554

from fundamental-react.

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:

• Written in Typescript
• Written in Javascript, .d.ts maintained by the official team.
• Written in Javascript, @types maintained by 3-rd party developers.
• Written in Javascript and no typing at all.

from fundamental-react.

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:

• A compiler for your code, choosing which type of ES output you would like to address
• Since 3.0, it has project reference, helping to work with mono repos for instance, which is really useful for project with many components, like UI frameworks

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

from fundamental-react.

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.

from fundamental-react.

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.

from fundamental-react.

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.

from fundamental-react.

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/

from fundamental-react.

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

from fundamental-react.

@droshev quick thoughts:

From this repository benefits:

• static typechecks !
• ease of code maintenance, especially with growing codebase
• saving developer time (after initial startup which is for sure more complex, but really well covered today) code completion, intellisense...
• react support is really good with typescript

For consumers:

• Sharing your component APIs with d.ts files

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

from fundamental-react.

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

from fundamental-react.

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

from fundamental-react.

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/

from fundamental-react.

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

from fundamental-react.

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

from fundamental-react.

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

from fundamental-react.

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.

from fundamental-react.

@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

from fundamental-react.

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

Cannot thank you enough for this! thumbs up

from fundamental-react.

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...

from fundamental-react.

As a start, I started working on updating the DefinitelyTyped types here: DefinitelyTyped/DefinitelyTyped#41027

from fundamental-react.

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!

from fundamental-react.

Drafting an update to the DefinitelyTyped types DefinitelyTyped/DefinitelyTyped#43067

This has been merged as @types/[email protected]

from fundamental-react.