Sometimes writing React isn't just about React. While we don't focus on other libraries like Redux (see below for more on that), here are some tips on other common concerns when making apps with React + TypeScript.
Writing TypeScript Libraries instead of Apps
TypeScript uses TSDoc, a variant of JSDoc for TypeScript. This is very handy for writing component libraries and having useful descriptions pop up in autocomplete and other tooling (like the Docz PropsTable). The main thing to remember is to use
/** YOUR_COMMENT_HERE */ syntax in the line just above whatever you're annotating.
Often when creating similar components or components that have a parent-child relationship, it is useful to namespace your components. Types can easily be added be using
(Contributed by @bryceosterhaus, see further discussion)
Design System Development
For developing with Storybook, read the docs I wrote over here: https://storybook.js.org/configurations/typescript-config/. This includes automatic proptype documentation generation, which is awesome :)
Migrating From Flow
You should check out large projects that are migrating from flow to pick up concerns and tips:
If you have specific advice in this area, please file a PR!
There isn't any real secret to Prettier for TypeScript. But its a great idea to run prettier on every commit!
Integrating this with ESlint may be a problem. We haven't written much on this yet, please contribute if you have a strong opinion. Here's a helpful gist.
Yes, you can test your types! You shouldn't use it for EVERYTHING, but it can help prevent regressions:
- https://github.com/ikatyang/dts-jest (Demo)
- https://github.com/microsoft/dtslint (Intro to dtslint)
Working with Non-TypeScript Libraries (writing your own index.d.ts)
Lets say you want to use
de-indent, but it isn't typed or on DefinitelyTyped. You get an error like this:
So create a
.d.ts file anywhere in your project with the module definition:
Any other tips? Please contribute on this topic! We have an ongoing issue here with some references. We have more discussion and examples in our issue here.
Compiling large TS projects can get slow. Here are some tips:
- Use TS 3.0 Project references
- Check the official (TS performance wiki guidelines)[https://github.com/microsoft/TypeScript/wiki/Performance] - note that Dan Rossenwasser says to take it with a grain of salt
- Webpack (see CRA diff):
output.pathinfo = false