Matt Pocock @mattpocockuk Twitter profile | Pikagi

Pikagi

Matt Pocock

@mattpocockuk

142,000

Followers

581

Following

1,658

Media

20,112

Statuses

Full-time TypeScript educator. Ex- @vercel , @statelyai . Used to be a voice coach. He/him. Author of Total TypeScript 🧙 Hire me to teach your team TypeScript!

Oxford, England

https://t.co/7tEg5DN7Vw

Joined August 2011

Don't wanna be here? Send us removal request.

Pinned Tweet

@mattpocockuk

Matt Pocock

1 month

I'm thinking about a pivot. Social media kind of sucks. I have to lower the quality of what I post to fit the algorithms. I feel stymied. So, I'm going to make the best newsletter I can. Off-platform. Interactive. Mind-blowing. Sounds good? Come along:

Tweet card media

Sign Up to Total TypeScript

Learn how to use TypeScript to level-up your applications as a web developer through exercise driven self-paced workshops and tutorials hosted by TypeScript wizard Matt Pocock.

www.totaltypescript.com

52

32

649

Last Seen Profiles

@Zummerpixie

@JackServaites

@IUshkizzy

@yusam0110

@techno_valent

@asiakixs

@Olivier_Chaput

@NFVikingsSports

@realqueenizzy

@Aikowolf

@GCACgirlshoops

@GabbyLovesDolls

@digitalhealthev

@suetyunn

@Toqeerahmed5566

@alexbunny19

@9ll9Q

@louisvirtel

@ozomatli

@torinbosch

@LalleyTyler

@AaronDelays

@UJ77601362

@LaVanguardia

@yagmur_yuksel_

@Javitoledo20

@PokemonGoApp

@GreenbaypackNFL

@SherlyAnnavita

@BoltonHealth

@AminShaheedi

@Yo_2unechi

@Billy_Timmins

@Elektronik2137

@evermangbball

@sanhaocensurad1

@mattpocockuk

Matt Pocock

2 years

Today's the day. My Beginner's TypeScript tutorial has dropped. And it's free for everyone. 🧵

Tweet media one

149

1K

7K

@mattpocockuk

Matt Pocock

1 year

If you don't know generics, I promise you'll understand them by the end of this thread. I like a challenge.

Tweet media one

121

993

6K

@mattpocockuk

Matt Pocock

2 years

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

100

940

5K

@mattpocockuk

Matt Pocock

1 year

Here's a quick thread on a super useful type helper you've probably never heard of (nope, not even advanced folks).

Tweet media one

132

588

4K

@mattpocockuk

Matt Pocock

1 year

A brief thread. 'as const' has more uses than you might think.

Tweet media one

69

448

4K

@mattpocockuk

Matt Pocock

2 years

Want to learn TypeScript for free? Here’s every piece of free content I’ve put out over the past 6 months, in order from beginner to wizard-level. Mega-🧵

112

861

4K

@mattpocockuk

Matt Pocock

8 months

Confused about TSConfig? Here's a cheat sheet that will get you 90% of the way there.

Tweet media one

48

460

3K

@mattpocockuk

Matt Pocock

2 years

Getting somewhere with a TS error translator... Send me your mad typescript errors (full text via gist or playground) and I'll see how my system handles them.

Tweet media one

65

451

3K

@mattpocockuk

Matt Pocock

1 year

Let's talk about branded types. If I were building an app where security was critical, I'd use the crap out of them.

Tweet media one

71

474

3K

@mattpocockuk

Matt Pocock

10 months

React devs in 2023 don't know how good they have it.

Tweet media one

64

175

3K

@mattpocockuk

Matt Pocock

1 year

TypeScript annoys me sometimes. So, I decided to do something about it...

Tweet media one

55

397

3K

@mattpocockuk

Matt Pocock

4 months

The builder pattern might be the most powerful thing allowed by TypeScript.

Tweet media one

53

192

3K

@mattpocockuk

