Как получить автозаполнение для ключей объекта в TypeScript

Question

У меня сейчас есть этот тип

export type Styles = Record<string, Style>

Я использую его вот так

// Button.styles.ts
const styles: Styles = {
  primary: ({ colors }) => ({
    backgroundColor: colors.primary,
  }),
  secondary: ({ colors }) => ({
    backgroundColor: colors.secondary,
  }),
}

Но когда я импортирую его в другой файл, я не получаю автозаполнение

import styles from './Button.styles.ts'

// styles.
// I get nothing if I start typing this, but I want to see a list of "primary, secondary"

В основном, я хочу вывести ключи этого, чтобы я получал автозаполнение при использовании объекта

Answer 1

Я думаю, что излишне комментировать тип. Вы можете удалить тип Styles, это будет вывод .

Если вы все еще хотите аннотировать, тип должен быть:

// Button.styles.ts

type StyleParams = {
  colors: {
    primary: string,
  },
  secondary: string,
};

type Styles = {
  primary(params: StyleParams): string,
  secondary(params: StyleParams): string,
};

const styles: Styles = {
  primary: ({ colors }) => ({
    backgroundColor: colors.primary,
  }),
  secondary: ({ colors }) => ({
    backgroundColor: colors.secondary,
  }),
};