TypeScript type for value of key in object

Question

I'm trying to define custom typings for a navigation library using TypeScript, and I haven't wrapped my head around creating a navigate function that takes the Screen's name as a first argument, and the Screen's properties as a second argument while still being type safe.

I'm trying to:

Safely type the screen name (keyof Stack) as a first argument
Safely encapsulate my two navigation stacks (navigate<LoginStack>('HomeScreen') should never work, only the screens from LoginStack should be possible)
Use the correct arguments for the corresponding screen name (keyof Stack) as the second argument

My current approach:

ScreenDefinitions.ts:

export interface LoginStackScreens {
    LoginScreen: BaseProps & { isHeadless?: boolean };
    ForgotPasswordScreen: BaseProps & { email: string };
}
export interface HomeStackScreens {
    HomeScreen: BaseProps & { isHeadless?: boolean };
    SavedScreen: BaseProps;
    ChatsListScreen: BaseProps;
    MyProfileScreen: BaseProps;
    PostDetailsScreen: BaseProps & {
        post: Post;
    };
    // ... some more
}

Navigation.ts:

type ValueOf<T> = T[keyof T];
function navigate<Stack extends HomeStackScreens | LoginStackScreens>(screenName: keyof Stack, props: ValueOf<Stack>): void {
    // Navigation logic
}

navigate<HomeStackScreens>('HomeScreen', {});

While I achieved points 1. and 2., the second parameter (arguments) aren't safely typed as they contain all values from the HomeStackScreens stack:

Whereas I only want to have BaseProps & { isHeadless?: boolean } in this case (See HomeStackScreens definition)

Jacob · Accepted Answer · 2020-08-19 13:01:26Z

8

Try this!

function navigate<Stack extends {}>(
  screenName: keyof Stack,
  props: Stack[typeof screenName]
) {
  // Implementation
}

Example,

type SomeStack = {
  someScreen: {
    test: string
  }
}

navigate<SomeStack>('someScreen', {
  test: 5 // Fails - should be a string!
})

answered Aug 19, 2020 at 13:01

Jacob

1,3951 gold badge15 silver badges28 bronze badges

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

8 Comments

mrousavy Over a year ago

This doesn't work if I define the NavigationProp interface with it's functions, see: imgur.com/a/i9Ck3pv

Jacob Over a year ago

It looks like TypeScript is fine with it, and ESLint is getting confused. Maybe just turn off ESLint for that line!

mrousavy Over a year ago

You're right, only ESLint's fault. But the typing for the arguments still don't work, somehow the types are resolved as every argument for every route in the Stack OR (|) unknown. See: imgur.com/a/LorEtuu

Jacob Over a year ago

Try this - typescriptlang.org/play?#code/…

Jacob Over a year ago

typescriptlang.org/play?#code/…

|

Collectives™ on Stack Overflow

TypeScript type for value of key in object

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related