Matt Pocock

1 year

Use Zod to parse your environment variables once, then use that inference to type process.env throughout your app. Best of all worlds.

Tweet media one

53

250

2K

@mattpocockuk

Matt Pocock

4 months

ElementRef is so freaking useful for finding the right types for useRef in React.

Tweet media one

28

219

2K

@mattpocockuk

Matt Pocock

2 months

Use Zod to parse your environment variables once, then use that inference to type process.env throughout your app. Also, a beautiful example of how you can extend an interface from a VALUE, not a type.

Tweet media one

63

211

2K

@mattpocockuk

Matt Pocock

2 years

🔥 TypeScript Error Translator for VSCode 🔥 Tired of TypeScript errors? Translate them to human-readable language right in your IDE. 🪄 Download the extension: 🖥️ Or try the online playground:

Tweet media one

53

468

2K

@mattpocockuk

Matt Pocock

1 month

OH MY GOD IT'S HAPPENING In TS 5.5, type predicates will be inferred automatically from functions that return a narrowing statement. No more 'val is string' to force TypeScript's hand. @danvdk , I can't believe you got it merged. Incredible work.

Tweet media one

58

234

2K

@mattpocockuk

Matt Pocock

1 year

This week, Total TypeScript crossed $1M in sales. Not all of that goes to me - I've partnered with an amazing team. But enough of it does that it's completely changed my life. Thanks for being a part of it, folks ❤️❤️❤️

133

40

2K

@mattpocockuk

Matt Pocock

5 months

I was today years old when I learned you can do CMD-SHIFT-L to select all occurrences of a piece of text in VSCode. How many hours have I wasted repeatedly hitting CMD-D 😬

132

163

2K

@mattpocockuk

Matt Pocock

1 year

satisfies in TypeScript has been out for a little while now. Overall, it's been a success - but it's starting to cause some confusion. Let's clear it up.

Tweet media one

32

261

2K

@mattpocockuk

Matt Pocock

1 year

TypeScript WASN'T invented to add types to JavaScript. It was invented because, 10 years ago, the tooling for JS was awful. No autocomplete, no easy refactors, no IDE errors. TypeScript exists to make your tooling better. Turns out, types were needed to make that happen.

43

185

2K

@mattpocockuk

Matt Pocock

4 months

. @eskimojo dropping some absolutely beautiful code into my Discord today.

Tweet media one

51

136

2K

@mattpocockuk

Matt Pocock

2 years

Every damn time

Tweet media one

38

189

2K

@mattpocockuk

Matt Pocock

9 months

ElementRef is super nice. Here's how it can make typing useRef easier in React 🧵

Tweet media one

30

234

2K

@mattpocockuk

Matt Pocock

10 months

Tired of writing if statements every time you need to check if something's defined? Make a little 'raise' function to throw an error, and inline it with a nullish coalescing operator. Thanks to @heyImMapleLeaf for this one.

Tweet media one

36

177

2K

@mattpocockuk

Matt Pocock

11 months

TypeScript 5.2 will introduce a new keyword - 'using', that you can use to dispose anything with a [Symbol.dispose] function when it leaves scope.

Tweet media one

74

310

2K

@mattpocockuk

Matt Pocock

10 months

By far the strangest TypeScript trick I've ever come across is the Loose Autocomplete trick. No idea who discovered this, but it's become widely used by OSS wizards. It's now even used by React's types to type attributes like aria-role.

Tweet media one

34

179

2K

@mattpocockuk

Matt Pocock

1 year

Today's the day. Total TypeScript is ready.

Tweet media one

64

189

2K

@mattpocockuk

Matt Pocock

1 year

You probably know React. But do you know how to use TypeScript with React? Introducing my biggest ever drop of FREE content... And it's live right now ⬇️⬇️⬇️

Tweet media one

43

281

2K

@mattpocockuk

Matt Pocock

3 months

