打字稿：定義對象類型而不定義鍵的類型以獲取 keyof

Question

在這里，我只想定義對象值的類型。 為了獲取鍵的類型。 有沒有辦法在不為每個值定義類型的情況下獲得。

const sizes: Record<string, CSSObject>= {
  md: {
    padding: [10, 24],
    fontSize: 'medium',
  },
  xs: {
    padding: [6, 12],
    fontSize: 'small',
  },
  sm: {
    padding: [8, 16],
    fontSize: 'small',
  },
  lg: {
    padding: [14, 30],
    fontSize: 'large',
  },
} as const;

// Expecting 'md' | 'xs' | 'sm' | 'lg'
type Sizes = keyof typeof sizes;

// But it is string

Answer 1

據我了解，您想推斷鍵'md' | 'xs' | 'sm' | 'lg' 'md' | 'xs' | 'sm' | 'lg' 'md' | 'xs' | 'sm' | 'lg'來自對象的實際屬性，但您還希望類型檢查器確保屬性的值是CSSObject類型。

問題是您需要在對象文字上使用類型注釋來檢查值是否為CSSObject ； 但是如果您使用類型注釋，那么keyof ...將從注釋類型中獲取鍵，而不是對象本身。

解決這個問題的方法是使用通用輔助函數，以便在指定值類型時推斷記錄的鍵類型：

function helper<K extends PropertyKey>(obj: Record<K, CSSObject>): Record<K, CSSObject> {
    return obj;
}

const sizes = helper({
  md: {
    padding: [10, 24],
    fontSize: 'medium',
  },
  // ...
});

type Sizes = keyof typeof sizes;
// 'md' | 'xs' | 'sm' | 'lg'

游樂場鏈接

Answer 2

只是想添加到@kaya3 非常有用的答案：

這里的helper函數專門用於CSSObject 。 我需要在具有不同值類型的多個對象上使用這個助手，所以我編寫了一個版本，可以讓你傳入任何類型：

function constrainValuesAndInferKeys<V>() {
    return function <K extends PropertyKey>(obj: Record<K, V>) {
        return obj;
    }
}

const sizes = constrainValuesAndInferKeys<CSSProperties>()({
  md: {
    padding: [10, 24],
    fontSize: 'medium',
  },
  // ...
});

type Sizes = keyof typeof sizes;
// 'md' | 'xs' | 'sm' | 'lg'

缺點是您必須在constrainValuesAndInferKeys<CSSProperties>()({中添加額外的() 。