TypeScript, the statically-typed superset of JavaScript, is well-known for its powerful type system. As developers delve deeper into TypeScript, they discover advanced type inference techniques that can make code more expressive and robust. In this article, we’ll explore some of these advanced type inference features.<\/p>\n
Conditional types are a fascinating feature in TypeScript that allow us to conditionally select types based on some criteria. The In this code, the <\/span> Example:<\/p>\n In this example:<\/p>\n When you call Mapped types offer a way to create new types by transforming the properties of an existing type. Let’s take a common example: making all properties of an object optional.<\/p>\n With this Suppose you have an interface representing a basic user object:<\/p>\n Now, you want to create a new type that makes all properties of this user object optional. You can use a mapped type for this:<\/span><\/p>\n In this example:<\/p>\n Now, let’s use the Here, <\/span> Introduced in TypeScript 4.1, template literal types enable you to create string literal types by concatenating other string literals. Here’s an example:<\/p>\n Template literal types are a powerful tool for creating types that match specific string patterns, such as event names or API endpoints.<\/p>\n Essentially, this code enforces that the Here are some examples to illustrate the behavior:<\/p>\n In the last example, TypeScript correctly identifies that the string <\/span> The You can use this mechanism to automatically determine the return type of functions, which is especially helpful for cases where the return type depends on complex logic or input types.<\/p>\n Here are some additional examples:<\/p>\n In each case, TypeScript correctly infers the return type of the function, making your code more type-safe and maintainable.<\/span><\/p>\n Combining mapped types and conditional types can lead to advanced type transformations. For instance, you can create a mapped type that makes all methods of a class asynchronous:<\/p>\n Suppose you have an interface <\/span> Now, you want to create a new type that transforms all properties of Person to be optional if the property name starts with “has.” You can achieve this using mapped types with conditional types:<\/p>\n In this example:<\/p>\n Now, let’s use the In this example:<\/p>\n Mapped types with conditional types are incredibly useful when you need to transform or modify properties based on certain conditions while preserving the type safety of the original interface.<\/span><\/p>\n The Suppose you have an object representing a user with various properties:<\/p>\n Now, let’s say you want to create a utility function that allows you to access the values of specific properties using their names. You can use <\/span> In this example:<\/p>\n By using Here are some additional examples:<\/p>\n In this case, TypeScript correctly identifies that there is no ‘age’ property on the Keyof and lookup types are especially useful when you need to work with dynamic property access or when you want to ensure that you’re using valid property names and their corresponding types at compile time.<\/p>\n You can infer the element type of an array using conditional types and Suppose you have an array with various types of elements:<\/p>\n Now, you want to create a utility function that infers the type of the elements within the array. You can use conditional types and inference for this purpose:<\/span><\/p>\n In this example:<\/p>\n When you call Here are some additional examples:<\/p>\n In each case, the This is particularly useful when you’re working with arrays of unknown or heterogeneous types and need to perform operations based on the inferred element type.<\/p>\n In TypeScript, you can create recursive types to model structures like linked lists or trees:<\/p>\ninfer<\/code> keyword within conditional types is especially intriguing. Consider the following example:<\/p>\ntype IsArray<T> = T extends Array<any> ? true : false;\r\ntype Result = IsArray<number[]>; \/\/ Result is true<\/code><\/pre>\n<\/div>\nIsArray<\/code> type checks whether the provided type <\/span>T<\/code> is an array or not, returning <\/span>true<\/code> if it is and <\/span>false<\/code> otherwise. Conditional types are incredibly useful for creating complex type mappings.<\/span><\/p>\nfunction getUserInfo<T extends 'id' | 'name'>(key: T): T extends 'id' ? number : string {\r\nif (key === 'id') {\r\nreturn 123; \/\/ Assume this is a user ID (number)\r\n} else {\r\nreturn 'John Doe'; \/\/ Assume this is the user's name (string)\r\n}\r\n}\r\n\r\nconst userId: number = getUserInfo('id'); \/\/ Valid, userId is a number\r\nconst userName: string = getUserInfo('name'); \/\/ Valid, userName is a string<\/code><\/pre>\n<\/div>\n\n
getUserInfo<\/code> function takes a key<\/code> parameter that can be either 'id'<\/code> or 'name'<\/code>.<\/li>\nkey<\/code> is 'id'<\/code>, the function returns a number<\/code> (the user’s ID), and if key<\/code> is 'name'<\/code>, it returns a string<\/code> (the user’s name).<\/li>\n<\/ul>\ngetUserInfo('id')<\/code>, TypeScript infers that the return type is number<\/code>, and when you call getUserInfo('name')<\/code>, it infers that the return type is string<\/code>. This conditional typing allows you to have different return types based on the condition, making your code type-safe.<\/p>\nMapped Types<\/h2>\n
type Partial<T> = {\r\n[K in keyof T]?: T[K];\r\n};<\/code><\/pre>\n<\/div>\nPartial<\/code> type, you can easily make any object’s properties optional. This can be a game-changer when you’re working with APIs and want to describe optional parameters.<\/p>\ninterface User {\r\nid: number;\r\nname: string;\r\nemail: string;\r\n}<\/code><\/pre>\n<\/div>\ntype PartialUser = {\r\n[K in keyof User]?: User[K];\r\n};<\/code><\/pre>\n<\/div>\n\n
[K in keyof User]<\/code> iterates over all the keys (id<\/code>, name<\/code>, and email<\/code>) in the User<\/code> interface.<\/li>\n?: User[K]<\/code> makes each property optional by adding the ?<\/code> modifier.<\/li>\n<\/ul>\nPartialUser<\/code> type:<\/p>\nconst partialUser: PartialUser = {\r\nid: 1,\r\n};<\/code><\/pre>\n<\/div>\npartialUser<\/code> is of type <\/span>PartialUser<\/code>, and you’re allowed to omit properties like <\/span>name<\/code> and <\/span>email<\/code> while retaining the <\/span>id<\/code> property. This demonstrates how mapped types can help you create new types that are based on the structure of existing types but with specific modifications.<\/span><\/p>\nTemplate Literal Types<\/h2>\n
type EventName = `on${string}`;\r\nconst onClick: EventName = 'onclick'; \/\/ Valid<\/code><\/pre>\n<\/div>\n\n
type EventName = <\/code>on${string};<\/code><\/strong>: Here, you’re defining a new type called EventName<\/code>. This type uses a template literal type to create string literal types. The template literal on${string}<\/code> specifies that the EventName<\/code> type should start with the string “on” and be followed by any string (${string}<\/code>). This means that EventName<\/code> can only represent string values that start with “on”.<\/li>\nconst onClick: EventName = 'onclick';<\/code><\/strong>: You’re declaring a constant onClick<\/code> with the type EventName<\/code>. Since EventName<\/code> is defined as a template literal type that starts with “on”, assigning the string literal 'onclick'<\/code> to it is valid because it matches the pattern defined by the type.<\/li>\n<\/ol>\nonClick<\/code> variable can only hold string values that start with “on”. Any attempt to assign a string that doesn’t conform to this pattern would result in a TypeScript type error.<\/p>\nconst onClick1: EventName = 'onclick'; \/\/ Valid\r\nconst onClick2: EventName = 'onmousedown'; \/\/ Valid\r\nconst invalidEvent: EventName = 'hover'; \/\/ Error: Type '\"hover\"' is not assignable to type 'EventName'.<\/code><\/pre>\n<\/div>\n'hover'<\/code> does not match the expected pattern defined by the <\/span>EventName<\/code> type and reports a type error. This demonstrates how template literal types can be used to create highly specific and constrained string literal types in TypeScript.<\/span><\/p>\nInfer in Conditional Types<\/h2>\n
infer<\/code> keyword can be used within conditional types to extract types from other types. A common use case is creating a utility type to extract the return type of a function:<\/p>\n\/\/ Define a conditional type ReturnType<T> that extracts the return type of a function\r\ntype ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;\r\n\r\n\/\/ Define a simple function\r\nfunction add(a: number, b: number): number {\r\nreturn a + b;\r\n}\r\n\r\n\/\/ Use the ReturnType type to infer the return type of the 'add' function\r\ntype Result = ReturnType<typeof add>; \/\/ Result is number<\/code><\/pre>\n<\/div>\n\n
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;<\/code><\/strong>: This defines a conditional type ReturnType<\/code>. It checks if the type T<\/code> extends a function type that takes any number of arguments ((...args: any[])<\/code>) and uses the infer<\/code> keyword to capture the inferred return type R<\/code>. If the condition is met, it returns R<\/code>; otherwise, it returns never<\/code>.<\/li>\nfunction add(a: number, b: number): number { ... }<\/code><\/strong>: This is a simple addition function that takes two numbers and returns their sum.<\/li>\ntype Result = ReturnType<typeof add>;<\/code><\/strong>: Here, you’re using the ReturnType<\/code> type to infer the return type of the add<\/code> function. Since add<\/code> returns a number<\/code>, the Result<\/code> type is inferred as number<\/code>.<\/li>\n<\/ol>\nfunction greet(name: string): string {\r\nreturn `Hello, ${name}!`;\r\n}\r\n\r\ntype GreetResult = ReturnType<typeof greet>; \/\/ GreetResult is string\r\n\r\nfunction divide(a: number, b: number): number {\r\nreturn a \/ b;\r\n}\r\n\r\ntype DivideResult = ReturnType<typeof divide>; \/\/ DivideResult is number<\/code><\/pre>\n<\/div>\nMapped Types with Conditional Types<\/h2>\n
Person<\/code> representing individuals with different properties:<\/span><\/p>\ninterface Person {\r\nname: string;\r\nage: number;\r\nhasEmail: boolean;\r\n}<\/code><\/pre>\n<\/div>\ntype TransformPerson<T> = {\r\n[K in keyof T]: K extends `has${infer U}` ? boolean : T[K];\r\n};<\/code><\/pre>\n<\/div>\n\n
[K in keyof T]<\/code> iterates over all the keys (name<\/code>, age<\/code>, and hasEmail<\/code>) in the Person<\/code> interface.<\/li>\nK extends <\/code>has${infer U} ? boolean : T[K]<\/code> checks whether each property key starts with “has.” If it does, the property is transformed to a boolean type; otherwise, it remains unchanged.<\/li>\n<\/ul>\nTransformPerson<\/code> type:<\/p>\nconst person: TransformPerson<Person> = {\r\nname: 'Alice',\r\nage: 30,\r\nhasEmail: true,\r\n};\r\n\r\nconst optionalPerson: Partial<Person> = person; \/\/ This works because properties are optional now<\/code><\/pre>\n<\/div>\n\n
person<\/code> is of type TransformPerson<Person><\/code>, which means that all properties starting with “has” are of type boolean<\/code>, and other properties retain their original types.<\/li>\noptionalPerson<\/code> is of type Partial<Person><\/code> because all properties are now optional. This allows you to create an object where you can omit some or all properties safely.<\/li>\n<\/ul>\nKeyof and Lookup Types<\/h2>\n
keyof<\/code> operator allows you to extract keys from an object and use them to access corresponding property types. For example:<\/p>\nconst user = {\r\nid: 1,\r\nusername: 'john_doe',\r\nemail: 'john@example.com',\r\n};<\/code><\/pre>\n<\/div>\nkeyof<\/code> to extract the keys of the object and lookup types to access their corresponding types:<\/span><\/p>\nfunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {\r\nreturn obj[key];\r\n}\r\n\r\nconst userId: number = getProperty(user, 'id'); \/\/ userId is inferred as number\r\nconst username: string = getProperty(user, 'username'); \/\/ username is inferred as string\r\nconst userEmail: string = getProperty(user, 'email'); \/\/ userEmail is inferred as string<\/code><\/pre>\n<\/div>\n\n
getProperty<\/code> function takes two type parameters: T<\/code> (the type of the object) and K<\/code> (the type of the property key).<\/li>\nobj<\/code>) and a property key (key<\/code>), and it returns the value of the specified property from the object.<\/li>\n<K extends keyof T><\/code> constraint ensures that the property key (K<\/code>) is a valid key of the object’s type (T<\/code>).<\/li>\n<\/ul>\nkeyof T<\/code>, you can dynamically access the properties of the object while maintaining type safety. If you try to access a property that doesn’t exist on the object, TypeScript will catch the error at compile time.<\/p>\nconst invalidProperty = getProperty(user, 'age'); \/\/ Error: Property 'age' does not exist on type '{ id: number; username: string; email: string; }'.<\/code><\/pre>\n<\/div>\nuser<\/code> object and reports a type error.<\/p>\nInference for Array Element Types<\/h2>\n
infer<\/code>:<\/p>\nconst mixedArray = [1, 'two', true, { name: 'Alice' }];<\/code><\/pre>\n<\/div>\ntype ArrayElementType<T> = T extends (infer U)[] ? U : never;\r\n\r\nfunction getFirstElement<T>(arr: T[]): ArrayElementType<T> {\r\nreturn arr[0];\r\n}\r\n\r\nconst firstElement: number | string | boolean | { name: string } = getFirstElement(mixedArray);<\/code><\/pre>\n<\/div>\n\n
ArrayElementType<T><\/code> type uses a conditional type to check if T<\/code> extends an array of some type (T extends (infer U)[]<\/code>). If it does, it infers the element type U<\/code>; otherwise, it returns never<\/code>.<\/li>\ngetFirstElement<\/code> function takes an array of type T<\/code> and returns the inferred element type using ArrayElementType<T><\/code>.<\/li>\n<\/ul>\ngetFirstElement(mixedArray)<\/code>, TypeScript infers the type of firstElement<\/code> based on the elements in the mixedArray<\/code>. In this case, firstElement<\/code> is inferred as number | string | boolean | { name: string }<\/code>, which represents all possible types of elements in the array.<\/p>\nconst numbers = [1, 2, 3, 4, 5];\r\nconst strings = ['apple', 'banana', 'cherry'];\r\n\r\nconst firstNumber: number = getFirstElement(numbers);\r\nconst firstString: string = getFirstElement(strings);<\/code><\/pre>\n<\/div>\ngetFirstElement<\/code> function dynamically infers the element type of the array and ensures type safety.<\/p>\nRecursive Types<\/h2>\n
type ListNode<T> = { value: T; next?: ListNode<T> };\r\ntype LinkedList<T> = ListNode<T> | undefined;\r\n\r\n\/\/ Create a linked list of numbers\r\nconst node1: ListNode<number> = { value: 1 };\r\nconst node2: ListNode<number> = { value: 2 };\r\nconst node3: ListNode<number> = { value: 3 };\r\n\r\nnode1.next = node2;\r\nnode2.next = node3;\r\n\r\n\/\/ Linked list traversal\r\nfunction printLinkedList<T>(head: LinkedList<T>) {\r\nlet current: LinkedList<T> = head;\r\nwhile (current) {\r\nconsole.log(current.value);\r\ncurrent = current.next;\r\n}\r\n}\r\n\r\n\/\/ Print the linked list\r\nprintLinkedList(node1); \/\/ Outputs: 1, 2, 3<\/code><\/pre>\n<\/div>\n\n
ListNode<T><\/code> represents a node in the linked list, containing a value<\/code> of type T<\/code> and an optional next<\/code> property pointing to the next node in the list.<\/li>\nLinkedList<T><\/code> is a type alias that can be either a ListNode<T><\/code> or undefined<\/code>, representing the head of the linked list. It’s undefined<\/code> when the list is empty.<\/li>\nnode1<\/code>,