This Crazy Syntax Lets You Get An Array Element's Type
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
TypeScript Articles by Matt Pocock
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.
Is TypeScript just a linter? No, but yes.
It's a massive ship day. We're launching a free TypeScript book, new course, giveaway, price cut, and sale.
Learn why the order you specify object properties in TypeScript matters and how it can affect type inference in your functions.
Learn how to use corepack
to configure package managers in Node.js projects, ensuring you always use the correct one.
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
Discover when it's appropriate to use TypeScript's any
type despite its risks. Learn about legitimate cases where any
is necessary.
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.
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.
Learn how to set up TypeScript to bundle a Node app using pnpm, Node.js, TypeScript, and ES Modules for a seamless development experience.
TypeScript 5.5 introduces type predicate inference from function bodies, simplifying type narrowing and making development easier.
Learn why it's not possible to restrict the type of children in React components with 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.
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.
Whether you use let or const in TypeScript affects whether or not their values can be changed, and how TypeScript infers them.
Learn how to use typescript generics to pass types in constructs like Array<string> and Set<string>.
In TypeScript, the as never
type assertion is occasionally needed when dealing with unions of functions with incompatible parameter types.
Using the method shorthand syntax for function annotations in TypeScript can result in runtime errors. It is recommended to use object property syntax instead.
Learn about the limitations of React's forwardRef
TypeScript and discover a solution to enable inference on generic components.
TypeScript 5.3 introduces relaxed rules around readonly arrays and improvements in const type parameters.
Learn how to provide a TypeScript playground when asking for help with your TypeScript questions, making it easier for others to assist you.
Learn how to work with events in React and TypeScript, from onClick to onSubmit.
A step-by-step guide on setting up ESBuild to bundle a Node application.
When using '--moduleResolution' with the option 'nodenext', it is necessary to add explicit file extensions to relative import paths in EcmaScript imports.
Learn how to add TypeScript to your existing React project in a few simple steps.
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.
Learn TypeScript in 2023 with this step-by-step guide. Understand the basics, essential types, unions, and narrowing techniques.
Learn how to manually assign types to JSON imports in TypeScript by creating .d.json.ts
files, which can greatly improve performance.
TypeScript 5.3 is in the works, with potential features including Import Attributes, throw expressions, isolated declarations, and more.
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.
The satisfies
operator in TypeScript allows for type annotations without sacrificing inference. Here's a few uses for it.
Learn how to use the Extract
helper in TypeScript to extract specific members from a discriminated union or based on their shape.
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.
Learn the key differences between interfaces and type aliases in TypeScript, including their use cases and important features to consider.
In TypeScript, dot notation cannot be used to access type properties, but indexed access types provide more flexibility and are already available.
Using useRef with native elements in React can be confusing, but ElementRef provides an easier solution by extracting the element type.
Learn how to fix the "Cannot use JSX unless the --jsx flag is provided" error in TypeScript by updating your tsconfig.json file.
Understanding generics can be challenging because the term is overloaded. Instead, use the terms "type arguments" and "type parameters" for clarity.
What you think of as "generics" in TypeScript are actually three different patterns.
Iterating over object keys in TypeScript can be challenging. One option is casting to keyof typeof to access values, or using type predicates.
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 shares his advice for working on TypeScript apps where security is critical.
This article discusses four of the most important patterns to know and use: Branded types, Globals, Assertion Functions & Type Predicates, and Classes.
The optional chaining for assignments proposal has reached Stage 1, allowing assignment to possibly undefined object properties.
TypeScript introduces type argument placeholders in version 5.2, which helps with partial inference and lets the language infer types for a function.
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 introduces 'using', a keyword that disposes anything with a Symbol.dispose
function upon leaving scope, making resource management easier.
Learn how to retrieve object keys where the values are of a specific type in TypeScript using an immediate indexed mapped type.
Learn how to fix TypeScript errors regarding the 'Window' interface. Choose between three solutions to add types to the Window object.
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.
Learn about JSX.IntrinsicElements in TypeScript - the global type that defines native JSX elements and their props. Used mainly by frameworks like React.
Find out why this error occurs and learn how to fix it.
Learn the differences between React.ReactNode
and JSX.Element
in TypeScript when working with React.
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.
There are three rules to keep in mind when deciding where to put types in your application code.
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.
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.
The TypeScript 5.1 beta is out - here's everything you need to know.
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.
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.
TypeScript 5.0 introduces const type parameters which are useful in preserving the literal types of objects passed to functions.
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.
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.
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.
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.
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.
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.
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.
Learn why using Function
as a function type is not recommended in TypeScript, and discover alternatives for expressing any function type.