Skip to content
This repository was archived by the owner on Aug 21, 2023. It is now read-only.

HSDS: React - v2.0.0

Choose a tag to compare

View all tags
@ItsJonQ ItsJonQ released this 08 Nov 18:54
v2.0.0
77a9962

Typescript

egh_reactts-01-02

Illustration by Maggie Appleton

This update implements Typescript into Blue.

OMG Why?!

Type support is gaining a huge amount of support in the development community, not just in JavaScript. And for very good reason!

The main 2 benefits are that:

  • It improves code quality
  • Provides documentation (but first part is more important)

It improves code quality because it, by it's very nature, forces you think about and architect your code differently.
By being more consistent with arguments, returns, etc... it makes your code more reliable and intuitive, especially if it's widely used or crucially important.

Since almost all of us are using Visual Studio Code, type-hinting is built into the editor. (Conspiracy theory: Microsoft made VS Code to promote Typescript).
Type hinting + checks within VS Code is phenomenal (and fast!)

But, I don't really know TS

That's okay! Blue is setup to compile JS as normal. This update actually has Typescript blended with JavaScript. Webpack/Babel things are setup to transform the imports and such to allow for cross compatibility.

If you need to make some updates.. and you don't feel comfortable with TypeScript. Just write it in JavaScript. One of us can help convert it for you :).

Besides... the TypeScript implementation within Blue is very light touch. Mostly typing PropTypes, arguments, and returns. Nothing too fancy.

But wait... don't we use Flow?

Yes. And we still do (for now).

Flow was chosen as the initial typing system for Blue. The decision came down to...

  • How quickly can I get this set up? (Fiddling with Babel etc...)
  • How quickly can I start using it?

Flow did (does) both things very well.

The decision to move on from Flow came down to

  • Native type hinting with VS Code (Flow's plugin eats all the CPUs. ugh)
  • Amazing community support (@types)
  • Less tooling (eventually). The TS compiler is quite spectacular.
  • Typescript basically winning the JS Type race.

This update only converts a handful of things to TypeScript. Flow typed files still exist. The next step is to convert those particular files to TypeScript, allowing us to remove Flow entirely.

So... What do I need to do?

Nothing really. Blue's Storybook and Jest test suite have been rigged to understand Typescript.
All TypeScript files are convert to plain ol ES5 compatible JavaScript during build time, so using the Blue library should remain the same.

Testing

The best thing to do is to spin it up! Pull this down, and npm install.

Fire it up with npm start. Everything should work.
(P.S. Storybook project structure is slightly different now)

Open the project in VS Code, and check out some .ts / .tsx files :).
There should be type support now.

Run npm test to make sure Jest works.

And, why not, run npm run build to build the project. Babel will compile first, then Typescript afterwards.

Thoughts?

This project was something I wanted to do for a while. I asked around during the retreat for some thoughts on TypeScript, and typing in general. Implementing TypeScript into Blue was my personal "Hack" project for the Hilton Head retreat, haha. I try to have one every retreat (list of a couple of hack projects below, if you're interested).

Tagged a bunch of folks for review to get your thoughts and 👀

Thank you so much!!! <3

Q's personal retreat hack projects

  • Blue + TypeScript (Hilton Head)
  • CSS-in-JS, which became Fancy (Scottsdale)
  • node-spectre, which became Helix (Barcelona)
  • Seed modularization/dependency system (Quebec)
  • Converting LESS -> SCSS in the app (Austin)
Assets 2
Loading