how to initialize a typescript interface with a variable key

Question

See the following code:

function createObj(key: string, value:unknown) {
  const obj = {};
  obj[key] = value;
  return obj;
}

gives error:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'.

I know I could write it as

  const obj = {} as Record<string, unknown>;

but I wonder if I could initialize the object in one statement, like

  const obj = {
    key: value
  };

which does not work because key is a string literal here and not the value of variable key.

const obj: Record<string, unknown> = { [key]: value }

欧阳斌
– 欧阳斌

2023-01-09 08:14:48 +00:00
Commented Jan 9, 2023 at 8:14 — 欧阳斌
– 欧阳斌, Commented Jan 9, 2023 at 8:14

bzeaman · Accepted Answer · 2023-01-09 07:46:14Z

1

One can use computed property names (referenced by another answer) as follows:

function createObj(key: string, value: unknown) {
  return {
    [key]: value,
  };
}

answered Jan 9, 2023 at 7:46

bzeaman

1,13011 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

captain-yossarian from Ukraine · Accepted Answer · 2023-01-09 08:23:13Z

WHen you create literal empty object on the fly, TS forbids you to add any properties to it, because according to inference, it should be empty. I am talking about this line:

  const obj = {};

Hence, in order to make it in TS way, you need to infer provided arguments:


function createObj<Key extends PropertyKey, Value>(key: Key, value: Value): Record<Key, Value>
function createObj<Key extends PropertyKey, Value>(key: Key, value: Value) {
  const obj: Partial<Record<Key, Value>> = {};
  obj[key] = value;
  return obj;
}

const result = createObj('a', 1)
result.a // number

Key - represents infered type of key argument

Value - represents infered type of value argument

I used Partial<Record<Key, Value>> type for obj. For Partial and Record see docs.

Partial - all values are optional

Record - represents a hash map data structure (regular object in javascript)

As you might have noticed, result.a infered as a number.

We can do better. Just add type Json:

type Json =
  | null
  | undefined
  | string
  | number
  | Array<Json>
  | { [prop: string]: Json }

function createObj<Key extends PropertyKey, Value>(key: Key, value: Value): Record<Key, Value>
function createObj<Key extends PropertyKey, Value>(key: Key, value: Value) {
  const obj: Partial<Record<Key, Value>> = {};
  obj[key] = value;
  return obj;
}

const result = createObj('a', 1)
result.a // 1

Now, result.a is 1

Collectives™ on Stack Overflow

how to initialize a typescript interface with a variable key

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related