如何基于类generic定义泛型接口

Question

I'm trying to create a new augmented, generic interface based on another interface. The base interface defines the properties the object is going to have ( root ). The augmented type should have the same properties, but instead of any as a value, I get a more complex object. Note, that the interface IStyleObj is used inside a generic class, where the generic type is passed to the generic interface.

In my experiments I get the these errors, and I don't know how to fix them:

"IStyleObj<T>"
'T' is declared but its value is never read.ts(6133)

"Key in keyof"
A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)
Member '[K in keyof' implicitly has an 'any' type.ts(7008)

"... T"
Cannot find name 'T'.ts(2304)

"class: any"
'any' only refers to a type, but is being used as a value here.ts(2693)

This is my current code:

// Child.ts
interface IStyles {
  root?: any
}

// Base.ts
interface IStyleObj<T> {
  [K in keyof T]: {
    class: any
    style: any
  }
}

export default class Base<IStyles = {}> {
  get styles (): IStyleObj<IStyles> {
    // ...
  }
}

Answer 1

Interfaces can't be mapped types, only type aliases can. This will work:

// Child.ts
interface IStyles {
  root?: any
}

// Base.ts
type IStyleObj<T> = {
  [K in keyof T]: {
    class: any
    style: any
  }
}

export default class Base<IStyles = {}> {
  get styles (): IStyleObj<IStyles> {
    return null!
  }
}

Playground Link