TypeScript Indexed Access Types: Get a Value Type from a Key

By the end of this page, you will understand how to make one function parameter depend on another in TypeScript. You will learn how keyof, generics, and indexed access types like T[K] work together so that a key such as 'expire' automatically requires a Date, while 'id' requires a string.

TypeScript does not have a built-in keyword called valueof that mirrors keyof in the way beginners often expect. Instead, the usual solution is indexed access types.

If you have a type:

type JWT = {
  id: string;
  token: string;
  expire: Date;
};

then:

type ExpireType = JWT['expire']; // Date
type IdType = JWT['id']; // string

That is how you ask TypeScript for the type of a property value.

The important next step is making that depend on a function argument. For that, you use a generic type parameter:

function onChange<K extends keyof JWT>(key: K, value: JWT[K]) {
  obj[key] = value;
}

Here is what this means:

Think of an object type as a labeled cabinet:

• keyof JWT gives you the list of drawer labels: id, token, expire
• JWT[K] means: “open the drawer named K and tell me what kind of thing belongs inside”

So if the label is:

• id → the drawer holds string
• token → the drawer holds string
• expire → the drawer holds Date

A generic function lets TypeScript remember which drawer label you passed in, so it can enforce the correct type for the value going into that drawer.

Core syntax

function update<K extends keyof T>(key: K, value: T[K]) {
  // ...
}

This pattern means:

• key must be a valid key from T
• value must match the type of that key

Example with JWT

type JWT = {
  id: string;
  token: string;
  expire: Date;
};

const obj: JWT = {
  id: 'abc123',
  token: 'tk01',
  expire: new Date(2018, 2, 14)
};

function onChange<K extends keyof JWT>(key: K, : [K]) {
  obj[key] = value;
}

(, );
(, );
(,  ());


(, );

Example

type JWT = {
  id: string;
  token: string;
  expire: Date;
};

const obj: JWT = {
  id: 'abc123',
  token: 'tk01',
  expire: new Date('2018-03-14')
};

function onChange<K extends keyof JWT>(key: K, value: JWT[K]) {
  obj[key] = value;
}

onChange('id', 'def456');
onChange('expire', new Date('2018-04-14'));

What happens step by step

Call 1

onChange('id', 'def456');

TypeScript infers:

Updating form state

When building forms, different fields have different types:

type FormState = {
  name: string;
  age: number;
  subscribed: boolean;
};

A typed update function can enforce correct values for each field.

Updating configuration objects

Application config often mixes strings, numbers, and booleans. Using T[K] prevents assigning the wrong type to a setting.

Working with API models

If you receive structured data from an API, typed key/value updates help keep model objects valid.

Generic utility functions

Libraries and shared utilities often need to read or write object properties safely without losing type information.

State management

In React, Vue, or other UI code, this pattern is useful when updating state by field name while keeping compile-time type safety.

In real projects, developers commonly combine indexed access types with a few patterns.

Generic property setters

function setProp<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
  obj[key] = value;
}

This works for many object types, not just JWT.

Validation before assignment

Sometimes the value is unknown at first, then checked before storing:

function updateExpire(value: unknown) {
  if (!(value instanceof Date)) {
    throw new Error('expire must be a Date');
  }

  obj.expire = value;
}

Static types help at compile time, and runtime validation helps when data comes from outside TypeScript.

Guard clauses

Developers often split logic for readability:

function print(key: keyof JWT) {
  if (key === ) {
    .(obj[key].());
    ;
  }

  .(obj[key].());
}

Using any

function onChange(key: keyof JWT, value: any) {
  obj[key] = value;
}

Why it is a problem

any disables type safety. TypeScript will allow wrong assignments like:

onChange('expire', 1337);

Fix

Use a generic and indexed access type:

function onChange<K extends keyof JWT>(key: K, value: JWT[K]) {
  obj[key] = value;
}

Using JWT[keyof JWT] for the value

function onChange(key: keyof JWT, value: JWT[keyof JWT]) {
  obj[key] = value;
}

Why it is wrong here

becomes:

Related type patterns

// Keys of an object type
keyof T

// Value type of one property
T['name']

// Value type for a generic key
T[K]

// Generic key/value function
function setProp<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
  obj[key] = value;
}

// Union of all value types
type ValueOf<T> = T[keyof T];

Rules to remember

• keyof T gives property names
• T[K] gives the value type for key K
• Use K extends keyof T to restrict valid keys
• Use value: T[K] when the value type depends on the key
• T[keyof T] is a union of all value types, not the exact value for one key
• Avoid any if you want compile-time safety

Example

function onChange<K extends keyof JWT>(key: K, value: [K]) {
  obj[key] = value;
}

Is there a built-in valueof in TypeScript?

No. The usual equivalent idea is an indexed access type such as T[K] or T[keyof T].

How do I get the type of a property by key in TypeScript?

Use indexed access syntax:

type NameType = User['name'];

How do I make one function parameter depend on another in TypeScript?

Use a generic key parameter:

function f<K extends keyof T>(key: K, value: T[K]) {}

What is the difference between T[K] and T[keyof T]?

T[K] is the value type for one specific key. T[keyof T] is the union of all property value types.

Why does any cause problems here?

Because any disables type checking, so TypeScript cannot stop invalid assignments like putting a number into a property.

• keyof — gets the valid property names of an object type
• indexed access types — lets you read a property value type with syntax like T[K]
• generics — allows the key and value types to stay linked in a function
• union types — important for understanding T[keyof T]
• type inference — TypeScript infers K from the key argument
• mapped types — often built using keyof and indexed access types
• unknown vs any — useful when handling external data safely
• discriminated unions — another way to link values and behavior based on a field