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 path="..." />, /// <reference types="..." />, or /// <reference lib="..." /> 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 = [
  {
    lib?: 'always' | 'never';
    path?: 'always' | 'never';
    types?: 'always' | 'never' | 'prefer-import';
  },
];

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

With { "path": "never", "types": "never", "lib": "never" } options set, the following will all be incorrect usage:

/// <reference path="foo" />
/// <reference types="bar" />
/// <reference lib="baz" />
Open in Playground

Examples of incorrect code for the { "types": "prefer-import" } option. Note that these are only errors when both styles are used for the same module:

/// <reference types="foo" />
import * as foo from 'foo';
Open in Playground
/// <reference types="foo" />
import foo = require('foo');
Open in Playground

With { "path": "always", "types": "always", "lib": "always" } options set, the following will all be correct usage:

/// <reference path="foo" />
/// <reference types="bar" />
/// <reference lib="baz" />
Open in Playground

Examples of correct code for the { "types": "prefer-import" } option:

import * as foo from 'foo';
Open in Playground
import foo = require('foo');
Open in Playground

When To Use It​

If you want to ban use of one or all of the triple slash reference directives, or any time you might use triple-slash type reference directives and ES6 import declarations in the same file.

When Not To Use It​

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

Resources​