无法让 babel 在 typescript 上使用插值编译字符串文字类型

Question

I have a react application using typescript and I need to create types using literal string types with interpolation:

class ExampleClass {
    product_id!: number;
    product_name!: string;
}

export type HeaderClassNames<N extends string> = `theader_${Lowercase<N>}`;

type HeaderClasses = HeaderClassNames<keyof ExampleClass>;

"HeaderClasses" produces:

type HeaderClasses = "theader_product_id" | "theader_product_name"

This works fine by the tsc, but when babel transpiles, it doesn't recognize the template:

Unexpected token (8:72)

   6 | 
   7 | export type TableHeaderConfig<Keys extends string> = Record<Keys, TableHeaderColumn>;
>  8 | export type HeaderClassNames<N extends string> = `theader_${Lowercase<N>}`;
     |                                                                         ^
   9 | export type ColumnClassNames<N extends string> = `column_${Lowercase<N>}`;
  10 | 

Babel said it started supporting this feature, but I install and reinstall babel/core and even tried babel/parser manually (where the commit was made) but nothing changes.

Appreciate your help.

Answer 1

After a lot of digging, I found out that the babel version being used was the one at the react-app-rewired and react-scripts packages. After some hours your head just doesn't work anymore.

I updated them and everything worked.

Thanks to everyone that spend a minute trying to help.