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:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 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