Is there a way to derive a type from a string value?

[shut quiver]

I'm looking for a solution to a rather simple problem, but my TypeScript knowledge isn't quite there yet apparently :/ Can any of you wizards help me figure this out so that the type corresponds to the string value?

See comments in the code:

// Define Subtabs per Tab
export const spotifySubTabs = ["recently_played", "queue", "top_tracks"] as const;
export const trendingSubTabs = [] as const;
export const historySubTabs = ["purchases", "searches"] as const;
export const wishlistSubTabs = [] as const;

type SpotifySubTab = (typeof spotifySubTabs)[number];
type TrendingSubTab = (typeof trendingSubTabs)[number];
type HistorySubTab = (typeof historySubTabs)[number];
type WishlistSubTab = (typeof wishlistSubTabs)[number];
type SubTab = SpotifySubTab | TrendingSubTab | HistorySubTab | WishlistSubTab;

interface SearchTabContentProps {
  activeTab: Tab;
}

const SearchTabContent = ({ activeTab }: SearchTabContentProps) => {

  // Now, instead of <SubTab> I would like the type to be dependent on the activeTab value, i.e. if it's "spotify" the Type should be <SpotifySubTab>
  const [activeSubTab, setActiveSubTab] = useState<SubTab>();

  // So that this becomes impossible
  if (activeTab === "spotify") setActiveSubTab("purchases");

[past fractal]

alvarny#0

Playground Link

Preview:ts // Define Subtabs per Tab export const spotifySubTabs = ["recently_played", "queue", "top_tracks"] as const; export const trendingSubTabs = [] as const; export const historySubTabs = ["purchases", "searches"] as const; export const wishlistSubTabs = [] as const; ...

You can choose specific lines to embed by selecting them before copying the link.

[civic ginkgo]

I can't think of a way to do exactly what you asked for, but what about something like this?

[past fractal]

smichel17#0

Playground Link

Preview:```ts
...
interface SearchTabContentProps {
activeTab: Tab
}

type Tab =
| {
tab: "spotify"
subTab: SpotifySubTab
}
| {
tab: "trending"
subTab: TrendingSubTab
}
| {
tab: "history"
subTab: HistorySubTab
}

const SearchTabContent = ({
activeTab,
}: SearchTabContentProps) => {
// Now, instead of <SubTab> I would like the type to be dependent on the activeTab value, i.e. if it's "spotify" the Type should be <SpotifySubTab>
const [activeSubTab, setActiveSubTab] =
useState<SubTab>("queue")

// So that t
...```

[shut quiver]

Hey thanks for the input! I was also thinking about discriminated unions but I figured there may be a better way, but maybe there also just isn't

[manic bay]

Hi @civic ginkgo I changed one thing about your playground (instead of setting subTab to a string "purchases" I set it to SpotifySubTab). I expected this to work and it doesn't https://www.typescriptlang.org/play/?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtX2QGcQBlDKDEAHgBUA+ACi1S2ygjIpAC54b4APvAYMAlPAC8dPqNG8A2jQA0w1CADunSrxrip8AG44swALoBuAFCWA9DfgAREImYISyAEbkPheAAcQGD4oD0sQAA8-HBgMeDA8QljCKOxEAE93DxoQ3wl4eQAiODAQVAwINIB9P2g0kGAClQKAR2QQNsb4AowcP0qMGCgwAGtCAtN4KF941ESrCKiYuITYgdLgZgBzTOyfSXyJqeXZjHnI6NiZxPgACyxE6IzPXdz8gr9kGDAbqZAxpuIsG+f3Gk2mKzOi0uK3g6nuNwg9wwOxy+3kh3BJyslgwaQC8BIKSw6RRHn2DFxARwiHgyRwqSeWRyonkqGQAFsPIELDi8QgaHBUBtUNtniFyZSQNT4GshVtSYQWWzOdyrJL4AAJJGPUkSvnSu4PGCMl5KjlcmA89UAdXhiMSuryFP1NLhhARSIVZpVlrVfIJYrJeUJ9OJJvFQgF63lgcEmu1xt1Qlt7vtyMD2MszEoMEQQzcICBN12AGE8JQygAFGC9XwAb0s8EmmCwBhAux0ISsAF9rOrdpJG3GG02m95eAByOkMidWUe0wO8EMM0lz+C9ptCEej8fwCey4WbWdDpuERd8QWH1dDjfDk8ykKTw09Y3H+dnpkeXhao3hjxr3tLCuWISELL5ixCMsylKWInTrZtsDbAduyXMDvlLcsYOrWs9GkBshzseAADkcHUFRmESQtgHgaUqFJaQAElYRwZAIGoxFhgQDAbi4-0engLl4FAAIhRgmj8G4hAhkQ9txQMdg2nIgA6EAlPgYl1IwKcumnMMChlHi+H9d0WLYgSEDookSUDOgh2A-JpNbUhAxUYgMAAQRbNtSQmPIiFIchKDomyGAnVp2hACdRGxJtCJIHADIoAz7nM+J2T+dT2SiQhCCwDwIBAIcNIYRykJCJTvEkCQ8gKXT0gKcRt1PEAPK85zPwYeDd1qqy0k6D8OwJXrdW7aKb0sbsgA

[past fractal]

@manic bay Here's a shortened URL of your playground link! You can remove the full link from your message.

kingoberon.#0

Playground Link

Preview:```ts
declare function useState<T>(
initialState: T | (() => T)
): [T, (newState: T) => void]

// Define Subtabs per Tab
export const spotifySubTabs = [
"recently_played",
"queue",
"top_tracks",
] as const
export const trendingSubTabs = [] as const
export const historySubTabs = [
"purchases",
"searches",
] as const
...```

You can choose specific lines to embed by selecting them before copying the link.

[manic bay]

can you explain why? @civic ginkgo Thanks

[shut quiver]

Well because SpotifySubTab is a Type and you're trying to use it as a value here. The possible values for a SpotifySubTab would be "queue", "recently_played" or "top_tracks"

[shut quiver]

Here would be a working example: