根据列表中对象的属性定义 Typescript 类型

Question

Say I have a list of objects like:

const TABS = [
  {
        name: 'Home',
        // other properties
  },
  {
        name: 'Profile',
        // other properties
  }
];

How can I define type Tab , which is a type for the 'name' field of each object in the list? Basically the equivalent to

type Tab = 'Home' | 'Profile';

in the case above (but without the need to repeat "Home" and "Profile" in both definitions).

Answer 1

This is possible as long as the value of TABS is known at compile time and you prevent the compiler from widening its type to something like Array<{name: string}> . You want the compiler to remember the specific string literal types of the values you put into the name properties, and not just treat them as string s. The easiest way to do this is to use a const assertion on the TABS array literal at creation time:

const TABS = [
  {
    name: 'Home',
  },
  {
    name: 'Profile',
  }
] as const; // <-- need this 

Now the compiler knows that TABS is a pair of objects and that the first one has a name property of the string literal type "Home" , and that the second one has a name property of the string literal type "Profile" .

At this point you can just use lookup types to get the name property of the elements at the numeric ( number ) indices of the type of TABS :

type Tab = (typeof TABS)[number]["name"];
// type Tab = "Home" | "Profile"

Playground link to code