2023-10-16
2714
#react#typescript
Ogundipe Samuel
301
Oct 16, 2023 ⋅ 9 min read

How to use TypeScript with React: A tutorial with examples

Ogundipe Samuel Software engineer and technical writer.

Recent posts:

Exploring The Magic Of Runes In Svelte 5

Exploring the magic of runes in Svelte 5

See how to use Svelte 5’s new runes system to declare reactive states and compare them to the existing approach to reactivity in Svelte 4.

Yashodhan Joshi
Jul 11, 2024 ⋅ 7 min read
Building UIs With Franken UI, A Shadcn Alternative

Building UIs with Franken UI, a Shadcn alternative

Explore Franken UI, an open source library of pre-built UI components that takes inspiration from Shadcn UI’s design principles.

Jude Miracle
Jul 10, 2024 ⋅ 11 min read
Working With The Angular Tree: Flat Vs Nested Trees And More

Working with the Angular tree: Flat vs. nested trees and more

The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.

Lewis Cianci
Jul 9, 2024 ⋅ 20 min read
The Top Headless Ecommerce Solutions For Frontend Dev

The top headless ecommerce solutions for frontend dev

Explore the top headless commerce platforms tailored for frontend ecommerce development, with free and paid options like Saleor and Shopify.

Fimber Elemuwa
Jul 9, 2024 ⋅ 6 min read
View all posts

8 Replies to "How to use TypeScript with React: A tutorial with examples"

  1. This is the error I get when first running `npm run magic`

    nvalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
    – configuration.module has an unknown property ‘loaders’. These properties are valid:
    object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, generator?, noParse?, parser?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
    -> Options affecting the normal modules (`NormalModuleFactory`).
    Did you mean module.rules or module.rules.*.use?

    bundle.js is never created. Don’t know how to get past this.

  2. By far the best introduction into React used together with TypeScript. Nice and simple project. Thumbs up for that 🙂

  3. This seems like a great guide but I can’t get this to work with Ubuntu 20.04. When I run “npm link typescript”, I get a few errors, such as gulpfile not found and such. Perhaps it’s something with my operating system but this guide isn’t one I can recommend to anyone. I’ll change my stance once my issue gets resolved.

    1. I got the same error. Eventually discovered this error will occur if no linking is necessary. I proceeded to verify typescript version and complete the tutorial successfully, despite the gulpfile error.

  4. Yes! Really helpful. Thank you. In my solution i had to add some tsconfig and open index.html manually in browser.

Leave a Reply