Inline style shorthand notation for a JSX-based framework in TypeScript
14:24 28 Nov 2025

I'd like to have JSX attributes in TypeScript like s:background="red" as a shorthand to style={background: "red"}.

The AI gave me this:

type StyleSheetProperties = {
    background: string,
};
type StyleSheetPropertyKeys = keyof StyleSheetProperties;

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      [K in `s:${StyleSheetPropertyKeys}`]?: string | number;
    }
  }
}

However the line content:

[K in `s:${StyleSheetPropertyKeys}`]

emits the error:

A mapped type may not declare properties or methods. (7061)

typescript jsx