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:

next js environmental variables

How to configure Next.js environmental variables

Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.

Joseph Mawa
Apr 25, 2025 â‹… 9 min read
useActionState in React

useActionState in React: A practical guide with examples

Discover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.

Rishi Purwar
Apr 25, 2025 â‹… 5 min read
three js vs babylon js

Three.js vs. Babylon.js: Which is better for 3D web development?

Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.

Elijah Asaolu
Apr 24, 2025 â‹… 7 min read
how to use the Next.js Image component to optimize images

How to use the Next.js Image component to optimize images

Explore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.

Adebiyi Adedotun
Apr 23, 2025 â‹… 7 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