Let's imagine you're creating a function which sums up an array of objects. Here's one, taken from the Excalidraw codebase:
Let's look at the type definition. This function takes in:
readonly T[](item: T) => numberand returns number.
In the body, it calls array.reduce(func, 0). This means the acc in the function begins as 0.
For each member of the array, it then adds acc and mapper(item) together. So, you end up with the sum of all of the members of the array.
The mapper function is the key. Let's strip it out to take a look at it:
Let's imagine a use case for this:
Here, mapper represents the function that extracts the number from the object. The powerful thing about the sum function is that you can discard most of these type declarations:
We've actually discarded all of the type declarations, but video is still inferred as { name: string; views: number }. This is possible because of the specificity of our function definition: (item: T) => number.
Function?The big mistake I see a lot of beginner devs making is declaring a function like mapper with the Function type:
This keyword basically stands for 'any function'. It means that sum can technically receive any function.
When used in sum, we lose a lot of the safety that (item: T) => number provided:
TypeScript now can't infer what item is supposed to be, or what our mapper function is supposed to return.
The lesson here is 'don't use Function' - there's always a more specific option available.
Sometimes, you'll want to express 'any function' in TypeScript. For this, let's look at some of TypeScript's built-in types, Parameters and ReturnType.
You'll notice that both of these utility types use the same constraint: (...args: any) => any.
(...args: any) specifies that the function can take any number of arguments, and => any indicates that it can return anything.
For expressing a function with no arguments (but that returns anything), you'll want to use () => any:
Function should never be used when expressing types.
(a: string, b: number) => any syntax can be used when you want to specify only the arguments, but not the return type.
(...args: any) => any can be used to represent any function type.
Share this article with your friends
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 they
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.
