Default Export extend Record<string, string>

[nperez0111]

Expected Behavior

I have a function that takes in a default export from a CSS Module but I want there to be a meaningful type for the parameter.

function foo( bar: Record<string, string> ): string[] {
	return Object.keys(bar);
}

Current Behavior

Export default looks like:

export interface Styles {
  'classname--first': string;
  'classname--second': string;
}

export type ClassNames = keyof Styles;

declare const styles: Styles;

export default styles;

Possible Solution

Export default could look like:

export interface Styles extends Record<string, string> {
  'classname--first': string;
  'classname--second': string;
}

export type ClassNames = keyof Styles;

declare const styles: Styles;

export default styles;

Context

If you have any suggestions on how to have a parameter that is meaningful for my function that would be really helpful but I think extending Record<string, string> allows for a lot.

Your Environment

• Version used: Most Recent
• Operating System and versions: macOS
• Link to your project: Internal use

[skovy]

Thanks for submitting the issue with all the details. I believe the recommendation would defeat the purpose of this package because it would then allow usage of any class (string) on the styles object. For example, this is now valid:

export interface Styles extends Record<string, string> {
  'classname--first': string;
  'classname--second': string;
}

export type ClassNames = keyof Styles;

const styles: Styles = {} as Styles;

styles.notARealClass;

However, I do see the issue with the code sample you provided. It looks possibly related to this issue: microsoft/TypeScript#15300. I believe if we updated to use a type instead of an interface this may fix your issue. I think we would have to consider this a breaking change because there could be subtle differences in how people are using the library. Would also love to know if there are other ways to handle your case! 🤔

type Styles = {
  'classname--first': string;
  'classname--second': string;
}

const styles: Styles = {} as Styles;

function foo( bar: Record<string, string> ): string[] {
  return Object.keys(bar);
}

foo(styles) // Valid with type Styles = {} but not interface Styles {}`

[nperez0111]

I agree completely with your recommendation, it does seem that exporting as a type instead of an interface would resolve my issue. I’ll be able to make a PR for the update and any relevant documentation tomorrow.

Thank you for the support.

[skovy]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