CodeBlanks Logo Icon CodeBlanks
Login Register

Distributive conditional

Learn distribution and unions.

Distributive conditional

When a conditional type is used on a union type, distribution occurs. Etiket<string | number> is evaluated separately for each member: Etiket<string> | Etiket<number>. The result is the union of each branch.

type Etiket<T> =
  T extends string ? "metin" : "sayi";
type R = Etiket<string | number>;
// "metin" | "sayi"

The basis of distribution

Distribution happens automatically when the type parameter on the left of a conditional is a union. The condition is evaluated separately for each member and the results combine. This is the core mechanism for filtering specific types from a union (Exclude, Extract).

Practice Label a union

Write the conditional type Etiket<T> as T extends string ? "metin" : "sayi". Define type Sonuclar as Etiket<string | number>. Define variable dizi with type Sonuclar[] and assign ["metin", "sayi"]. Print dizi[0] and dizi[1] on separate lines.

Starter code

index.ts
// Etiket<T> koşullu türünü tanımla
// T string ise "metin", değilse "sayi"
// Sonuclar türünü Etiket<string | number> olarak tanımla
// dizi değişkenini Sonuclar[] türünde tanımla, ["metin", "sayi"] ata
// dizi[0] ve dizi[1]'i ayrı satırlarda yazdır

Sample solution

index.ts
type Etiket<T> = T extends string ? "metin" : "sayi";
type Sonuclar = Etiket<string | number>;
const dizi: Sonuclar[] = ["metin", "sayi"];
console.log(dizi[0]);
console.log(dizi[1]);

Expected output

metin
sayi

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does Etiket<string | number> produce with a distributive conditional?

index.ts
type Etiket<T> = T extends string ? "metin" : "sayi";
type R = Etiket<string | number>;
  • string | number
  • never
  • "metin"
  • "metin" | "sayi" Correct answer

Explanation: Distribution evaluates each member separately: "metin" for string, "sayi" for number. The result is the union of these literal types. string | number or never is wrong; just "metin" is incomplete.

2 Distribution with a union

Question 
type Etiket<T> = T extends string ? "metin" : "sayi";
type R = Etiket<____>;
// R: "metin" | "sayi"
Answer 
type Etiket<T> = T extends string ? "metin" : "sayi";
type R = Etiket<string | number>;
// R: "metin" | "sayi"

Explanation: For distribution to produce a union, the type parameter must be a union. Bare string gives one branch; bare number gives one branch; string & number reduces to never.

3 Distributive conditional parts

Term Meaning
Etiket<string | number> Distributive call
Etiket<string> First member evaluation
Etiket<number> Second member evaluation
"metin" | "sayi" Distribution result

All lessons in Intermediate

1 Classes

  1. Class basics
  2. Constructor and fields
  3. Methods
  4. Static members
  5. Summary - Classes

2 Access modifiers

  1. public
  2. private
  3. protected
  4. Parameter properties
  5. Summary - Access modifiers

3 Readonly properties

  1. readonly fields
  2. Readonly parameter
  3. Readonly vs const
  4. Summary - Readonly

4 Generics

  1. What is a generic?
  2. Generic functions
  3. Generic classes
  4. Multiple type parameters
  5. Summary - Generics

5 Generic constraints

  1. extends constraint
  2. keyof constraint
  3. Default type parameter
  4. Summary - Generic constraints

6 Utility types

  1. Partial
  2. Required and Pick
  3. Omit and Record
  4. Summary - Utility types

7 keyof and typeof

  1. keyof operator
  2. typeof operator
  3. Indexing with keyof
  4. Summary - keyof and typeof

8 Mapped types

  1. What is a mapped type?
  2. Readonly mapped type
  3. Optional mapped type
  4. Summary - Mapped types

9 Conditional types

  1. What is a conditional type?
  2. Distributive conditional
  3. Logic with conditional
  4. Summary - Conditional types

10 infer

  1. infer keyword
  2. Extracting from Promise
  3. Array element type
  4. Summary - infer

11 Decorators

  1. What is a decorator?
  2. Method decorator
  3. Property decorator
  4. Decorator factories
  5. Summary - Decorators

12 Modules

  1. export and import
  2. Default export
  3. Re-export
  4. Type-only import
  5. Summary - Modules

13 Namespaces

  1. What is a namespace?
  2. Nested namespace
  3. Namespace vs module
  4. Summary - Namespaces

14 Declaration files

  1. What is .d.ts?
  2. Ambient module
  3. Triple-slash directive
  4. Summary - Declaration files

15 Advanced classes

  1. abstract class
  2. implements
  3. Get and set
  4. Summary - Advanced classes

16 Type assertion

  1. as keyword
  2. angle bracket syntax
  3. Type assertion vs casting
  4. Casting from unknown
  5. Summary - Type assertion

17 Project: Library package

  1. Package design
  2. Exporting types
  3. Generic helpers
  4. Declaration file
  5. Integration

18 Project: Quiz app

  1. Question model
  2. Question pool
  3. Answer check
  4. Score calculation
  5. Integration

19 Project: Weather app

  1. Weather model
  2. API response type
  3. Data transform
  4. Display
  5. Integration

20 Intermediate final

  1. Challenge 1: Classes
  2. Challenge 2: Generics
  3. Challenge 3: Type systems
  4. Challenge 4: Mini app