Creating an interface in Dart: Step-by-step guide to defining interfaces similar to TypeScript

Coming from a Typescript background, I used to define object interfaces like this:

export interface Locale {
  login: {
    title: string;
    actions: {
      submit: string;
      forgot: string;
    }
  }
}

However, in Dart, interfaces are implicit and all classes act as interfaces.

Trying to replicate the TypeScript interface in Dart led me to write quite a bit of code:

class BaseLoginActionsLocale {
  final String submit;
  final String forgot;

  BaseLoginActionsLocale({this.submit, this.forgot});
}

class BaseLoginLocale {
  final String title;
  final BaseLoginActionsLocale actions;

  BaseLoginLocale({this.title, this.actions});
}

class BaseLocale {
  final BaseLoginLocale login;

  BaseLocale({this.login});
}

...

final BaseLocale enLocale = BaseLocale(
  login: BaseLoginLocale(
    title: 'Login',
    actions: BaseLoginActionsLocale(
      submit: 'Login',
      forgot: 'Forgot Password?'
    )
  )
);

However, it feels like there's too much boilerplate involved in this approach.

My question is, is there a more concise way to implement this interface in Dart?

Answer №1

If you want to pass all the values to BaseLocale, you can achieve it by implementing it in the following way:

class BaseLoginActionsLocale {
  final String submit;
  final String forgot;

  BaseLoginActionsLocale(this.submit, this.forgot);
}

class BaseLoginLocale {
  final String title;
  final BaseLoginActionsLocale actions;

  BaseLoginLocale(this.title, submit, forgot) : actions = new BaseLoginActionsLocale(submit, forgot);
}

class BaseLocale {
  final BaseLoginLocale login;

  BaseLocale(title, submit, forgot) : login = new BaseLoginLocale(title, submit, forgot);  
}

final BaseLocale enLocale = BaseLocale('Login', 'Login', 'Forgot Password?');

It's worth noting that this method places the burden on BaseLocale to understand the properties of its dependencies (and subsequently the implementation), which could be seen as an anti-pattern by certain individuals...

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

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

Guide to reference points, current one is constantly nonexistent

As I work on hosting multiple dynamic pages, each with its own function to call at a specific time, I encounter an issue where the current ref is always null. This poses a challenge when trying to access the reference for each page. export default class Qu ...

What could be causing the peculiar behavior I am experiencing when a child component attempts to display values from an object fetched in the parent component?

I am currently developing an Angular application and encountering a challenge when it comes to passing data from a parent component to a child component using the @Input decorator The parent component is named PatientDetailsComponent. Here is the TypeScri ...

The Rxjs `of` operator fails to emit a value when utilizing proxies

I ran into an issue with a basic unit test that utilizes Substitute.js (I also tried using TypeMoq mocks, but encountered the same behavior). My test simply tries to use the of operator to emit the mocked object. Surprisingly, without any additional opera ...

Correctly inputting MongoDB-specific collection methods which are currently defaulting to "any"

I'm facing an issue with typing Mongo collection method responses in my app. Specifically, I am having trouble finding a way to type the response of the deleteMany method. The documented response should look like this: { "acknowledged" : true, "delete ...

The Ngrx action fails to finish despite encountering an error during execution

An Issue with Action Completion Post-Error Within my application, I have implemented an action for deleting a user. Prior to deletion, the user is prompted on screen with a Dialog to input the administrator password. If the correct password is provided, t ...

The Microsoft EDGE browser is encountering a XHR HTTP404 error when trying to access a TypeScript

While debugging a Typescript web application in Visual Studio 2015 and using the Microsoft EDGE browser, an error is reported as follows: HTTP404: NOT FOUND - The server cannot locate anything that matches the requested URI (Uniform Resource Identifier). ...

When invoking a JavaScript method, the context variable 'this' is lost

I have developed a basic pointer to a method like this: export class SmbwaService { getExistingArsByLab(labId: number): Observable<SmwbaAr[]> { this.otherMethod(); } otherMethod(): void { } } let method: (x: number) => ...

the value of properrty becomes undefined upon loading

In my code, there exists an abstract class named DynamicGridClass, containing an optional property called showGlobalActions?: boolean?. This class serves as the blueprint for another component called MatDynamicGridComponent, which is a child component. Ins ...

What steps should I take to correctly identify the type in this specific situation?

Let's consider the function f, defined as follows: function f<T extends Fields = Fields>(props: Props<T>) { return null; } In this context, T represents a generic type that extends Fields. The concept of Fields is captured by the follow ...

What is the best way to ensure the website theme remains consistent after a refresh in React?

I am currently enhancing a weather forecast website by incorporating a theme toggler feature. The functionality has been successfully implemented, but I am facing an issue where the selected theme does not persist after reloading the page. Can someone he ...

Angular route fails to load the HTML file

In the process of developing a route within an Angular application, I have successfully implemented 3 routes. However, one particular route is giving me trouble. I have three folders that need to redirect HTML based on the option chosen. In Angular, I cre ...

Instantiate a child class within an abstract class by utilizing the keyword "this"

Within my code, there is an abstract class that uses new this(). Surprisingly, this action is not creating an instance of the abstract class itself but is generating an instance of the class that inherits from it. Even though this behavior is acceptable i ...

What are the best ways to increase the speed of eslint for projects containing a high volume of files

My git repository contains around 20GB of data, mainly consisting of JSON/CSV/YAML files. Additionally, there are scattered TypeScript/JavaScript (.ts/.js) files among the data files. As the repository has grown in size, I encounter a significant delay eve ...

:id Path replaces existing routes

My route configuration looks like this: const routes: Routes = [ { path: '', component: UserComponent, children: [ { path: '', component: LoginComponent }, { path: 'signup', component: SignupComponent } ]}, ...

I encountered an error when attempting to utilize a recursive type alias in a generic context

When attempting to use a recursive type alias in a generic function, TypeScript v3.7.5 throws the error message: Type instantiation is excessively deep and possibly infinite.(2589). type State = { head: { title: string; description: s ...

Strategies for addressing the issue of assigning "xx" to intrinsic attributes and props in React with TypeScript

I'm facing an issue where I am unable to locate 'count' and assign {count: number; title:string} type to IntrinsicAttributes in a React and TypeScript environment. There are two components involved, ParentComponent and ChildComponent. In t ...

explore and view all images within a directory

Hello, I am new to NextJS and encountering some issues. I have a folder in my public directory containing 30 images that I want to import all at once in the simplest way possible, without having to import each image individually by name. Here is the curren ...

Create a circle surrounding the latitude and longitude on a Bing Maps angular display

I successfully integrated the Bing map with Angular using the angular-map package, and now I want to draw a circle around a given latitude and longitude. To achieve this, I installed the following npm packages: npm install --save angular-maps npm ins ...

Problem with Clerk's authentication() functionality

Currently facing an issue with the Clerk auth() helper (auth() documentation) while working with react and next 13 (app router). When trying to access both userId and user from auth(), const { userId, user } = auth();, it seems that userId contains a val ...