Cursor Rules for Better AI Development (article)
Learn TypeScript cursor-rules for AI development. Covers best practices, JSDoc, structure. Differentiates workspace & global rules for better AI coding
Total TypeScript
@total-typescript
Publisher
126
Posts
Posts by Total TypeScript
Should You Declare Return Types? (article)
Here's a quick .cursor/rules addition you can make for handling return types in TypeScript. Return Types When declaring functions on the top-level
TypeScript Announces Go Rewrite, Achieves 10x Speedup (article)
TypeScript announced a full rewrite of TypeScript in Go. In testing, this rewrite has achieved a 10x speedup in some repositories - and up to 15x in others.
TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums (article)
TypeScript 5.8's new erasableSyntaxOnly flag enforces pure type annotations by disabling enums, namespaces, and parameter properties.
Node.js Now Supports TypeScript By Default (article)
TypeScript is coming to Node 23. Let's break down what that means.
This Crazy Syntax Lets You Get An Array Element's Type (article)
Learn how to extract the type of an array element in TypeScript using the powerful `Array[number]` trick.
How To Create An NPM Package (article)
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Why I Don't Like Enums (article)
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.
Is TypeScript Just A Linter? (article)
Is TypeScript just a linter? No, but yes.
Announcing: A Free Book, A New Course, A Huge Price Cut... (article)
It's a massive ship day. We're launching a free TypeScript book, new course, giveaway, price cut, and sale.
Sometimes, Object Property Order Matters (article)
Learn why the order you specify object properties in TypeScript matters and how it can affect type inference in your functions.
How To Use Corepack (article)
Learn how to use `corepack` to configure package managers in Node.js projects, ensuring you always use the correct one.
TypeScript Pro Essentials (workshop)
Learn TypeScript by setting up a pro environment, using advanced IDE features, and mastering type annotations, unions, object types, inference, and generics.
How To Strongly Type process.env (article)
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
`any` Considered Harmful, Except For These Cases (article)
Discover when it's appropriate to use TypeScript's `any` type despite its risks. Learn about legitimate cases where `any` is necessary.
No, TypeScript Types Don't Exist At Runtime (article)
Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.
This Pattern Will Wreck Your React App's TS Performance (article)
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.
Deriving vs Decoupling: When NOT To Be A TypeScript Wizard (article)
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
NoInfer: TypeScript 5.4's New Utility Type (article)
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.
Build a Node App with TypeScript (article)
Learn how to set up TypeScript to bundle a Node app using pnpm, Node.js, TypeScript, and ES Modules for a seamless development experience.
Type Predicate Inference: The TS 5.5 Feature No One Expected (article)
TypeScript 5.5 introduces type predicate inference from function bodies, simplifying type narrowing and making development easier.
You Can't Make Children "Type Safe" in React & TypeScript (article)
Learn why it's not possible to restrict the type of children in React components with TypeScript.
Make Your Functions More Reusable With Generics (article)
Learn how to make TypeScript functions more flexible and type-safe by using type parameters instead of using 'any'. Improve code reusability and safety.
How To Type Array.reduce (article)
Learn how to handle errors when using Array.reduce to transform arrays into objects in TypeScript. Fix the error by annotating types or using type arguments.
How let and const Work In TypeScript (article)
Whether you use let or const in TypeScript affects whether or not their values can be changed, and how TypeScript infers them.
How To Pass Types To Functions (article)
Learn how to use typescript generics to pass types in constructs like Array<string> and Set<string>.
When 'as never' Is The Only Thing That Works (article)
In TypeScript, the `as never` type assertion is occasionally needed when dealing with unions of functions with incompatible parameter types.
Method Shorthand Syntax Considered Harmful (article)
Using the method shorthand syntax for function annotations in TypeScript can result in runtime errors. It is recommended to use object property syntax instead.
How To Use forwardRef With Generic Components (article)
Learn about the limitations of React's `forwardRef` TypeScript and discover a solution to enable inference on generic components.
Solving TypeScript Errors (tutorial)
TypeScript boosts productivity but faces pitfalls like type mismatches, null values, & puzzling errors. Learn to spot & solve these for swift progress.
The TypeScript 5.3 Feature They Didn't Tell You About (article)
TypeScript 5.3 introduces relaxed rules around readonly arrays and improvements in const type parameters.
Type Predicates (tip)
Understand how Type Predicates work in TypeScript, using an example of filtering a mixed array of elements.
"Sorry, I Need A TypeScript Playground In Order To Help" (article)
Learn how to provide a TypeScript playground when asking for help with your TypeScript questions, making it easier for others to assist you.
Event Types in React and TypeScript (article)
Learn how to work with events in React and TypeScript, from onClick to onSubmit.
Build a Node App With TypeScript & ESBuild (article)
A step-by-step guide on setting up ESBuild to bundle a Node application.
Relative import paths need explicit file extensions in EcmaScript imports (article)
When using '--moduleResolution' with the option 'nodenext', it is necessary to add explicit file extensions to relative import paths in EcmaScript imports.
Add TypeScript To An Existing React Project (article)
Learn how to add TypeScript to your existing React project in a few simple steps.
The TSConfig Cheat Sheet (article)
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Are Big Projects Ditching TypeScript? (article)
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
How to Pass a Component as a Prop in React (article)
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Intro To TypeScript Performance (article)
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
Strongly Typing React Props with TypeScript (article)
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.
How To Learn TypeScript In 2025 (article)
Learn TypeScript in 2023 with this step-by-step guide. Understand the basics, essential types, unions, and narrowing techniques.
Override the Type of a JSON File (article)
Learn how to manually assign types to JSON imports in TypeScript by creating `.d.json.ts` files, which can greatly improve performance.
What's Coming In TypeScript 5.3? (article)
TypeScript 5.3 is in the works, with potential features including Import Attributes, throw expressions, isolated declarations, and more.
![Array<T> vs T[]: Which is better? (article)](https://wps.hkprog.org/storage/posts/images/5871cdce58360984c929550336d5a5dca5bd5acc.png)
Array<T> vs T[]: Which is better? (article)
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.
5 Ways to Use 'Satisfies' in TypeScript (article)
The `satisfies` operator in TypeScript allows for type annotations without sacrificing inference. Here's a few uses for it.
6 Ways to Use Extract in TypeScript (article)
Learn how to use the `Extract` helper in TypeScript to extract specific members from a discriminated union or based on their shape.
Explained: Cannot redeclare block-scoped variable (article)
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.
Type vs Interface: Which Should You Use? (article)
Learn the key differences between interfaces and type aliases in TypeScript, including their use cases and important features to consider.
Why You Can't Use Dot Notation On Types (article)
In TypeScript, dot notation cannot be used to access type properties, but indexed access types provide more flexibility and are already available.
Strongly Type useRef with ElementRef (article)
Using useRef with native elements in React can be confusing, but ElementRef provides an easier solution by extracting the element type.
Explained: Cannot use JSX unless the '--jsx' flag is provided (article)
Learn how to fix the "Cannot use JSX unless the --jsx flag is provided" error in TypeScript by updating your tsconfig.json file.
There Is No Such Thing As A Generic (article)
Understanding generics can be challenging because the term is overloaded. Instead, use the terms "type arguments" and "type parameters" for clarity.
TypeScript Generics in 3 Easy Patterns (article)
What you think of as "generics" in TypeScript are actually three different patterns.
How to Iterate Over Object Keys in TypeScript (article)
Iterating over object keys in TypeScript can be challenging. One option is casting to keyof typeof to access values, or using type predicates.
An `unknown` can't always fix an `any` (article)
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.
My advice for security-critical TS apps (article)
Matt Pocock shares his advice for working on TypeScript apps where security is critical.
Four Essential TypeScript Patterns You Can't Work Without (article)
This article discusses four of the most important patterns to know and use: Branded types, Globals, Assertion Functions & Type Predicates, and Classes.
Optional Chaining for Assignments Lands in Stage 1 (article)
The optional chaining for assignments proposal has reached Stage 1, allowing assignment to possibly undefined object properties.
Advanced React with TypeScript (workshop)
Expert-level knowledge for typing your React apps with TypeScript.
Type Argument Placeholders: TypeScript's Most Discussed Upcoming Feature (article)
TypeScript introduces type argument placeholders in version 5.2, which helps with partial inference and lets the language infer types for a function.
The Empty Object Type in TypeScript (article)
Learn why {} in TypeScript doesn't represent an empty object, and how to use the Record type to represent an empty object.
TypeScript 5.2's New Keyword: 'using' (article)
TypeScript 5.2 introduces 'using', a keyword that disposes anything with a `Symbol.dispose` function upon leaving scope, making resource management easier.
Get Keys of an Object Where Values Are of a Given Type (article)
Learn how to retrieve object keys where the values are of a specific type in TypeScript using an immediate indexed mapped type.
How to Properly Type Window (article)
Learn how to fix TypeScript errors regarding the 'Window' interface. Choose between three solutions to add types to the Window object.
Since TypeScript 5.1, React.FC is now "fine" (article)
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.
What is JSX.IntrinsicElements? (article)
Learn about JSX.IntrinsicElements in TypeScript - the global type that defines native JSX elements and their props. Used by frameworks like React.
Explained: 'React' refers to a UMD global (article)
Find out why this error occurs and learn how to fix it.
React.ReactNode vs JSX.Element vs React.ReactElement (article)
Learn the differences between React.ReactNode and JSX.Element in TypeScript when working with React.
Transform Any Union in TypeScript with the IIMT (article)
Since I first got into advanced TypeScript, I've been in love with a particular pattern.
Where To Put Your Types in Application Code (article)
There are three rules to keep in mind when deciding where to put types in your application code.
ComponentProps: React's Most Useful Type Helper (article)
Discover the power of ComponentProps in React and TypeScript.
React with TypeScript (tutorial)
Get productive building applications with React and TypeScript with our interactive guide on React's types - from component props to useRef.
How to test your types (article)
Testing types is a crucial aspect of developing libraries in TypeScript. In this article, we explore three different ways to test your types.
Everything you need to know about TypeScript 5.1 beta (article)
The TypeScript 5.1 beta is out - here's everything you need to know.
TypeScript 5.1 Beta is OUT! (tip)
TypeScript 5.1 is out! With important updates to React Server Components and some small usability updates.
How to Name your Types (tip)
How to name your types in TypeScript can be a tricky business. Matt takes you through his opinionated heuristics for how to decide.
Testing with TypeScript is Painful: Here's a Solution (article)
Testing code doesn't need to be typed so strictly, and sometimes tests need to pass the wrong type.
Function types are weird in TypeScript (article)
The article discusses why TypeScript does not throw an error when a function that is assigned to a variable doesn't match its type.
Const type parameters bring 'as const' to functions (article)
TypeScript 5.0 introduces const type parameters which are useful in preserving the literal types of objects passed to functions.
9 Ways to Use Exclude in TypeScript (article)
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.
TypeScript Discriminated Unions for Frontend Developers (article)
Discriminated Unions make frontend development easier by representing the different application states and helping to make connections between data and UI.
Clarifying the `satisfies` Operator (article)
Using the satisfies keyword is one of four ways to make type assignments in TypeScript. But when should you use it?
Don't use return types, unless... (tip)
When should you use return types in TypeScript? The use cases are narrower than you might think...
TypeScript 5.0 Beta Deep Dive (tip)
TypeScript 5.0 beta brings a bunch of exciting features, including const annotations and decorators.
Structure of a TypeScript Error (article)
Understand why TypeScript throws complicated errors by learning how to read them.
Building the Mental Model for Generics (article)
Learn how to use TypeScript generics to improve code readability, type safety, and reduce repetitive code.
When should you use Zod? (article)
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.
Writing string.replace in TypeScript (article)
TypeScript's template literal syntax enables powerful string manipulation and transformation using unions, infer, and recursion.
Rewriting TypeScript in Rust? You'd have to be... (article)
Donny (kdy1 on GitHub) is rewriting TypeScript in Rust hoping to speed up tsc which is slow due to its TypeScript base.
Don't use Function type in TypeScript (article)
Learn why using `Function` as a function type is not recommended in TypeScript, and discover alternatives for expressing any function type.
Advanced TypeScript Patterns (workshop)
Intermediate to advanced workshop: Boost app logic, type global scopes, and debug with external libraries.
TypeScript Generics (workshop)
Master TypeScript's generics with exercises from basics to advanced, including conditional types and currying.
Type Transformations (workshop)
Learn to manipulate types for cleaner, maintainable code with over 50 hands-on exercises, from string manipulation to advanced unions and mapped types.
Conform a Derived Type Without Losing Its Literal Values (tip)
Total TypeScript Tip
Beginner's TypeScript (tutorial)
Free interactive video tutorial that will help you get started with TypeScript.
Avoid unexpected behavior of React’s useState (tip)
React's useState can behave in slightly unexpected ways in TypeScript - sometimes giving you undefined when you least expect it.
Understand assignability in TypeScript (tip)
I often find conditional types SUPER hard to read. Here's how to get a better mental model for assignability in TypeScript.
Compare function overloads and generics (tip)
A simple function - returnWhatIPassIn - can be enough to stump many newbie TypeScript devs.
Use infer in combination with string literals to manipulate keys of objects (tip)
Still struggling with infer? How about this - you can use it in combination with string literals to manipulate keys of objects.
Access deeper parts of objects and arrays (tip)
Accessing object values and array members is MUCH more powerful in the type world than it is in the runtime world.
Ensure that all call sites must be given value (tip)
This one little tip has saved me hours of refactoring time. Passing string | undefined instead of ?: string ensures that ALL call sites must be given a value.
Understand how TypeScript infers literal types (tip)
This mental model is INCREDIBLY useful for all sorts of intermediate-advanced typings.
Get a TypeScript package ready for release to NPM in under 2 minutes (tip)
If you're thinking about putting a TypeScript package up to NPM, you should be considering preconstruct.
Use assertion functions inside classes (tip)
You can do some really, really neat stuff with assertion functions inside classes.
Assign local variables to default generic slots to dry up your code and improve performance (tip)
You can DRY up your generics code MASSIVELY (and improve perf) by assigning local variables to default generic slots.
Know when to use generics (tip)
It can be hard to know when to reach for generics. I'll show you when you need them.
Map over a union type (tip)
Mapping over a union type can feel tricky to conceptualise. But actually, TypeScript does it all for you - using Distributive Conditional Types.
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig (tip)
The "noUncheckedIndexedAccess" is the most awesome config option you've never heard of.
Use generics to dynamically specify the number, and type, of arguments to functions (tip)
You can use generics to dynamically specify the number, and type, of arguments to functions.
Use 'declare global' to allow types to cross module boundaries (tip)
Globals in TypeScript?! 🤯 'declare global' is a super useful tool for when you want to allow types to cross module boundaries.
Turn a module into a type (tip)
Want to turn a module into a type? You can use typeof import('./') to grab the type of any module, even third-party ones.
Create autocomplete helper which allows for arbitrary values (tip)
Ever wanted just a bit of autocomplete? Here, we create a TypeScript helper called LooseAutocomplete which allows arbitrary values.
Use deep partials to help with mocking an entity (tip)
Deep partials are SUPER useful and not natively supported by TypeScript. Here, I use one to help with mocking an entity in a (imaginary) test file.
Throw detailed error messages for type checks (tip)
Using a crazy trick I picked up from @AndaristRake, you can throw detailed error messages for type checks.
Create a 'key remover' function which can process any generic object (tip)
Generics can be 'locked in' by function calls, meaning that generics can be 'curried' through functions.
Use generics in React to make dynamic and flexible components (tip)
You can use generics in React to make incredibly dynamic, flexible components. Here, I make a Table component with a generic 'items' type.
Create your own 'objectKeys' function using generics and the 'keyof' operator (tip)
The looseness of Object.keys can be a real pain point when using TypeScript. It's pretty simple to create a tighter version using generics and keyof operator.
Write your own 'PropsFrom' helper to extract props from any React component (tip)
Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more readable.
Use 'extends' keyword to narrow the value of a generic (tip)
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.
Use function overloads and generics to type a compose function (tip)
Function overloads can be used in conjunction with generics to make incredibly complex and dynamic type signatures.
Decode URL search params at the type level with ts-toolbelt (tip)
TypeScript's string interpolation powers are incredible, especially since 4.1. Add some utilities from ts-toolbelt, and you've got a stew going.
Use 'in' operator to transform a union to another union (tip)
Transform a union to another union, using the in operator as a kind of for-loop. This pattern can be used for almost any kind of transformation.
Derive a union type from an object (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.
Zod (tutorial)
Zod is a TypeScript-first schema declaration and validation library. In this tutorial, Matt Pocock has prepared a set of exercises that will help you level up.