Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Matt Pocock Profile picture
@mattpocockuk
Jul 9 • 12 tweets • 4 min read • Read on X
In celebration of my free book coming out, here's a massive thread of all my best free TypeScript resources.

I guarantee that if you work through this list, you'll be the top TypeScript wizard at your company.

🧵
We've got to start with the book. It's 16 chapters of totally free written content.

It goes from first principles all the way up to the bottom end of advanced.

It's the no-brainer place to start.

totaltypescript.com/books/total-ty…
If you want to get practical right away, try diving into my free beginner's tutorial:

This is probably the most popular tutorial I've ever put together. You get a code editor right in your browser, and videos from me to help.

totaltypescript.com/tutorials/begi…
You'll probably be using TypeScript with something. And most often, that thing is going to be React.

This tutorial helps get you started with TypeScript and React, understanding how to type props, hooks, and much more.

totaltypescript.com/tutorials/reac…
At this point, you might be eyeing my paid courses and thinking "that looks good". But in this thread, we're strictly free.

Did you know that all my courses are open source? You can just clone the repos and dive in.

github.com/total-typescri…
While you won't get access to the videos, you can just try running the exercises yourself and see what you learn.

Pro Essentials will get you shipping apps. Type Transformations, Generics and Advanced Patterns will ensure you get up to wizard status.
So once you've read the book, self-directed your way through all my free and paid courses, it's time to dive into my social media content.

And, folks, there's a lot of it.
My articles on Total TypeScript are a great place to start if you like written content.

There are nearly 100 articles here, written with the same tools I used to write the book. They cover all sorts of topics, so just pick what you fancy reading.

totaltypescript.com/articles
If you prefer videos, my YouTube channel has a similar vibe. I do updates on the latest TS releases, deep-dives into specific topics, and shorter tip videos.

youtube.com/channel/UCswG6…
Also, I post a LOT on Twitter.

Here's a link to a search of my tweets with at least 500 likes. This will source hundreds and hundreds of tips that I've posted since January 2022.

x.com/search?q=(from…
The final resource, and the one I'm planning to max out this year, is my newsletter.

I'm planning some awesome improvements to make this the best TS newsletter out there. It's all a bit hush hush, but you'd better sign up to be sure.

totaltypescript.com/newsletter
If you liked this thread, all my paid material is 20% off until Friday. It's an awesome way to fast track your learning and support my free content.

totaltypescript.com

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Matt Pocock

Matt Pocock Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @mattpocockuk

Matt Pocock Profile picture
Oct 24, 2023
After all the chat about typing event handlers in React, I figured I'd write down all the suggestions folks gave.

Quick 🧵 Image
The most popular solution is to hover the onChange attribute in the JSX, then use that to type your handler.

But this creates an astonishingly long type - very intimidating for newbies.
Image
Image
Sometimes, you want to extract the event type only, not the whole handler type.

To do that, you can inline a function in onChange, and hover over the 'e'.

This is much easier to read, but takes longer. Image
Read 6 tweets
Matt Pocock Profile picture
Sep 4, 2023
How should you type React Props?

You've got three options. type, interface or an inline object literal.

Inline object literals might be fast to write, but it means you can't extract the type out for use elsewhere in your codebase:
This makes them hard to recommend.

So, interface vs type again. As I've said before, I prefer type.

But let's say you're building an input that needs to take all the props of 'input', but with an extra label.

For those cases, you must use interfaces:
Using an intersection here will slow down TypeScript on the scale of a large codebase. interface extends is the way to go.

This means that it's a good idea to get into the habit of using interfaces for each prop declaration.

I recommend using a code snippet to declare the interface for you:
All the speed of an object literal, but all the reusability and TS performance of an interface.

Want to share outside of X? Head to Total TypeScript:

totaltypescript.com/react-props-ty…
@CapitaineToinon With a 1GB drop in memory usage
Read 4 tweets
Matt Pocock Profile picture
Jul 20, 2023
If you don't understand generics in TypeScript, I think there's something you've misunderstood.

There is no such thing as a 'generic'.

🧵 Image
There are generic types, generic functions, and generic classes.

There are type arguments, and type parameters.

You cannot 'pass' a generic, 'declare' it, or 'infer' it.

In other words, 'generic' is not a noun, it's an adjective.

totaltypescript.com/no-such-thing-…
People think of 'a generic' as something in TypeScript.

You might look at the code below, and say 'we're passing a generic to useState'. Image
Read 18 tweets
Matt Pocock Profile picture
Mar 7, 2023
Lazy Dev Twitter:

Anyone know if it's possible to detect a QR code (or even just a fiducial) from a video using ffmpeg?
I'm asking for a slightly hilarious reason.

I use ffmpeg for automatically editing my videos. When I screw up a take, I want to be able to hold up a QR code on a paddle to tell my editing software to discard that take.
Another MUCH SIMPLER solution.

Assign a keyboard shortcut to a @scriptkitapp script which adds the current datetime to a global json file.

I can use this keyboard shortcut to mark the current take as 'discarded'.
Read 5 tweets
Matt Pocock Profile picture
Mar 6, 2023
Why any's happen, how to stop them, and why unknown isn't necessarily a better solution 🧵

Any 'any' in a codebase is a cause for concern. That's because it disables typechecking on the thing it's assigned to.

Pass it to a function parameter? You then can't guarantee anything about that function parameter. const groupBy = (arr: any[], key: any) => { const result:
An any can 'leak' across your application. If we use this function, we're going to get back 'any' - which disables type checking in yet more places.

Can you spot the 2 errors below? const array = [ { name: "John", age: 20 }, { n
Read 20 tweets
Matt Pocock Profile picture
Mar 3, 2023
Working with mocks in TS sucks.

The only way you can make it work is by slapping 'as' on everything - which can make the tests hard to maintain.

What if you had a simple set of functions that could let you pass whatever you wanted, but with perfect autocomplete? import { partial, any } from "@total-typescript/mock-ut
This feels pretty simple on the surface - many of you might have tried to make these kinds of abstractions before.

But it's harder than you think - you need a bit of wizardry. Let's take partial().

Why isn't the code below working? const partial = <T>(mock: Partial<T>): T => { return mock
It's because T in partial is being inferred from the argument, not the return type.

We can get around that by wrapping the parameter in a NoInfer.

But now, we're writing library-style code. So, we should put it in a library. export type NoInfer<T> = [T][T extends any ? 0 : never]; co
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(