typescript 如何使用type声明一个对象中的所有key字符串

Question

现在的情况是: 有一个config对象, 用来定义动画的, 对象的结构为key是动画名字符串, value也是一个对象, 里面的 keyframes 和 options 是animate方法的参数
我想要得到一个声明config对象中所有key的类型
像 type TAnimates = "动画1" | "动画2" 这样
我试了下面的方法

const configs: {
  // 类型定义
  [animateName: string]: {
    // keyframes 和 options的类型 是 htmlElement的animate方法中的参数类型
    keyframes: Keyframe[] | PropertyIndexedKeyframes
    options: number | KeyframeAnimationOptions
  }
} = {
  'fade-in': {
    keyframes: [
      { opacity: 0, transform: 'scale(0)' },
      { opacity: 1, transform: 'scale(1)' },
    ],
    options: {
      duration: 100,
    },
  },
  'fade-out': {
    //...
  },
}
type TAnimates = keyof typeof configs
// type TAnimates = string | number

如果把对象的类型定义删了

const configs= {
  'fade-in': {
    // ...
  },
  'fade-out': {
    //...
  },
}
type TAnimates = keyof typeof configs
// type TAnimates = "fade-in" | "fade-out"

删了对象的类型声明之后, TAnimates类型得到了我想要的效果, 但是对象中的keyframes 和 options就没了类型检查了.
怎样在声明了对象类型的情况下, 使用type或者其他的方法声明对象的key字符串

0709补充:
用了老哥提供的方法

type GetKey<T> = {
  [key in keyof T]: keyof T[key] extends never ? T[key] : GetKey<T[key]>
}
type TAnimates = GetKey<typeof configs>
/*
效果是这样的
type TAnimates = {
    "fade-in": GetKey<{
        keyframes: Keyframe[] | PropertyIndexedKeyframes;
        options: number | KeyframeAnimationOptions;
    }>;
    "fade-out": GetKey<{
        keyframes: Keyframe[] | PropertyIndexedKeyframes;
        options: number | KeyframeAnimationOptions;
    }>;
}
*/

看起来是得到了对象完整的类型, 只要第一层的key的话, 改为

type TAnimates = keyof GetKey<typeof configs>
// 又变回 type TAnimates = string 了

还是 不是想要的效果, 得到 "fade-in" | "fade-out"
好像是因为我声明的key类型是任意的字符串导致的
目前我改为使用用一个字符串数组 as const来限制对象的key了

const animateName = ['fade-in', 'fade-out'] as const

export type AnimateType = typeof animateName[number]
// type AnimateType = "fade-in" | "fade-out"         << -----

const configs: Record<
  AnimateType,
  {
    keyframes: Keyframe[] | PropertyIndexedKeyframes
    options: number | KeyframeAnimationOptions
  }
> = {
  'fade-in': {
    // ...
  },
  'fade-out': {
    //...
  },
}

麻烦的一点就是要添加其他动画的时候,要先在数组里加上名字,再在对象里添加..

Answer 1

加个函数就行了，自动推断传入key

type KeyFrameOptions = {
  // keyframes 和 options的类型 是 htmlElement的animate方法中的参数类型
  keyframes: Keyframe[] | PropertyIndexedKeyframes
  options: number | KeyframeAnimationOptions
}

function defineConfig<T extends string>(config: Record<T, KeyFrameOptions>) {
  return config
}

const configs = defineConfig({
'fade-in': {
  keyframes: [
    { opacity: 0, transform: 'scale(0)' },
    { opacity: 1, transform: 'scale(1)' },
  ],
  options: {
    duration: 100,
  },
},
'fade-out': {
  keyframes: [
    { opacity: 1, transform: 'scale(1)' },
  ],
  options: {
    duration: 100,
  }
},
})


type all = keyof typeof configs;

Answer 2

如果没理解错问题的话 试试下面这个

type GetKey<T> = {
    [key in keyof T] : keyof T[key] extends never? T[key] : GetKey<T[key]>
}
type TAnimates = GetKey<typeof configs>

Answer 3

这个问题主要是类型推论，我们知道类型推论不止可以从上至下，也可以是从下至上的。

TypeScript类型推论也可能按照相反的方向进行。 这被叫做“按上下文归类”

但是

如果上下文类型表达式包含了明确的类型信息，上下文的类型被忽略。

所以如果你给configs对象的key设定了明确的类型信息，类型推断时就会忽略上下文的类型。

所以这个问题可以翻译为：能否声明一个对象，不指定其key的类型，只指定其value的类型？

答案是否定的。

但我们还是可以变通一下
1，像你题目更新的那样，提前声明key的类型。缺点：要写两遍key
2，使用类型断言限制value的类型。缺点：每个value都要写as

Answer 4

是要这个吗？

type KeyFrameOptions = {
    // keyframes 和 options的类型 是 htmlElement的animate方法中的参数类型
    keyframes: Keyframe[] | PropertyIndexedKeyframes
    options: number | KeyframeAnimationOptions
  }
}
const configs: Record<string, KeyFrameOptions> = {
  'fade-in': {
    keyframes: [
      { opacity: 0, transform: 'scale(0)' },
      { opacity: 1, transform: 'scale(1)' },
    ],
    options: {
      duration: 100,
    },
  },
  'fade-out': {
    //...
  },
};

Answer 5

就是上面兄弟说的,我和你碰到了一样的问题,我自己解决了一下,就是每次你定义对象的时候写个断言

 const configs = {
  'fade-in': <这里写类型>{
    keyframes: [],
  }
....
} as const