Someone DM'd me a question and we ended up drafting this awesome piece of code. Turns out, yes, you can turn an 'as const' object into a crazy union of routes.

Tweet media one

34

148

2K

@mattpocockuk

Matt Pocock

8 months

Array<T> vs T[] - which should you use in TypeScript? I think the difference is close enough to be subjective - but here's everything I know: The two syntaxes are functionally identical - you can use them interchangeably. keyof T[] is a massive gotcha. Instead of it resulting…

Tweet media one

Tweet media two

Tweet media three

91

190

2K

@mattpocockuk

Matt Pocock

3 months

JavaScript's new 'using' keyword is awesome for mocking in tests. It automatically disposes the 'mock' when it leaves scope. 🤯 No more beforeEach/afterEach...

Tweet media one

71

187

2K

@mattpocockuk

Matt Pocock

8 months

In State of JS 2022, 70% of respondents said they use TypeScript. DHH is welcome to his opinions. But to call the TS community a 'tribe' (instead of, say, a 'majority') feels, at this point, totally inaccurate.

@dhh

DHH

8 months

"So farewell, TypeScript. May you bring much rigor and satisfaction to your tribe while letting the rest of us enjoy JavaScript in the glorious spirit it was originally designed: Free of strong typing."

483

524

3K

91

114

2K

@mattpocockuk

Matt Pocock

4 months

Template literals inside generic functions are 🤯

Tweet media one

41

114

2K

@mattpocockuk

Matt Pocock

1 year

Worried about fetch and JSON.parse returning any? Drop these lines of code into any module and they'll return unknown across your entire project instead.

Tweet media one

35

150

2K

@mattpocockuk

Matt Pocock

3 months

Here's how to get a fully type-safe fetch function in just a few lines of (admittedly mind-blowing) generic code. Full implementation below.

Tweet media one

36

142

2K

@mattpocockuk

Matt Pocock

9 months

Iterating over a known set of object keys in TypeScript can be a nightmare. Here are all the solutions I know of. 🧵

Tweet media one

53

182

2K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 Omit and Pick are the gateway to understanding type-level programming. They let you start deriving types, instead of redeclaring them.

38

208

2K

@mattpocockuk

Matt Pocock

8 months

Need to manually type a JSON file? I learned today you can add a .d.json.ts file to set your own type for a json import. So, for data.json, it would be data.d.json.ts. Inside, add: Where Record<string, string> is the type you want to give the data. Then, add this setting to…

Tweet media one

Tweet media two

27

162

2K

@mattpocockuk

Matt Pocock

2 years

Folks, declaring globals isn't that hard:

Tweet media one

35

163

2K

@mattpocockuk

Matt Pocock

1 year

*Client requests a new feature on a 4-year old codebase* Every dev:

20

185

2K

@mattpocockuk

Matt Pocock

1 year

I just KEEP seeing uses for Prettify<T> out in the wild. Here, you can use it to unwrap a class with lots of complex inheritance to actually see it in the tooltip.

65

192

2K

@mattpocockuk

Matt Pocock

4 months

Remember folks, declaring globals isn't that hard.

Tweet media one

30

136

2K

@mattpocockuk

Matt Pocock

2 years

From next Monday, I'll be joining @vercel - as a developer advocate for @turborepo . I can't wait to start contributing to a tool that I fell in love with at first sight. I'm also so grateful they let me start part-time - meaning Total TypeScript is still full steam ahead.

85

36

2K

@mattpocockuk

Matt Pocock

4 months

Well, this looks useful - a VSCode extension that automatically prettifies your types when you hover them in VSCode.

Tweet media one

16

120

2K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 Creating a Context in React can be pretty annoying in TypeScript. Here's my method for keeping things typesafe, minimizing use of 'as', and also ensuring folks use your custom hooks, instead of useContext.

29

195

1K

@mattpocockuk

Matt Pocock

9 months

Too much TypeScript made my hair fall out

Tweet media one

134

68

1K

@mattpocockuk

Matt Pocock

