It is very useful when you don’t know the keys of an object ahead of time, and particularly useful in our case since we are working on an indexed object. What is a mapped type in TypeScript?Ī mapped type is a type built on the syntax of the index signature. To create a map in TypeScript with an indexed object and a mapped type you need to follow those steps:Ĭongrats 🎉, we have successfully created a map constant that can be reused in our codebase. This is very handy for implementing different types as conditionals and discriminated unions.Create a TypeScript map with an indexed object and a mapped type Never is a type “value” that represents something that will never occur. This usage of extend, narrowing down or constraining the type of a generic, is the cornerstone of being able to implement conditional types, since extends is used as a condition to check whether a generic is or is not of a certain type. The QueryFunction type can be thought of as a function type that accepts two arguments (generics) named T, with a default value of unknown, and TQueryKey, with a default value of QueryKey. If you're not yet comfortable with the use of generics, think of them as function arguments in the type world. In other words, TQueryKey has to be of type QueryKey. The extends keyword here constrains the possible values of the TQueryKey generic to be of the type QueryKey, defined elsewhere in the source code. This type accepts two generic values, T and TQueryKey. In the example above, from a real world implementation of tanstack-query, a new type is defined: QueryFunction. This usage of extends narrowing down or constraining the type of a generic is the corner stone to be able to implement conditional types since the extends will be used as condition to check if a generic is or not of a certain type. It means that the function arguments of getObjectProps will accept any object inside the obj argument, but they key argument can only be a string literal that exists as a property of obj So in Typescript you can reference the previous generic directly. keyof Obj is, as mentioned before, a union of string literals from the properties of Obj and Obj is the first generic parameter." meaning that the Key generic can only be a value found in keyof Obj. Here the extends keyword is used as a constraint and can be read as "Key is of. The second generic parameter is Key extends keyof Obj.
The intention here is to accept any object. Usually people use single letters to identify the generic, but IMHO it is more clear to use a better name like you would with a variable. Obj is the name used to identify this Generic parameter.Let's dissect the generic portion of the above function definition: Then, the function declares that the arguments are of the type of that "type parameters" and it will return a type derived from the generic values as Obj That section defines that this function will receive two "type parameters" that obey certain rules.
#Typescript mapped types code
The “Generic” code is the odd angle brackets section. The keyof operator takes an object type and produces a string or numeric literal union of its keys. This operator is the base building block for advanced typing like mapped and conditional types. It will return a literal union type listing the "properties" of an object-like type. Keyof does something similar but in the typed world only. Object.keys returns a list of an object’s keys. Keyof is Typescript's answer to JavaScript’s Object.keys operator. Mapped Types are a way to derive and reshape types into new ones.īut, before diving into these new concepts, you need to build up your knowledge with the key features that enable the power of Generics and Mapped Types. Generics are a way to create, in the type world, a similar functionality that functions offer. We’ll be specifically be covering Generics and Mapped Typesīoth concepts can be a bit scary at first, mostly because of a knowledge gap that creates a wall and makes the code un-readable at first. There are a few main concepts in Typescript that help you accomplish that goal of reducing boilerplate and reusing more code. When you need to reuse TypeScript code, what do you do? How can you keep your code DRY? How do you reduce the boilerplate code? You might also start seeing code duplication… As you write more complex types, you'll notice your code growing.
0 kommentar(er)
