How to Use (and Disable) @TypeScript-ESLint/Ban-Types

It is good practice to enforce syntax consistency and protect against known issues by banning certain types in TypeScript. The @typescript-eslint/ban-types rule is enabled and bans some upper casing and a few types by default.

In this post we will explore how to add additional banned types to the rule, how to allow some or all of the default bans, and how to disable the @typescript-eslint/ban-types rule.

There are four ways to disable some or all banned types. In case you need it, here are the two quickest ways to disable the rule:

  • eslint-disable-next-line @typescript-eslint/ban-types – Disable ban-types for a line
  • "@typescript-eslint/ban-types": "off" – Add this to your .eslintrc.json to disable ban-types for a project

In the sections below I will give example code for configuring the rule in your .eslintrc.json file and discuss all methods of disabling @typescript-eslint/ban-types.

If you need to disable type checking in TypeScript, read this.

What TypeScript Types are Banned By Default?

Here is the current list of syntax banned by default:

  • String
  • Number
  • Boolean
  • Symbol

The rule simply states that you need to use all lower case, for example number instead of Number.

Here are the types banned by default:

  • Function
  • Object
  • {}

These are disallowed because they don’t provide the value or typing that the developer expects. See the FAQ section below for more details.

You can find more details about this list in the typescript-eslint docs.

How to Customize @typescript-eslint/ban-types Rule

The @typescript-eslint/ban-types rule is configured in your .eslintrc.json file in the "rules" section. Here’s an example configuration:

"@typescript-eslint/ban-types": [
    "error",
    {
        "types": {
            "Bar": "Don't use Bar because it is unsafe",
            "Person": {
                "message": "Person is too generic!",
                "fixWith": "Employee"
            },
            "Function": false
        },
        "extendDefaults": true
    }
]

The “error” line tells the compiler to throw an error if any rules are broken. The alternative “warn” value tells the compiler to simply print a warning value.

Each field in the “types” object has three parts:

  • The disallowed type
  • The message to display
  • the fixWith type

For example, I have disallowed the “Person” type. If it is used, the linter displays the message “Person is too generic!”. If I auto-fix, the Person type will be replaced with the Employee type.

Notice that I have set “Function”: false. Function is disallowed by default but this enables Function type for my project.

Take a look at this example code that uses the above configuration:

@typescript-eslint/ban-types
@typescript-eslint/ban-types

As expected, the compiler throws an error on Bar, String, and Person because these are disallowed. The compiler allows Function type because we specifically allowed it.

Here’s a screenshot of the linter error text for Person type:

Fix @typescript-eslint/ban-types
Fix @typescript-eslint/ban-types

If I select Quick Fix…, I am provided with an option that auto-fixes this value and changes it to Employee.

Here’s how to run eslint --fix for your whole project.

How to Disable @typescript-eslint/ban-types

There are four methods to disable @typescript-eslint/ban-types. The following list goes from narrowest to broadest:

  • Disable a rule once at the line level
  • Disable individual rules for a project
  • Disable all rules for a project except rules specifically enabled
  • Disable all rules for a project

Disable @typescript-eslint/ban-types at the line level

Add comment // eslint-disable-next-line @typescript-eslint/ban-types immediately above the offending line. Here’s the code snippet:

// eslint-disable-next-line @typescript-eslint/ban-types
const myBar: Bar = { baz: 'abc' };

Disable individual @typescript-eslint/ban-types rules for a project

Add a type to the @typescript-eslint/ban-types rule in your .eslintrc.json and set its value to “false”. Here’s the code snippet:

"@typescript-eslint/ban-types": [
    "error",
    {
        Number: "false"
    }
]

You likely would do this only to disable default rules.

Disable all @typescript-eslint/ban-types rules for a project except rules specifically enabled

Disable all default rules listed earlier in this post, while leaving specified rules enabled. Here’s the code snippet:

"@typescript-eslint/ban-types": [
    "error",
    {
        //rules here will still be enforced
    },
    "extendDefaults": false
]

Disable all @typescript-eslint/ban-types rules for a project

This is the most permissive and most risky option, and it likely is not a good idea for production apps. Here’s the code snippet:

"@typescript-eslint/ban-types": "off"

As a reminder, this value is placed in the rules section of the .eslintrc.json.

FAQs

Can I Use Function as a Type with @typescript-eslint/ban-types?

Function type is disabled in the default ban-types rules list. The Function type is too permissive and a more specific type should be used. However, this rule can be disabled.

Why Shouldn’t I Use {} as a Type?

{} type is interpreted as “Any non-nullish value”. A more specific type should be used.

Why Shouldn’t I Use Object as a Type?

Object type is interpreted as “Any non-nullish value”, just like the {} type. A more specific type should be used.

Resources

Here’s why AirBnB’s ESLint configuration provides huge value.

Here are the 5 most used eslint-plugin-jsx-a11y rules.

Here’s how to configure the no-unused-vars rule.

Here’s how to fix the “Missing file extension ‘tsx'” error.

Ban Types Rule Documentation

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.