1 year

Here's a handy guide for understanding some of TypeScript's utility types:

Tweet media one

13

201

1K

@mattpocockuk

Matt Pocock

9 months

If you're having trouble with forwardRef in your React app/design system: Use this snippet, and all will be well.

Tweet media one

32

168

1K

@mattpocockuk

Matt Pocock

3 months

const type parameters are SUPER powerful for making sure your generic functions infer the right types.

Tweet media one

24

151

1K

@mattpocockuk

Matt Pocock

1 year

React.ComponentProps is such a lifesaver, and more folks need to know about it.

19

200

1K

@mattpocockuk

Matt Pocock

1 year

Want Rust-style 'Result' errors in TypeScript? Follow these 4 steps:

Tweet media one

Tweet media two

Tweet media three

Tweet media four

59

162

1K

@mattpocockuk

Matt Pocock

3 months

TypeScript 5.4 will bring a new utility type: NoInfer. This will be EXTREMELY useful for generic functions where you have multiple candidates for inferring a type. In the example below, we use NoInfer to make sure that 'initial' must be one of the states passed.

Tweet media one

33

151

1K

@mattpocockuk

Matt Pocock

1 year

My new VSCode extension is nearly ready. The goal is to teach you TypeScript without leaving your IDE. That means: 1⃣ Human-readable error translations (build on top of the TS error translator) 2⃣ Hoverable hints on TS syntax to explain what it means I'm looking for testers.

Tweet media one

44

125

1K

@mattpocockuk

Matt Pocock

9 months

'satisfies never' is SO GOOD for exhaustiveness checking in switch statements. With this little annotation, you'll know you've checked every single branch of your union. Beautiful.

Tweet media one

58

129

1K

@mattpocockuk

Matt Pocock

2 months

gql.tada is just nuts. Instant type inference from graphql strings. It's like tRPC for GraphQL.

37

89

1K

@mattpocockuk

Matt Pocock

1 year

In two weeks’ time, I’ll be leaving Vercel to work on Total TypeScript full-time 🚀 Vercel is the most awesome company I’ve ever worked for, and I’m super proud of everything we shipped in my short time there. But it’s time to go all-in on education. I’m so excited.

67

32

1K

@mattpocockuk

Matt Pocock

6 months

Tweet media one

30

22

1K

@mattpocockuk

Matt Pocock

2 years

🔥 TypeScript tip 🔥 Learn how to derive a union type from an object - an incredibly useful switcheroo that's at the heart of most TS magic out there.

40

157

1K

@mattpocockuk

Matt Pocock

5 months

Here's a fun little TS snippet for grabbing all the keys starting with `on` from an object. How does it work? Using '&' on keyof with a template literal means that only the ones that match _both_ are preserved.

Tweet media one

30

103

1K

@mattpocockuk

Matt Pocock

6 months

After all the chat about typing event handlers in React, I figured I'd write down all the suggestions folks gave. Quick 🧵

Tweet media one

27

132

1K

@mattpocockuk

Matt Pocock

5 months

🔥 TypeScript Tip 🔥 You can use 'as const' on a template literal to force TypeScript to infer it. Without the as const, it defaults to string. With it, it goes DEEP.

Tweet media one

20

100

1K

@mattpocockuk

Matt Pocock

1 year

Elon Musk: "Oh you're a TypeScript engineer? Name every type"

60

81

1K

@mattpocockuk

Matt Pocock

2 years

You've been asking for it. A single spot with ALL of my 2-minute TypeScript tips, in chronological order - with transcripts. This might be the highest value-density of ANYTHING I've ever put out. Enjoy, wizards 🧙

Tweet card media

TypeScript Tips by Matt Pocock

A collection of useful tips that you wish you knew when you started using TypeScript.

www.totaltypescript.com

33

225

1K

@mattpocockuk

Matt Pocock

8 months

Say it with me: TypeScript was built to make your IDE more powerful. If you don't use TypeScript, your IDE will do a worse job of helping you. It's as simple as that.

