Replace i18next property type in React for language setting

We have decided to implement multilanguage support in our app and encountered an issue with function execution.

const someFunction = (lang: string, url: string) => any

If we mistakenly execute the function like this:

someFunction('/some/url', 'pl')

Instead of

someFunction('pl', '/some/url')

This can cause problems as TypeScript does not show any errors since both parameters are strings.

To address this, we changed the function declaration to use an enum for language:

enum Language {
PL,
ENG,
ES
}

const someFunction = (lang: Language, url: string) => any

Now the function can be executed correctly like this:

someFunction(Language.PL, '/some/url')

Despite resolving this issue, we encountered a complication with i18next.

The WithTranslation interface specifies the language property as a string:

i18n: {
language: string
}

Similarly, the useTranslation hook returns the same i18n object with the language as a string.

I have tried various approaches but my TypeScript skills are limited, and I am unsure how to change the i18n property to use the Language enum instead of a regular string.

If anyone has a solution to this problem, I am willing to make a donation to charity as a token of appreciation. Thank you!

Answer №1

Consider converting your enum into a type for better functionality:

type Language = "pl" | "eng" | "es";

By using a type, you can easily work with string properties as Language is essentially a union of strings.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

angular 2: how to reset select list values after submission

Issue I am encountering a problem where I am not utilizing a form, but rather using the Model values to populate a select list. Upon clicking the submit button, an API is called with the selected model value. However, after the submission, the select list ...

Tips for defining the type of a parameter in a Vue Component

Is it possible to define a type 'VueComponent' for a component parameter in TypeScript? function callback(component: VueComponent???){ // some code } ...

Angular application that features a material table created using *ngFor directive and displayedColumns defined as an array

I am trying to create a table that displays columns with the format {key: string, display: string} where 'display' is the header and 'key' is used to display the value. <ng-container *ngFor="let col of displayedColumns"> ...

The compatibility issue between Bootstrap and Angular 2 is causing some challenges

Hey there, I recently enrolled in an Angular 2 course on udemy and everything was running smoothly until I encountered an issue while trying to install bootstrap. I followed the installation steps diligently, but whenever I attempt to add any bootstrap el ...

Tips for preventing keyboard events from being inherited by all pages in the stack in Ionic framework

In my Ionic 3 app, I have a specific page called Page1 that requires customized keyboard handling. Here is how I implemented it on Page1: @Component({ ... host: { '(document:keydown)': 'handleKeyboardEvents($event)' } }) expo ...

I am currently struggling with a Typescript issue that I have consulted with several individuals about. While many have found a solution by upgrading their version, unfortunately, it

Error message located in D:/.../../node_modules/@reduxjs/toolkit/dist/configureStore.d.ts TypeScript error in D:/.../.../node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,13): Expecting '=', TS1005 1 | import type { Reducer, ReducersMapO ...

Is it possible for a voiceover artist to initiate API requests?

As I work on the registration feature of my application, I am faced with the requirement that email addresses must be unique in the database. Since I am responsible for the front-end development, I am considering creating a Value Object (VO) that can make ...

Vue composable yields a string value

I am currently using a Vue composable method that looks like this: import { ref } from 'vue'; const useCalculator = (num1: number, num2: number, operation: string) => { const result = ref(0); switch (operation) { case 'add& ...

Angular's mechanism for detecting changes in a callback function for updates

I have come across a puzzling scenario regarding a basic issue. The situation involves a simple component with a boolean property that is displayed in the template of the component. When I update this property within a callback function, the property is up ...

Error occurs in Typescript when attempting to store data in a record using a pointer

When working with nodes and organizing them into a tree structure, I encounter an issue: This is the definition of the interface: interface IDataObj { children: IDataObj[], frontmatter : { type: string, title: string, path: string}, name: str ...

When incorporating pinia with Vue, encountering an error with the decorator that says "Error: Unable to access 'useCoreStore' before initialization" may happen

While implementing the vue-facing decorator in my current project, I encountered an issue with setting up pinia. The structure of my component resembles the example provided here: I have verified that decorators like @Setup are functioning correctly, ind ...

Errors caused by Typescript transpilation only manifest on the production server

During the process of updating my node version and dependencies on both machines, I came across an issue where building my app in production on one machine resulted in an error, while building it on my main machine did not. I found that the errors disappe ...

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

Unable to transmit props while employing Typescript in ReactJS

Attempting to pass props from components like AllProducts, MenProducts, etc. to the AddToCartButton component for reusability presents a challenge. When trying to pass props using: <AddToCartButton id={product.id} /> An error is encountered: Type & ...

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

Issue with TypeORM findOne method causing unexpected output

I am encountering an issue with my User Entity's Email Column when using TypeORM's findOne function. Instead of returning null for a non-existent email, it is returning the first entry in the User Entity. This behavior does not align with the doc ...

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

I'm in need of assistance and clarification regarding the error I encountered in my application... When I receive a JSON response from an API with some data that includes an array of products, I aim to extract these products (izdelki) from the array, ...

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Having an issue with a custom filter that is causing an error "ERROR TypeError: Cannot read property 'filter' of undefined". I need help fixing this as it's preventing anything from rendering on the page. Any suggestions on what changes I sh ...

Using ternary operator to set multiple variables in setState

Conditional Operator for Setting State in React I am wondering if there is a way to set the state with a variable that holds the correct state value using setState method. interface state { isfiltered: array<boolean> } this.setState({ ...

What is the best way to include the number 7 and other lower numbers in an array?

I am facing an issue where I need to retrieve all the months that have passed in 2020, such as January, February, March, April, May, June, July, and August, and store them in an array. After executing the code below, my variable 'month' returns ...