Fix "Element implicitly has an 'any' type" in TypeScript Object Indexing

By the end of this page, you will understand why TypeScript does not allow indexing a specifically typed object with a plain string, how keyof solves this, and how to correctly type related React data structures so object access like plotOptions[name] is safe and accepted by the compiler.

TypeScript distinguishes between:

• any string: could be "train_1", "hello", or "does_not_exist"
• specific known keys: such as "train_1" | "train_2" | "train_3" | "train_4"

Your plotOptions object has a fixed shape:

type PlotOptions = {
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

That means TypeScript knows exactly which property names are valid.

The problem is that in your original code, name was typed as string:

interface trainInfo {
  name: string;
}

When TypeScript sees this:

plotOptions[name]

it asks: "If can be string, how can I guarantee that property exists on ?"

Think of plotOptions like a locker cabinet with exactly four labeled doors:

• train_1
• train_2
• train_3
• train_4

If someone gives you a key labeled just string, that is like saying:

"Here is a key for some door name."

TypeScript responds:

"I only know these four doors. If you cannot guarantee the label matches one of them, I will not let you open it."

But if the key is typed as:

"train_1" | "train_2" | "train_3" | "train_4"

then TypeScript knows the key fits one of the actual doors, so access is allowed.

A plain string is too vague. A keyof type is a verified label.

Core syntax

Use keyof when a variable must match one of an object's keys.

type PlotOptions = {
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

type TrainName = keyof PlotOptions;

Now use that key type where needed:

interface TrainInfo {
  name: TrainName;
}

const plotOptions: PlotOptions = {
  train_1: true,
  train_2: false,
  train_3: true,
  train_4: true
};

const item: TrainInfo = { name: "train_1" };

console.log(plotOptions[item.name]); // boolean

Example to trace

type PlotOptions = {
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

type TrainName = keyof PlotOptions;

interface TrainInfo {
  name: TrainName;
}

const plotOptions: PlotOptions = {
  train_1: true,
  train_2: false,
  train_3: true,
  train_4: true
};

const trains: TrainInfo[] = [
  { name: "train_1" },
  { name: "train_2" },
  { name: "train_3" }
];

const visible = trains.filter(({ name }) => plotOptions[name]);

What happens step by step

1. defines allowed keys

This pattern appears often in TypeScript projects.

Feature flags

type FeatureFlags = {
  search: boolean;
  billing: boolean;
  analytics: boolean;
};

A component may render sections based on keys like search or billing.

Form field visibility

type VisibleFields = {
  email: boolean;
  phone: boolean;
  address: boolean;
};

A UI can show or hide fields by checking visible[fieldName].

API response mapping

You may group data under known keys and dynamically access a section only if the key is valid.

Chart configuration

Your example is a very common case: a config object stores whether each series should be shown, and the chart data array is filtered using the series name.

Permissions

  = {
  : ;
  : ;
  : ;
};

In real projects, developers usually avoid broad string types when the valid values are known.

Common pattern: derive keys from a config type

type PlotOptions = {
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

type TrainName = keyof PlotOptions;

This keeps key names in one place.

Pattern: reuse literal unions across state and data

interface TrainInfo {
  name: TrainName;
}

This links your data model to your state model, reducing mismatches.

Pattern: guard clauses for unknown external values

If a key comes from user input or an API, it may truly be an arbitrary string. In that case, narrow it before indexing:

function isTrainName(value: string): value is TrainName {
   value  plotOptions;
}

 keyFromApi = ;
 ((keyFromApi)) {
  .(plotOptions[keyFromApi]);
}

1. Typing a known key as plain string

Broken

interface TrainInfo {
  name: string;
}

Why it fails

string is too broad. TypeScript cannot guarantee that plotOptions[name] exists.

Fix

type TrainName = keyof PlotOptions;

interface TrainInfo {
  name: TrainName;
}

2. Adding an index signature when keys are fixed

Overly broad

type PlotOptions = {
  [key: string]: boolean;
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

Fixed keys vs index signature

Quick fix

type PlotOptions = {
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

type TrainName = keyof PlotOptions;

interface TrainInfo {
  name: TrainName;
}

Then this works:

plotOptions[name]

Rule to remember

If an object has specific keys, you cannot safely index it with a plain string.

Use:

keyof SomeType

when the variable should be one of that object's keys.

Common patterns

Safe object indexing

function getValue(obj: PlotOptions, key: keyof ) {
   obj[key];
}

Why does TypeScript say a string cannot be used to index an object?

Because a plain string could be any value, but your object only supports specific keys. TypeScript requires proof that the key is valid.

What does keyof do in TypeScript?

keyof creates a union of an object's property names. For example, keyof PlotOptions becomes "train_1" | "train_2" | "train_3" | "train_4".

Should I use an index signature to fix this error?

Only if your object truly supports arbitrary string keys. If the keys are known ahead of time, keyof is a better and safer solution.

Is plotOptions[name as keyof PlotOptions] a good fix?

It can work, but it is a fallback. It is better to type name correctly so the compiler can verify it naturally.

Why didn't my index signature solve the problem cleanly?

Because the real issue was that name was still typed too broadly. Also, an index signature may make the type less precise than your actual data.

How do I type React state for this case?

Keep the state shape simple and exact:

interface  {
  : ;
}

• keyof — creates a union of valid property names from a type.
• index signatures — used when objects allow arbitrary keys like [key: string]: value.
• Record<K, V> — shorthand for dictionary-style object types.
• union types — used to represent a value that can be one of several exact strings.
• type assertions — can silence indexing errors, though they should be used carefully.
• React state typing — important when component state contains structured objects.
• mapped types — useful when building object types from a set of known keys.
• literal types — let TypeScript track exact string values such as "train_1".