Skip to main content

triple-slash-reference

Disallow certain triple slash directives in favor of ES6-style import declarations.

✅

Extending "plugin:@typescript-eslint/recommended" in an ESLint configuration enables this rule.

TypeScript's /// triple-slash references are a way to indicate that types from another module are available in a file. Use of triple-slash reference type directives is generally discouraged in favor of ECMAScript Module imports. This rule reports on the use of /// <reference lib="..." />, /// <reference path="..." />, or /// <reference types="..." /> directives.

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/triple-slash-reference": "error"
  }
};

Try this rule in the playground ↗

Options​

This rule accepts the following options:

type Options = [
  {
    /** What to enforce for `/// <reference lib="..." />` references. */
    lib?:
      | 'never'
      /** What to enforce for `/// <reference lib="..." />` references. */
      | 'always';
    /** What to enforce for `/// <reference path="..." />` references. */
    path?:
      | 'never'
      /** What to enforce for `/// <reference path="..." />` references. */
      | 'always';
    /** What to enforce for `/// <reference types="..." />` references. */
    types?:
      | 'never'
      | 'prefer-import'
      /** What to enforce for `/// <reference types="..." />` references. */
      | 'always';
  },
];

const defaultOptions: Options = [
  { lib: 'always', path: 'never', types: 'prefer-import' },
];

Any number of the three kinds of references can be specified as an option. Specifying 'always' disables this lint rule for that kind of reference.

lib​

When set to 'never', bans /// <reference lib="..." /> and enforces using an import instead:

/// <reference lib="code" />

globalThis.value;
Open in Playground

path​

When set to 'never', bans /// <reference path="..." /> and enforces using an import instead:

/// <reference path="code" />

globalThis.value;
Open in Playground

types​

When set to 'never', bans /// <reference types="..." /> and enforces using an import instead:

/// <reference types="code" />

globalThis.value;
Open in Playground

The types option may alternately be given a "prefer-import" value. Doing so indicates the rule should only report if there is already an import from the same location:

/// <reference types="code" />

import { valueA } from 'code';

globalThis.valueB;
Open in Playground

When Not To Use It​

Most modern TypeScript projects generally use import statements to bring in types. It's rare to need a /// triple-slash reference outside of auto-generated code. If your project is a rare one with one of those use cases, this rule might not be for you. You might consider using ESLint disable comments for those specific situations instead of completely disabling this rule.

When Not To Use It​

If you want to use all flavors of triple slash reference directives.

Resources​