TypeScript for React Developer

Install TypeScript

Introducing TypeScript in Create React App project

bash
yarn add -D typescript @types/react @types/react-dom @types/node @types/jest

OR

bash
npm i -D typescript @types/react @types/react-dom @types/node @types/jest

Note: For brevity, going forwared I will only show the yarn version. Just change yarn add to npm i for equivalent command for npm.

Convert JavaScript to TypeScript

  • id
  • copy
  • typecheck v1

Configure Styleguidist to Parse TypeScript

bash
yarn add -D react-docgen-typescript
styleguide.config.js
js
const path = require('path');

module.exports = {
components: 'src/components/**/*.{jsx,tsx}',
propsParser: (filePath, source, resolver, handlers) => {

const { ext } = path.parse(filePath);

return ext === '.tsx'

? require('react-docgen-typescript').parse(

filePath,

source,

resolver,

handlers

)

: require('react-docgen').parse(source, resolver, handlers);

},

...
};

Convert Simple React Component to TypeScript

  • Footer
  • Spinner
  • Alert
  • Jumbotron
  • Navbar
Comments

There is no comment on this post yet.

Issue on this page? Report here