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 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​