65

107

1K

@mattpocockuk

Matt Pocock

2 years

This morning I wrote a 9-exercise TypeScript course for beginners, and quietly made it public on GitHub. This evening, someone's already been through the whole thing and is providing helpful feedback 🤯 I'm not worthy, y'all ❤️

21

175

1K

@mattpocockuk

Matt Pocock

2 years

NEVER underestimate the builder pattern

Tweet media one

34

108

1K

@mattpocockuk

Matt Pocock

9 months

Imagining a CLI that: - You run on your tsconfig.json - Asks you a BUNCH of questions about your setup and what you're building. - Sets your tsconfig.json to the right values - Tells you WHY it's adding those values and links you to the right resources. Would you use it?

174

22

1K

@mattpocockuk

Matt Pocock

10 months

The '{}' type is a bit magic in TypeScript. Instead of representing "any object", it actually represents "anything that isn't null or undefined". This is probably the biggest WTF moment from my course.

Tweet media one

37

109

1K

@mattpocockuk

Matt Pocock

1 year

useRef is pretty weird in TypeScript. Here's a couple of gotchas that I always run into:

Tweet media one

32

118

1K

@mattpocockuk

Matt Pocock

4 months

(typeof array)[number] is a classic trick to extract the type of the members of an array.

Tweet media one

28

115

1K

@mattpocockuk

Matt Pocock

10 months

The new 'using' keyword in TS 5.2 gets _really_ exciting when you combine it with 'await'. So many use cases. Database connections, file handles - any long-running connection that needs to be closed automatically.

Tweet media one

42

137

1K

@mattpocockuk

Matt Pocock

10 months

A lot of people talk about generic React components. But I think the MUCH more useful tip (and often easier to grok) is using discriminated unions in React props. Here, we make a version of the 'as' prop to choose between the 'button' and 'a' tags, with different props on both.

Tweet media one

41

105

1K

@mattpocockuk

Matt Pocock

5 months

Fun fact: TypeScript lets you chain '!' operators together. Actually pretty useful for indicating that the code is unsafe.

Tweet media one

51

70

1K

@mattpocockuk

Matt Pocock

2 months

In every codebase where I need an API, I always end up writing some version of this function. It lets you automatically handle 400 validation using Zod, and automatically infers the types based on the schema passed in.

Tweet media one

28

100

1K

@mattpocockuk

Matt Pocock

4 months

Fun fact: you can export a value and a type with the SAME NAME. This is great for when you have runtime things in your app that feel like types, like Zod schemas. Are you using this technique? I'm a convert.

Tweet media one

111

72

1K

@mattpocockuk

Matt Pocock

2 years

🔥 TypeScript Tip #8 🔥 You can use generics in React to make incredibly dynamic, flexible components. Here, I make a Table component with a generic 'items' type.

26

152

1K

@mattpocockuk

Matt Pocock

2 months

Here's a quick guide on how to type your globals and env variables in Vite, Node and the DOM.

Tweet media one

23

119

1K

@mattpocockuk

Matt Pocock

9 months

Gonna learn bout some birds

Tweet media one

35

67

1K

@mattpocockuk

Matt Pocock

4 months

Baby born 8pm on the 9th. Mum and baby well. "Smiling, hardly able to restrain his tears, Levin kissed his wife and went out of the dark room. What he felt towards this little creature was utterly unlike what he had expected. There was nothing cheerful and joyous in the feeling;…

127

2

1K

@mattpocockuk

Matt Pocock

2 years

🪄 Announcing Advanced TypeScript🪄 Become a TypeScript Wizard with my upcoming video course. 💪 100+ type challenges 💡 Insights & Interviews with OS maintainers 🧙 Learn every TS trick in the book 🤩 Only intermediate knowledge needed Sign up at

55

129

