React-styleguidist: Migrate codebase to TypeScript

[sapegin]

The problem

Recently I've added Flow to some of the files (not many) but it looks like TypeScript is more favourable now among React developers. Also full codebase conversion would help us find bugs.

Proposed solution

Steps to do it, all can be done one by one as separate pull requests:

• [x] Add TS as an option.
  
  
  
  • [x] Add typescript as a dependencey
  
  
  • [x] Add tsconfig.json
  
  
  • [x] Add @babel/preset-typescript to Babel config (babel.config.js)
  
  
  • [x] Add @typescript-eslint/parser and @typescript-eslint/eslint-plugin to ESLint config (.eslintrc)
  
  
  • [x] Update Travis CI config to run TypeScript type check as well.
  
  
• [ ] Replace existing Flow types with TS: update files with @flow comment and replace types inside flow-types with @types/* modules.
• [ ] Remove Flow from dependencies and configs.
• [ ] Convert all files to TS.

How I think it should work:

• Use TS only for type checking, keep Babel as a compiler.
• Keep sane imports syntax: import React from 'react', instead of import * as React from 'react'.

Use Tâmia as an example: look at .babelrc, tsconfig.json and package.json.

Can we use react-javascript-to-typescript-transform for mass conversion? Not really: it needs too many manual changes after and removes all formatting including empty lines.

[smashercosmo]

Do you want to use TS only as a type checker?

[sapegin]

Yup, I'd like to keep Babel setup as is for now.

[goku321]

I would be happy to help :)

[sapegin]

@goku321 That would be great! I've updated he issue with some more details. Let me know if you have any more questions.

[kakadiadarpan]

@sapegin Maybe flow-to-ts can help a bit in this migration. I can try it out and see how it goes 😄

[nathanredblur]

I can help too. I have experience with typescript and react. Tell me how can I start.

[sapegin]

@kakadiadarpan I've tried react-javascript-to-typescript-transform and it wasn't very useful, so would be great if you can try flow-to-ts to compare ;-)

[sapegin]

@nathanredblur That's awesome! I've added a list of steps (unless I'm missing anything) for the conversion — no need to do everything at once though ;-)

[tanvirraj]

@sapegin I love to contribute, Where I can start ?

[sapegin]

@tanvirraj That's awesome! I've added a list of steps (unless I'm missing anything) for the conversion — no need to do everything at once though ;-)

[pavandv]

@sapegin I have been working with TypeScript + React for about a year in my company.. Would be happy to help..

I also happen to know (almost) the internals of this project as I was going through the code to add our own UI to the style guide.

[sapegin]

@pavandv This is great!

For everyone: please write a comment if you're working on a particular task, so we won't do the same thing several times.

[MaxFlower]

@sapegin Could you add me as well?

[sapegin]

@MaxFlower Sure! No need to ask permission ;-)

[pavandv]

@sapegin I'm working on setting up the Typescript Config.

[pavandv]

@sapegin Created PR #1461 for setting up typescript configuration.

[elevatebart]

@sapegin, I believe you can now safely check the eslint and travis boxes.

[elevatebart]

Looked too fast once again... Sorry, my mistake, the only thing that was added was eslint plugin as a dependency without implementing it.
I am on it. Pull Request coming ;)

[elevatebart]

After a few hours dabbling with the eslint set-up, I have a better view of where we are.
I have a few questions regarding the current implementation.

1. One unfortunately cannot have a jsconfig.json and a tsconfig.json I believe we should merge them.
2. The parameter "allowJs": true forces type checking on every js file, including the ones with flow typings. This will break a lot of files. I must add that the flag is not necessary if we start converting the leaves first and follow the dependency tree.
3. Testing has not been mentioned here. I have seen the benefits of writing test files in TypeScript using ts-jest. Please, please can we add ts-jest?

To present my findings, I have created a new Pull Request as draft. Please tell me what you think.
https://github.com/styleguidist/react-styleguidist/pull/1463

[pavandv]

Replace existing Flow types with TS: update files with @flow comment and replace types inside flow-types with @types/* modules.

I'm working on this.

[sapegin]

@elevatebart Awesome, thanks! Let's continue the discussion in the PR.

[styleguidist-bot]

:tada: This issue has been resolved in version 10.3.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: