Skip to main content

triple-slash-reference

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

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