TypeScript Articles by Matt Pocock

Add TypeScript To An Existing React Project

Learn how to add TypeScript to your existing React project in a few simple steps.
Matt Pocock
Matt Pocock

The TSConfig Cheat Sheet

Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Matt Pocock
Matt Pocock

Are Big Projects Ditching TypeScript?

Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Matt Pocock
Matt Pocock

How to Pass a Component as a Prop in React

Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Matt Pocock
Matt Pocock

Intro To TypeScript Performance

Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
Matt Pocock
Matt Pocock

Strongly Typing React Props with TypeScript

When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.
Matt Pocock
Matt Pocock

How To Learn TypeScript In 2023

Learn TypeScript in 2023 with this step-by-step guide. Understand the basics, essential types, unions, and narrowing techniques.
Matt Pocock
Matt Pocock

Override the Type of a JSON File

Learn how to manually assign types to JSON imports in TypeScript by creating .d.json.ts files, which can greatly improve performance.
Matt Pocock
Matt Pocock

What's Coming In TypeScript 5.3?

TypeScript 5.3 is in the works, with potential features including Import Attributes, throw expressions, isolated declarations, and more.
Matt Pocock
Matt Pocock

Array<T> vs T[]: Which is better?

When declaring array types in TypeScript, you can choose between Array<T> and T[]. Both are identical, but there are some considerations to keep in mind.
Matt Pocock
Matt Pocock

5 Ways to Use 'Satisfies' in TypeScript

The satisfies operator in TypeScript allows for type annotations without sacrificing inference. Here's a few uses for it.
Matt Pocock
Matt Pocock

6 Ways to Use Extract in TypeScript

Learn how to use the Extract helper in TypeScript to extract specific members from a discriminated union or based on their shape.
Matt Pocock
Matt Pocock

Explained: Cannot redeclare block-scoped variable

If you receive a "Cannot redeclare block-scoped variable 'name'" error in TypeScript, it can be resolved by renaming the variable or changing its scope.
Matt Pocock
Matt Pocock

Type vs Interface: Which Should You Use In 2023?

Learn the key differences between interfaces and type aliases in TypeScript, including their use cases and important features to consider.
Matt Pocock
Matt Pocock

Why You Can't Use Dot Notation On Types

In TypeScript, dot notation cannot be used to access type properties, but indexed access types provide more flexibility and are already available.
Matt Pocock
Matt Pocock

Strongly Type useRef with ElementRef

Using useRef with native elements in React can be confusing, but ElementRef provides an easier solution by extracting the element type.
Matt Pocock
Matt Pocock

Explained: Cannot use JSX unless the '--jsx' flag is provided

Learn how to fix the "Cannot use JSX unless the --jsx flag is provided" error in TypeScript by updating your tsconfig.json file.
Matt Pocock
Matt Pocock

There Is No Such Thing As A Generic

Understanding generics can be challenging because the term is overloaded. Instead, use the terms "type arguments" and "type parameters" for clarity.
Matt Pocock
Matt Pocock

TypeScript Generics in 3 Easy Patterns

What you think of as "generics" in TypeScript are actually three different patterns.
Matt Pocock
Matt Pocock

How to Iterate Over Object Keys in TypeScript

Iterating over object keys in TypeScript can be challenging. One option is casting to keyof typeof to access values, or using type predicates.
Matt Pocock
Matt Pocock

An `unknown` can't always fix an `any`

Any any is a cause for concern because it disables type checking on the thing it's assigned to. This article explores the best way to avoid them in your code.
Matt Pocock
Matt Pocock

My advice for security-critical TS apps

Matt Pocock shares his advice for working on TypeScript apps where security is critical.
Matt Pocock
Matt Pocock

Four Essential TypeScript Patterns You Can't Work Without

This article discusses four of the most important patterns to know and use: Branded types, Globals, Assertion Functions & Type Predicates, and Classes.
Matt Pocock
Matt Pocock

Optional Chaining for Assignments Lands in Stage 1

The optional chaining for assignments proposal has reached Stage 1, allowing assignment to possibly undefined object properties.
Matt Pocock
Matt Pocock

Type Argument Placeholders: TypeScript's Most Discussed Upcoming Feature

TypeScript introduces type argument placeholders in version 5.2, which helps with partial inference and lets the language infer types for a function.
Matt Pocock
Matt Pocock

The Empty Object Type in TypeScript

Learn why {} in TypeScript doesn't represent an empty object, and how to use the Record type to represent an empty object.
Matt Pocock
Matt Pocock

TypeScript 5.2's New Keyword: 'using'

TypeScript 5.2 introduces 'using', a keyword that disposes anything with a Symbol.dispose function upon leaving scope, making resource management easier.
Matt Pocock
Matt Pocock

Get Keys of an Object Where Values Are of a Given Type

Learn how to retrieve object keys where the values are of a specific type in TypeScript using an immediate indexed mapped type.
Matt Pocock
Matt Pocock

How to Properly Type Window

Learn how to fix TypeScript errors regarding the 'Window' interface. Choose between three solutions to add types to the Window object.
Matt Pocock
Matt Pocock

