functionDeclarationStyles

Reports functions that don't match the configured style (declaration vs expression).

✅ This rule is included in the ts preset.

There are two ways of defining functions in JavaScript: function declarations and function expressions assigned to variables. Function declarations are hoisted to the top of their scope, while function expressions are not. Enforcing a consistent style helps maintain code consistency across a codebase.

Examples

With the default "expression" style:

❌ Incorrect

function doSomething() {
  return 42;
}

✅ Correct

const doSomething = function () {
  return 42;
};

const doSomething = () => {
  return 42;
};

With the "declaration" style:

❌ Incorrect

const doSomething = function () {
  return 42;
};

const doSomething = () => {
  return 42;
};

✅ Correct

function doSomething() {
  return 42;
}

Options

style

Which function style to enforce:

• "expression" (default): Requires function expressions instead of declarations
• "declaration": Requires function declarations instead of expressions

{
  "rules": {
    "ts/functionDeclarationStyles": ["error", { "style": "declaration" }]
  }
}

allowArrowFunctions

When true and style is "declaration", arrow functions are allowed. Default is false.

{
  "rules": {
    "ts/functionDeclarationStyles": [
      "error",
      { "style": "declaration", "allowArrowFunctions": true }
    ]
  }
}

When Not To Use It

If your team doesn’t have a preference between function declarations and expressions, or if you want developers to choose the style that best fits each situation, you can disable this rule.

Further Reading

• MDN: function declaration
• MDN: function expression
• MDN: Arrow function expressions

Equivalents in Other Linters

• ESLint: func-style
• Oxlint: eslint/func-style