i18next: How to avoid TS6133-error 'foo' is declared but its value is never read?

Question

[Solved] I was wondering how I can avoid the TS6133-error: 'var' is declared but its value is never read in connection with i18next? Basically I have a function labelForTeaserStyle(style: TeaserStyle) that is read in this line of code:

<Typography variant="subtitle1" color="gray">
    Style: {labelForTeaserStyle(style)}
</Typography>

function labelForTeaserStyle(style: TeaserStyle) {
  switch (style) {
    case TeaserStyle.Default:
      return 'Default'

    case TeaserStyle.Light:
      return 'Light'

    case TeaserStyle.Text:
      return 'Text'
  }

However, when applying i18next to this line of code it would throw me the TS6133-error 'labelForTeaserStyle' is declared but its value is never read.

I have read about using /* tslint:disable:no-unused-variable */ just before the line which causes the error but that doesn't help. Another suggestion that I've read is to deactivate noUnusedLocals in tsconfig.json, however this is not an option for me since I want to keep this option activated.

The question for me is now whether I somehow can embed i18next-code so that the compiler still recognises labelForTeaserStyle() as being used/read?

Code with i18next:

<Typography variant="subtitle1" color="gray">
    {t('styleInterpolated', {labelForTeaserStyle(style)})}
</Typography>

Keys:

"styleInterpolated": "Style: {{function}}"

Answer 1

Solution

I found the answer to my question. The thing is I'm having ESLint and TSLint at the same time implemented and therefore using // @ts-ignore alone wouldn't solve the problem. The solution was to also add /* eslint-disable */. Here's the working code:

/* eslint-disable */
// @ts-ignore
function labelForTeaserStyle(style: TeaserStyle) {
  (...)
}