2023-10-16
2770
#react#typescript
Ogundipe Samuel
301
2770
⋅ 9 min read

How to use TypeScript with React: A tutorial with examples

Ogundipe Samuel Software engineer and technical writer.

Recent posts:

Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 min read
Scoping CSS inline styles with css-scope-inline

Scoping CSS inline styles with css-scope-inline

Similar to CSS @scope, but with better browser support, this library will help you create scoped styles easily in CSS.

Shalitha Suranga
Nov 28, 2023 ⋅ 12 min read
8 Tips To Reduce Unused Javascript

8 tips to reduce unused JavaScript

Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.

Abhinav Anshul
Nov 27, 2023 ⋅ 5 min read
Guide to mobile emulator testing with MiniSim

Guide to mobile emulator testing with MiniSim

MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.

Emmanuel John
Nov 22, 2023 ⋅ 5 min read
View all posts

7 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.

Leave a Reply