Distributive Conditional Types
Distributive conditional types in TypeScript are a feature that allows a conditional type to automatically distribute over a union of types. This means that when you apply a distributive conditional type to a union of types, TypeScript will independently evaluate the conditional type for each member of the union and produce a union of the results.
Syntax:
type DistributiveConditional<T | T | T> = T extends Condition ? Value 1 : Value 2;
Where-
- <T | T | T> is the different type of types.
- Value1 will be given as a output whenever the condition will be true.
- Value2 will be given as a output whenever the condition will be false.
Example: In this example we will create a ColorMapping type that will map the numbers based on the value of ColorClassMap such as red, green, blue and then create a function that will takes value and infer them with type.
Javascript
type Colors = 'red' | 'blue' | 'green'; // Define a mapping from color to CSS class type ColorClassMap = { 'red': 'danger', 'blue': 'primary', 'green': 'success', }; // Distributive conditional type to map // colors to CSS classes type MapColorsToClasses<T extends string> = T extends keyof ColorClassMap ? { [K in T]: ColorClassMap[T] } : never; // Apply the distributive // type to the Colors union type ColorClasses = MapColorsToClasses<Colors>; const redClass: ColorClasses = { red: 'danger', }; const blueClass: ColorClasses = { blue: 'primary', }; const greenClass: ColorClasses = { green: 'success', }; // This would result in a type error // since 'yellow' is not in the Colors union // const yellowClass: ColorClasses = { // yellow: 'warning', // }; console.log(redClass, blueClass, greenClass) |
Output:
Conclusion: In this article, we have seen what is ConditionalType and its syntax. It is used to define types based on condition. Then we saw Constional Type Constraints, Infering Withing Conditional Type and Distributive Conditional Type By using the Conditional Type<Type> type, you can define the type based on certain condition.
TypeScript Conditional Types
In this article, we are going to discuss Conditional Types. Conditional types in TypeScript are a powerful feature that allows you to create types that depend on a condition or a set of conditions. As JavaScript is a loosely typed language, conditional types enable you to define types that are based on the values or the properties of other types. It uses the extend keyword and a to define a condition and then produce different types based on whether that condition is true or false. This takes a form that looks a little like conditional expressions (condition ? trueExpression: false expressions.
Syntax
type ConditionalType<T> = T extends Condition ? value 1: value 2;
Where-
- ConditionalType<T> is the name of the type having <T> type parameter.
- T extends Condition is the condition that will return true or false
- Value1 is the value when the condition will be true.
Example: In this example, We define a conditional type Num<T> that checks whether the given type T is an array of numbers, an array of strings, or neither, and returns either number, string, or never accordingly. It then uses this conditional type to declare variables num and ‘stringnum’ with specific type assignments, resulting in type-checking errors because the assignments do not match the expected types, and finally logs the variables.
Javascript
type Num<T> = T extends number[] ? number : (T extends string[] ? string : never) // Return num const num: Num<number[]> = 4; // Return invalid const stringnum: Num<number> = "7"; console.log(num, stringnum); |
Output:
Contact Us