Since TypeScript 5.1, React.FC is now "fine"

React.FC is now perfectly fine to use in TypeScript 5.1 and React 18. It no longer implicitly includes children and accepts more return types.
Matt Pocock
Matt Pocock

What is JSX.IntrinsicElements?

Learn about JSX.IntrinsicElements in TypeScript - the global type that defines native JSX elements and their props. Used mainly by frameworks like React.
Matt Pocock
Matt Pocock

Explained: 'React' refers to a UMD global

Find out why this error occurs and learn how to fix it.
Matt Pocock
Matt Pocock

React.ReactNode vs JSX.Element vs React.ReactElement

Learn the differences between React.ReactNode and JSX.Element in TypeScript when working with React.
Matt Pocock
Matt Pocock

Transform Any Union in TypeScript with the IIMT

Since I first got into advanced TypeScript, I've been in love with a particular pattern. It formed the basis for one of my first-ever TypeScript tips, and it's been extraordinarily useful to me ever since. I call it the IIMT (rhymes with 'limped'): the Immediately Indexed Mapped Type.
Matt Pocock
Matt Pocock

Where To Put Your Types in Application Code

There are three rules to keep in mind when deciding where to put types in your application code.
Matt Pocock
Matt Pocock

ComponentProps: React's Most Useful Type Helper

Discover the power of ComponentProps in React and TypeScript. Learn how to extract and utilize props from native HTML elements, existing components, and elements with associated refs. Enhance your development workflow with this essential type helper.
Matt Pocock
Matt Pocock

How to test your types

Testing types is a crucial aspect of developing libraries in TypeScript. In this article, we explore three different ways to test your types: using the vitest test runner, rolling your own solution with type helpers, and leveraging the tsd library.
Matt Pocock
Matt Pocock

Everything you need to know about TypeScript 5.1 beta

The TypeScript 5.1 beta is out - here's everything you need to know.
Matt Pocock
Matt Pocock

Testing with TypeScript is Painful: Here's a Solution

Testing code doesn't need to be typed so strictly, and sometimes tests need to pass the wrong type. I made a library called shoehorn that eases the pain of working with tests in TypeScript by providing a first-class way to pass the wrong type to a function.
Matt Pocock
Matt Pocock

Function types are weird in TypeScript

The article discusses why TypeScript does not throw an error when a function that is assigned to a variable doesn't match its type. It explains that a function with fewer parameters than its type can still be passed, and this behavior is not restricted to TypeScript but exists in JavaScript as well.
Matt Pocock
Matt Pocock

Const type parameters bring 'as const' to functions

TypeScript 5.0 introduces const type parameters which are useful in preserving the literal types of objects passed to functions.
Matt Pocock
Matt Pocock

9 Ways to Use Exclude in TypeScript

Exclude is a very powerful utility type that can be used in a variety of ways. In this article, I'll show you 9 ways to use it along with code examples.
Matt Pocock
Matt Pocock

TypeScript Discriminated Unions for Frontend Developers

As a frontend developer, your job isn't just pixel-pushing. Most of the complexity in frontend comes from handling all the various states your app can be in. It might be loading data, waiting for a form to be filled in, or sending a telemetry event - or all three at the same time. If you aren't handling your states properly, you're likely to come unstuck. And handling states starts with how th
Matt Pocock
Matt Pocock

Clarifying the `satisfies` Operator

Using the satisfies keyword is one of four ways to make type assignments in TypeScript. In this article we'll look at examples of when each method should be used.
Matt Pocock
Matt Pocock

Structure of a TypeScript Error

Understand why TypeScript throws complicated errors by learning how to read them. Errors mirror the structure of the code being compared and can be simplified by changing the way types are assigned.
Matt Pocock
Matt Pocock

Building the Mental Model for Generics

Learn how to use TypeScript generics on the type level and with functions to improve code readability, type safety, and reduce repetitive code. Use "type helpers" to create new types and generic functions to pass in and return specific types.
Matt Pocock
Matt Pocock

When should you use Zod?

Use Zod to validate unknown inputs in your app, whether it's a CLI or a public API, to ensure that data entering your app is safe. Zod can also be used for 'sort of' trusted inputs, like third-party services, to ensure that the data returned is what you expect.
Matt Pocock
Matt Pocock

Writing string.replace in TypeScript

TypeScript's template literal syntax allows developers to manipulate and transform strings in a powerful way. This can be extended using unions, infer, and recursion to handle more complex tasks.
Matt Pocock
Matt Pocock

Rewriting TypeScript in Rust? You'd have to be...

Donny (kdy1 on GitHub) is rewriting TypeScript in Rust hoping to speed up tsc which is slow due to its TypeScript base. In this interview, he explains some of the financial and technical challenges they face with this open-source project.
Matt Pocock
Matt Pocock

Don't use Function type in TypeScript

Learn why using Function as a function type is not recommended in TypeScript, and discover alternatives for expressing any function type.
Matt Pocock
Matt Pocock