Storybook, React, and TypeScript

Note: I originally posted this on Medium. I already had a ReactJS and TypeScript “starter” repo, but I wanted to add Storybook. Storybook doesn’t come setup with TypeScript by default, so here is how I got it working. I was sloppy this time around and didn’t save the links to the couple of repos/articles I used to troubleshoot this online, so please forgive the lack of references. Here are the instructions:

TypeScript Error TS7031 Makes me go "huh?"

Note: I originally posted this on Medium. The Problem The following is a snippet of React + TypeScript that I just wrote (simplified so we can focus on the error it throws): const Foo = ({className}) => <Popper className={className + " someCustomClassName"} /> This throws the following TypeScript error: TS7031: Binding element 'className' implicitly has 'any' type. I understand that this means that I didn’t explicitly declare the type for the className variable, so it “implicitly” has the any type, but I don’t understand why this is a problem.

Learning TypeScript

Note: I originally posted this on Medium. I’ve been learning TypeScript for a couple of weeks now, and I love it, but trying to understand the compiler errors can really slow me down. They are awesome error messages, because they are exact and verbose, but it can be overwhelming and difficult to parse with my eyes and brain. I was tinkering with a library called react-popper and decided to add some inline styles via the Reactstyles property: