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
Apr 1, 2022 • 30 tweets • 7 min read • Read on X
🧵 The Ultimate TypeScript Thread 🧵

Here's everything I've learned from leading TS dev teams and working on XState's core team.

My goal is to turn you into a TypeScript wizard.

And yes, this thread is EVERGREEN - I'll add at least 3 more tips a week 🚀

Let's get started.

• • •

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 1
z.strict() fixed a nasty bug for me this morning.

You should probably be using it on most of the schemas that handle outside data.

Here's the bug 🧵 Image
I had a form where I was marking the date a post was posted. I was expecting a key of `postedAt`, with an optional datetime. Image
Except, in my form, I had gotten the `name` field wrong: Image
Read 7 tweets
Matt Pocock Profile picture
Aug 20
Narrowing down the types of values is key knowledge for any TypeScript dev.

Here's 11 different ways you can do it. I bet you won't know 2 or 3 of them!

🧵
Narrowing with typeof: Image
Narrowing with truthiness: Image
Read 13 tweets
Matt Pocock Profile picture
Aug 8
So many folks don't know about structuredClone.

It's awesome, built-in, and supported in all major browsers.

Let's learn 🧵 Image
A common pattern in JavaScript is to create an immutable clone of an object. This is useful when you want to make mutations to it without changing the original.

For that, you'll often see code using the spread operator: `{ ...obj }`. Image
However, this only creates a shallow clone. This means that if the object has nested objects, they will be shared between the original and the clone.

Here, `deep` is shared between `originalObj` and `newObj`, not cloned across. Image
Read 10 tweets
Matt Pocock Profile picture
Aug 7
I'm starting to think that library types in TypeScript are all wrong.

Instead of top-level types, they should be available right on the functions that use them.

Brief thread 🧵 Image
How is this possible? Well, it's due to a trick in the way namespaces work in TypeScript.

When you export a namespace with the same name as a function, TypeScript combines the two: Image
This still works with 'import type', too: Image
Read 4 tweets
Matt Pocock Profile picture
Aug 5
I've changed my mind on .d.ts files.

If you're writing application code, you should NEVER use them.

Let me explain 🧵
Declaration files are files that only contain types.

They've got two purposes - providing types for JavaScript files, and augmenting types in the global scope.

Here's the section on them in my book:

buff.ly/3SDoL6p
You'll see them a lot in your node_modules folder. Every package comes with a lot of .d.ts files to provide types for the JavaScript files they ship. Image
Read 11 tweets
Matt Pocock Profile picture
Aug 5
Sometimes, TypeScript's narrowing kind of sucks.

The prime suspect? Boolean.

Let's take a look at why. 🧵 Image
Let's explain the code above. `myFunc` takes in a string or null. We want to ensure it's not null for some reason.

So, we can use an if statement to check if it's truthy. If it's truthy, it ain't null.

We can do that in MANY different ways: Image
But if we try it with `Boolean`, it doesn't work. We just get string | null, even though this is basically equivalent to `!!input`.

Why? Image
Read 7 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!

:(