The key is not applicable for indexing the type as expected

Question

The key is not applicable for indexing the type as expected

Here is the TS code I am working with:

type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" };
type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple"
  ? "good"
  : TFruit["color"] extends "green"
  ? "good"
  : "bad";

Playground link

When trying to access TFruit["color"], it throws an error saying:

Type '"color"' cannot be used to index type 'TFruit'.

However, this should not be an issue as we are on a part where TFruit is limited to only

{ kind: "grape"; color: "green" | "black" }

and the key color should exist.

Interestingly, TypeScript does not have any problem with the "runtime" version of this code:

type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" };
const fruitTaste = (fruit: Fruit) =>
  fruit.kind === "apple" ? "good" : fruit.color === "green" ? "good" : "bad";

Playground link

Why is this happening? How can I implement the FruitTaste type correctly?

typescript generics typescript-generics type-inference

Answer 1

Answer №1

In my opinion, one way to implement this is by separating the different types such as { kind: "apple" } and

{ kind: "grape"; color: "green" | "black" }

.

type Apple = { kind: "apple" };
type Grape = { kind: "grape"; color: "green" | "black" };
type Fruit = Apple | Grape;
type FruitTaste<TFruit extends Fruit> = TFruit extends Grape
    ? TFruit["color"] extends "green"
        ? "good"
        : "bad"
    : "good";

Answer 2

In my opinion, one way to implement this is by separating the different types such as { kind: "apple" } and

{ kind: "grape"; color: "green" | "black" }

.

type Apple = { kind: "apple" };
type Grape = { kind: "grape"; color: "green" | "black" };
type Fruit = Apple | Grape;
type FruitTaste<TFruit extends Fruit> = TFruit extends Grape
    ? TFruit["color"] extends "green"
        ? "good"
        : "bad"
    : "good";

Answer 3

Answer №2

When asking why, the answer lies in TypeScript's approach to handling unions in generic conditionals based on specific properties. The issue arises when TFruit cannot be indexed due to it still being a union with elements where one lacks a color property.

To circumvent this, my solution would resemble the following:

type FruitTaste<TFruit extends Fruit> = TFruit extends { kind: "apple" }
  ? "good"
  : (TFruit & { color: string })["color"] extends "green"
    ? "good"
    : "bad";

Prior to accessing color, we can utilize an intersection to enforce TypeScript's acknowledgment of this required property.

Interactive Code Playground

Answer 4

When asking why, the answer lies in TypeScript's approach to handling unions in generic conditionals based on specific properties. The issue arises when TFruit cannot be indexed due to it still being a union with elements where one lacks a color property.

To circumvent this, my solution would resemble the following:

type FruitTaste<TFruit extends Fruit> = TFruit extends { kind: "apple" }
  ? "good"
  : (TFruit & { color: string })["color"] extends "green"
    ? "good"
    : "bad";

Prior to accessing color, we can utilize an intersection to enforce TypeScript's acknowledgment of this required property.

Interactive Code Playground

Answer 5

Answer №3

Here's a clever solution from Matt Pocock on Twitter:

TFruit["color"] extends "green"

doesn't properly differentiate the union, however

TFruit extends { color: 'green' }

does, and it compiles correctly:

type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" };
type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple"
  ? "good"
  : TFruit extends { color: 'green' }
  ? "good"
  : "bad";

Access Playground here

Answer 6

Here's a clever solution from Matt Pocock on Twitter:

TFruit["color"] extends "green"

doesn't properly differentiate the union, however

TFruit extends { color: 'green' }

does, and it compiles correctly:

type Fruit = { kind: "apple" } | { kind: "grape"; color: "green" | "black" };
type FruitTaste<TFruit extends Fruit> = TFruit["kind"] extends "apple"
  ? "good"
  : TFruit extends { color: 'green' }
  ? "good"
  : "bad";

Access Playground here

The key is not applicable for indexing the type as expected

Answer №1

Answer №2

Answer №3

Similar questions

Several values are not equal to the typeorem parameter

"Utilize React input event handler for enforcing minimum input

What is the most efficient way to apply multiple combinations for filtering the information within a table?

Angular HttpInterceptor failing to trigger with nested Observables

Ignore TypeScript errors when using TSNode with Mocha by forcing the compiler to emit code despite errors and having TSNode execute the emitted code

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

Sending an onclick event to a child class through React and TypeScript

What's the best way to include various type dependencies in a TypeScript project?

The attribute 'getValue' is not a valid property for the data type 'Subject<boolean>'

The functionality of Layout.tsx is inconsistent across various pages

Is it time to launch your React TypeScript application on AWS S3?

The application is unable to load due to a console error showing that the endpoint is unreachable

typescriptUsing redux: prevent parent component from accessing redux props

Adjust the scroll bar to move in the reverse direction

Mastering the proper implementation of observables, async/await, and subscribing in Angular

Angular HTTP post is failing on the first attempt but succeeds on the second try

Encountering an Error When Trying to Run Npm Install in React-Native

Guide to Reverting the Two-Way ngModel Binding Data in Angular 2

An effective approach to positioning HTML elements at specific X and Y coordinates

Unleashing the power of joint queries in Sequelize