本文へスキップ

restrict-template-expressions

テンプレートリテラル式を`string`型にするよう強制します。

✅

拡張 "plugin:@typescript-eslint/recommended-type-checked" を ESLint設定 で有効にすると、このルールが有効になります。

💭

このルールには 型情報 が必要です。

JavaScriptは、`+`を使用して文字列と連結する場合や、`${}`を使用してテンプレートリテラルに埋め込む場合など、文字列コンテキストではオブジェクトを自動的に文字列に変換します。オブジェクトのデフォルトの`toString()`メソッドは`"[object Object]"`という形式を使用しますが、これは多くの場合意図したものではありません。このルールは、文字列ではない値がテンプレートリテラル文字列で使用されている場合にレポートし、有用な文字列化の結果を提供するその他のデータ型をオプションで許可します。

注記

このルールのデフォルト設定では、カスタム`toString()`メソッドを持つオブジェクトがテンプレートリテラルで使用されることを意図的に許可していません。これは、文字列化の結果がユーザーフレンドリーではない可能性があるためです。

たとえば、配列にはカスタム`toString()`メソッドがあり、内部的に`join()`を呼び出すだけです。これは、(1) 配列要素が必ずしも有用な結果に文字列化されるとは限らない、(2) カンマの後にスペースがないため、結果がユーザーフレンドリーではない、ことを意味します。配列をフォーマットする最良の方法は`Intl.ListFormat`を使用することです。これは、必要に応じて「および」接続詞を追加することさえサポートしています。テンプレートリテラルでこのオブジェクトを使用する場合は、`object.toString()`を明示的に呼び出すか、`allowArray`オプションをオンにして配列を明示的に許可する必要があります。`no-base-to-string`ルールを使用して、誤って`"[object Object]"`が生成されるのを防ぐことができます。

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/restrict-template-expressions": "error"
  }
};

このルールをPlaygroundでお試しください ↗

例​

const arg1 = [1, 2];
const msg1 = `arg1 = ${arg1}`;

const arg2 = { name: 'Foo' };
const msg2 = `arg2 = ${arg2 || null}`;
Playgroundで開く

オプション​

このルールは次のオプションを受け入れ、`strict`および`strict-type-checked`設定でより厳格な設定を使用します。

type Options = [
  {
    /** Whether to allow `any` typed values in template expressions. */
    allowAny?: boolean;
    /** Whether to allow `array` typed values in template expressions. */
    allowArray?: boolean;
    /** Whether to allow `boolean` typed values in template expressions. */
    allowBoolean?: boolean;
    /** Whether to allow `never` typed values in template expressions. */
    allowNever?: boolean;
    /** Whether to allow `nullish` typed values in template expressions. */
    allowNullish?: boolean;
    /** Whether to allow `number` typed values in template expressions. */
    allowNumber?: boolean;
    /** Whether to allow `regexp` typed values in template expressions. */
    allowRegExp?: boolean;
  },
];

const defaultOptionsRecommended: Options = [
  {
    allowAny: true,
    allowBoolean: true,
    allowNullish: true,
    allowNumber: true,
    allowRegExp: true,
  },
];

// These options are merged on top of the recommended defaults
const defaultOptionsStrict: Options = [
  {
    allowAny: false,
    allowBoolean: false,
    allowNullish: false,
    allowNumber: false,
    allowRegExp: false,
    allowNever: false,
  },
];

allowNumber​

`{ allowNumber: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = 123;
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'zero'}`;
Playgroundで開く

このオプションは、数値とBigIntの両方を制御します。

allowBoolean​

`{ allowBoolean: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = true;
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'not truthy'}`;
Playgroundで開く

allowAny​

`{ allowAny: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const user = JSON.parse('{ "name": "foo" }');
const msg1 = `arg = ${user.name}`;
const msg2 = `arg = ${user.name || 'the user with no name'}`;
Playgroundで開く

allowNullish​

`{ allowNullish: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = condition ? 'ok' : null;
const msg1 = `arg = ${arg}`;
Playgroundで開く

allowRegExp​

`{ allowRegExp: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = new RegExp('foo');
const msg1 = `arg = ${arg}`;
Playgroundで開く
const arg = /foo/;
const msg1 = `arg = ${arg}`;
Playgroundで開く

allowNever​

`{ allowNever: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = 'something';
const msg1 = typeof arg === 'string' ? arg : `arg = ${arg}`;
Playgroundで開く

allowArray​

`{ allowArray: true }`を使用した場合の、このルールの追加の**正しい**コードの例

const arg = ['foo', 'bar'];
const msg1 = `arg = ${arg}`;
Playgroundで開く

使用しない場合​

テンプレートリテラルで非文字列値を誤って文字列化することについて心配していない場合は、このルールは必要ない可能性があります。

型チェックされたlintルールは従来のlintルールよりも強力ですが、型チェックされたlintingの設定も必要です。型チェックされたルールを有効にした後にパフォーマンスの低下が発生した場合は、パフォーマンスに関するトラブルシューティングを参照してください。

リソース​