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