How to add dynamic variable name in typescript?

Question

I am having two files,

App.tsx:

const data = {games:{type: [], sport: [], category: []}}

The above is the dynamic data I receive .

I am in the need to set the above keyof typeof data.games to the type valid like,

type Valid = keyof typeof data.games

If it is same file then no issues to assign like the above.

But I have type file separately like,

Apptype.ts

// How can I make the below keyof typeof [dynamicName] ?
export type Valid = keyof typeof data.games;

export interface IOption {
  id: number;
  value: string;
  valid: Record<Valid, number[]>;
}

In the above file data.games throw error because there will not be such variable name in this file.

So how can I assign the dynamic value to keyof typeof [.....]?

Working Example:

This just looks like a scoping issue. Either export data from where it's defined or define Valid in the same module and export that — Phil
– Phil, Commented Nov 29, 2022 at 4:14
@Phil, Thanks for your comment. Could you please add solution on the same as I am new to typescript? — Hello World
– Hello World, Commented Nov 29, 2022 at 4:40

Lin Du · Accepted Answer · 2022-11-29 04:52:27Z

1

You can export and import the data from the App.tsx. And import types from Apptype.ts using

App.tsx:

import type { IOption, IState } from "./Apptype";
// ...

Apptype.ts

import { data } from "./App";

export interface IState {
  [key: string]: number;
}

export type Valid = keyof typeof data.games;

export interface IOption {
  id: number;
  value: string;
  valid: Record<Valid, number[]>;
}

codesandbox

answered Nov 29, 2022 at 4:52

Lin Du

104k138 gold badges340 silver badges575 bronze badges

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

Collectives™ on Stack Overflow

How to add dynamic variable name in typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related