Ways to require semicolons in a Typescript interface

When declaring a TypeScript interface, both , (comma) and ; (semicolon) are considered valid syntax. For example, the following declarations are all valid:

export interface IUser {
  name: string;
  email: string;
  id: number;
}
export interface IUser {
  name: string,
  email: string,
  id: number
}

However, mixing , and ; within the same interface also produces valid results:

export interface IUser {
  name: string;
  email: string,
  id: number;
}

For consistency, it is preferred to enforce the use of ; in all occasions. But even with linting rules set for TypeScript, how can we ensure this standard is maintained?

.eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": 
          ...
      }
    ]
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
          ...
      ]
  }
}

Answer №1

To implement the rule in the .eslintrc file, you need to add the following code:

 "@typescript-eslint/member-delimiter-style": [
            "warn",
            {
                "multiline": {
                    "delimiter": "semi",
                    "requireLast": true
                },
                "singleline": {
                    "delimiter": "semi",
                    "requireLast": false
                }
            }
        ]

This rule allows three values (or two for singleline):

  • comma - separating each member with a comma (,).

  • semi - separating each member with a semicolon (;).

  • none - no delimiter between members.

Please note that for single line, "none" is not valid as omitting the delimiter would result in a syntax error in TypeScript.

The 'requireLast' option determines if the last member should have a delimiter:

  • true - the last member must have a delimiter.
  • false - the last member should not have a delimiter.

For more information, you can visit this link.

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

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

Storing information from a form into a database with the help of TypeORM on Angular 6

Utilizing TypeORM alongside Angular to store form data in the database has been successful. The connection configuration is correct, allowing for data storage from the backend. { "type": "mssql", "host": "***", ...

Guide to adding a loading spinner into your Angular project

I've been attempting to incorporate a spinner into my application, but unfortunately, the spinner isn't showing up. Despite checking the console and terminal for errors, there doesn't seem to be any indication as to why the spinner is not a ...

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

I have utilized the pie chart feature from the PRIMENG CHART PLUGIN My goal is to showcase the values within a pie chart Below, you can find my code for reference **Within app.component.html** <div style="display: block"> <p-chart type="pi ...

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

Ways to display a specific HTML element or tag depending on the given prop in VueJs

When working with Vue.js, it's important to remember that a <template> can only have one root element. But what should be done if you need to render different html elements based on a prop? For instance, let's say we have a <heading> ...

IE11 and how it handles Typescript and promises

Currently, I am utilizing Typescript version 2.4.2 along with Webpack for compilation purposes. Despite successful compilation, when running my code on IE11, an error 'Promise' is undefined arises. Below is a glimpse of my tsconfig: { "comp ...

Do const generics similar to Rust exist in TypeScript?

Within TypeScript, literals are considered types. By implementing const-generics, I would have the ability to utilize the value of the literal within the type it belongs to. For example: class PreciseCurrency<const EXCHANGE_RATE: number> { amount ...

Using JavaScript, what is the process for getting the value of a child node within Firebase

var ref = firebase.database().ref("games/" + gameId + "/patterns"); ref.on("child_changed", function(snapshot){ var pattern = snapshot.key; console.log(pattern); }); Currently, the code snippet above only logs the key. But how can I extract the player ...

Can you identify the type of component being passed in a Higher Order Component?

I am currently in the process of converting a protectedRoute HOC from Javascript to TypeScript while using AWS-Amplify. This higher-order component will serve as a way to secure routes that require authentication. If the user is not logged in, they will b ...

The Google Software Development Kit has encountered a 403 error, indicating that the user has exceeded their

Currently, I am working on integrating the Google Developer SDK into my project to leverage the Google Translate functionality. While everything works smoothly when making a request using my access token obtained from the Google Developer Console, I keep e ...

Guidelines for incorporating Context API in Material UI

Currently, I am encountering a TypeScript error while attempting to pass a property using the Context API within my components. Specifically, the error message reads: "Property 'value' does not exist on type 'String'" To provide conte ...

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

Different method for navigating in JavaScript

Currently, I'm in the process of developing a control panel using js and npm. I've run into an issue where I need to reset midway through the code without starting anew. Essentially, what I want is for the system to return to the menu after execu ...

Getting a jquery lightbox up and running

After experimenting with three different jquery plugins in an attempt to create a lightbox that appears when clicking on a link containing an image, I am currently testing out this one: . Despite adding the plugin source in the head and ensuring that the l ...

JS/Electron Insert items individually

Apologies if my explanation is unclear. I have a function (shown below) that parses a JSON file and creates a grid of 1550 items. How can I add them one by one instead of all at once? Loading all 1500 items together is taking too long. function addItem () ...

Rejuvenating your HTML content with AJAX over time

My HTML page contains links to charts that refresh every time the page is reloaded. A friend mentioned that AJAX can automatically refresh the chart at specified intervals without reloading the entire HTML page. I would appreciate any help with the HTML ...

Breaking on newline, excluding newline-space in JavaScript

I want to divide my string into an array based on new lines, excluding those that start with a space. ORGANIZER;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3758455056595e4d524577524f565a475b521954585a">[email prot ...

Show the chosen option when the textarea is no longer in focus

My form includes a text box and a button: <p><textarea rows="4" cols="30">Aliquam erat volutpat.</textarea></p> <p><input type="button" value="Submit"></p> When the user selects text in the textarea and then cl ...

Executing the command "node <app name>" does not result in any action

I am experiencing an issue with my bot app called "vgen.js". When I run the command "node vgen", the prompt/directory disappears and the cursor just blinks on the far left of the screen. I have been following instructions from a tutorial found here: https ...