Search code examples
typescripttypescript-typingstyping

TypeScript add kebab case types form actual camel case keys

this is an example input interface

export interface CssProperties {
    alignContent: number | string | null;
    alignItems: number | string | null;
    alignSelf: number | string | null;
    alignmentBaseline: number | string | null;
}

the result type should look like this.

-> adds kebab case types

export interface CssProperties {
    align-content: number | string | null;
    alignContent: number | string | null;
    align-items: number | string | null;
    alignItems: number | string | null;
    align-self: number | string | null;
    alignSelf: number | string | null;
    alignment-baseline: number | string | null;
    alignmentBaseline: number | string | null;
}
Solution

  • If you're just looking to get hyphenated CSS properties added to React.CSSProperties, you can do this via module augmentation.

    Create a file in your root called css.d.ts and use this content:

    declare module "csstype" {
  interface Properties extends PropertiesHyphen {}
}

    More documentation here: https://github.com/frenic/csstype#usage

    This works because react uses csstype under the hood for its CSSProperties type.