1K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 This one's a little intense. Let's transform a discriminated union into a union. Using this key remapping technique, we can properly iterate through each member of the union and transform it 🤯 Looks crazy, but ends up being a really nice mental model.

21

129

1K

@mattpocockuk

Matt Pocock

8 months

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,…

Tweet media one

Tweet media two

Tweet media three

57

123

1K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 Got a utility type like Maybe<T> that you just want to use everywhere without importing it? Stick it in a declare global {}, and boom - it's global!

27

103

1K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 Object.keys is DELIBERATELY not very type-safe. This can feel extremely annoying to beginners. But it's for a good reason...

30

108

1K

@mattpocockuk

Matt Pocock

3 months

Yep, `-?` is a thing! Also works with `-readonly`.

Tweet media one

23

108

1K

@mattpocockuk

Matt Pocock

9 months

If you don't understand generics in TypeScript, I think there's something you've misunderstood. There is no such thing as a 'generic'. 🧵

Tweet media one

31

137

1K

@mattpocockuk

Matt Pocock

2 months

Is it just me or is this actually pretty insightful

Tweet media one

55

39

1K

@mattpocockuk

Matt Pocock

1 year

🔥 TypeScript Tip 🔥 Checking out TS codebases like @excalidraw 's has been so enlightening - especially how many of them are using 'as const' over enums.

20

111

1K

@mattpocockuk

Matt Pocock

2 years

🔥 TypeScript Tip #5 🔥 The 'extends' keyword is very powerful in TypeScript. Here, I use it to narrow the value of a generic to enable some beautiful autocomplete/inference.

18

131

1K

@mattpocockuk

Matt Pocock

8 months

You run tsc --init. You get these options in your tsconfig.json. What rules are you immediately changing/adding? For me, first stop is: "noUncheckedIndexedAccess": true Gotta have type safety on my object/array access, y'all. Next, sort out the module resolution:…

Tweet media one

44

99

1K

@mattpocockuk

Matt Pocock

8 months

as const fixes everything. Making a custom hook that returns a tuple? You've probably hit this weird error before. This is happening because TypeScript thinks your hook returns an array, not a tuple. So, add an 'as const' to make it infer properly. Is there anything 'as…

Tweet media one

Tweet media two

Tweet media three

53

87

1K

@mattpocockuk

Matt Pocock

1 year

I'm so excited about the potential of this. Learn TypeScript, all from within VSCode...

33

102

1K

@mattpocockuk

Matt Pocock

2 months

Ever wondered what the difference between a class method and arrow function is? Here it is one image.

Tweet media one

42

82

1K

@mattpocockuk

Matt Pocock

5 months

Omit and Pick don't always work how you expect. A small thread.

Tweet media one

20

106

1K

@mattpocockuk

Matt Pocock

1 year

Starting a new series on YT: BLAZING FAST tips. Basically, it's my usual format, but INCREDIBLY condensed and concise. We'll be kicking off with React + TypeScript. Starts tomorrow. Get ready.

Tweet media one

19

64

1K

@mattpocockuk

Matt Pocock

2 years

TypeScript is an amazing piece of software and no-one can convince me otherwise 🤯

Tweet media one

26

76

1K

@mattpocockuk

Matt Pocock

1 year

🎉 SO excited to announce what I've been working on for the past few months... ✨🧙‍♂️ Total TypeScript 🧙‍♂️✨ It's a comprehensive, interactive video course to turn you into a TypeScript wizard. Prerelease available now! ⬇️⬇️⬇️

Tweet media one

38

133

1K

@mattpocockuk

Matt Pocock

2 months

When you're creating some config in TS, you've got two choices for how you write the type. Either DECLARE the type, then use it to type the value. Or DERIVE the type from the value. Which do you prefer?

Tweet media one

160

79

1K

@mattpocockuk

Matt Pocock

1 year

Best open-source TypeScript apps... GO For instance, and both have open source repos. SO much to learn from those codebases.

Excalidraw — Collaborative whiteboarding made easy

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

15

125

1K