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:

designing llm first products

Designing LLM-first products, not just features

Everyone’s building chat-first AI products. And most of them suck. Here’s how to break the mold and ship LLM-native software that actually solves problems.

Rosario De Chiara
May 30, 2025 â‹… 4 min read
Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 â‹… 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 â‹… 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 â‹… 11 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