explicit-function-return-type

在函數和類別方法上需要明確的回傳類型.

在 TypeScript 中的函數通常不需要給予明確的回傳類型註解。不寫回傳類型比較不容易閱讀或撰寫，並允許編譯器從函數內容中推斷出來.

然而，明確的回傳類型在視覺上使函數回傳什麼類型更加明確。它們也可以加速具有許多大型函數的大型程式碼庫中的 TypeScript 類型檢查效能.

這條規則強制函數具有明確的回傳類型註解.

.eslintrc.cjs

module.exports = {
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "error"
  }
};

在試運場嘗試此規則 ↗

範例

❌ 錯誤

// Should indicate that no value is returned (void)
function test() {
  return;
}

// Should indicate that a number is returned
var fn = function () {
  return 1;
};

// Should indicate that a string is returned
var arrowFn = () => 'test';

class Test {
  // Should indicate that no value is returned (void)
  method() {
    return;
  }
}

在試運場開啟

✅ 正確

// No return value should be expected (void)
function test(): void {
  return;
}

// A return value of type number
var fn = function (): number {
  return 1;
};

// A return value of type string
var arrowFn = (): string => 'test';

class Test {
  // No return value should be expected (void)
  method(): void {
    return;
  }
}

在試運場開啟

選項

此規則接受下列選項

type Options = [
  {
    /** Whether to allow arrow functions that start with the `void` keyword. */
    allowConciseArrowFunctionExpressionsStartingWithVoid?: boolean;
    /** Whether to ignore arrow functions immediately returning a `as const` value. */
    allowDirectConstAssertionInArrowFunctions?: boolean;
    /** Whether to ignore function expressions (functions which are not part of a declaration). */
    allowExpressions?: boolean;
    /** Whether to ignore functions that don't have generic type parameters. */
    allowFunctionsWithoutTypeParameters?: boolean;
    /** Whether to ignore functions immediately returning another function expression. */
    allowHigherOrderFunctions?: boolean;
    /** Whether to ignore immediately invoked function expressions (IIFEs). */
    allowIIFEs?: boolean;
    /** Whether to ignore type annotations on the variable of function expressions. */
    allowTypedFunctionExpressions?: boolean;
    /** An array of function/method names that will not have their arguments or return values checked. */
    allowedNames?: string[];
  },
];

const defaultOptions: Options = [
  {
    allowExpressions: false,
    allowTypedFunctionExpressions: true,
    allowHigherOrderFunctions: true,
    allowDirectConstAssertionInArrowFunctions: true,
    allowConciseArrowFunctionExpressionsStartingWithVoid: false,
    allowFunctionsWithoutTypeParameters: false,
    allowedNames: [],
    allowIIFEs: false,
  },
];

在混合 JS/TS 程式碼庫中設定

如果您是在一個您會校驗非 TypeScript 程式碼（例如，.js/.mjs/.cjs/.jsx）的程式碼庫中工作，您應確定您應使用 ESLint 覆寫 僅在 .ts/.mts/.cts/.tsx 檔案中啟用規則。如果您未執行此操作，您的 .js/.mjs/.cjs/.jsx 檔案中將會報告無法修正的校驗錯誤。

{
  "rules": {
    // disable the rule for all files
    "@typescript-eslint/explicit-function-return-type": "off",
  },
  "overrides": [
    {
      // enable the rule specifically for TypeScript files
      "files": ["*.ts", "*.mts", "*.cts", "*.tsx"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "error",
      },
    },
  ],
}

allowExpressions

這個規則對帶有 { allowExpressions: true } 的程式碼範例

❌ 錯誤

function test() {}

const fn = () => {};

export default () => {};

在試運場開啟

✅ 正確

node.addEventListener('click', () => {});

node.addEventListener('click', function () {});

const foo = arr.map(i => i * i);

在試運場開啟

allowTypedFunctionExpressions

這個規則對帶有 { allowTypedFunctionExpressions: true } 的程式碼範例

❌ 錯誤

let arrowFn = () => 'test';

let funcExpr = function () {
  return 'test';
};

let objectProp = {
  foo: () => 1,
};

在試運場開啟

✅ 正確

type FuncType = () => string;

let arrowFn: FuncType = () => 'test';

let funcExpr: FuncType = function () {
  return 'test';
};

let asTyped = (() => '') as () => string;
let castTyped = <() => string>(() => '');

interface ObjectType {
  foo(): number;
}
let objectProp: ObjectType = {
  foo: () => 1,
};
let objectPropAs = {
  foo: () => 1,
} as ObjectType;
let objectPropCast = <ObjectType>{
  foo: () => 1,
};

declare function functionWithArg(arg: () => number);
functionWithArg(() => 1);

declare function functionWithObjectArg(arg: { method: () => number });
functionWithObjectArg({
  method() {
    return 1;
  },
});

在試運場開啟

allowHigherOrderFunctions

這個規則對帶有 { allowHigherOrderFunctions: true } 的程式碼範例

❌ 錯誤

var arrowFn = () => () => {};

function fn() {
  return function () {};
}

在試運場開啟

✅ 正確

var arrowFn = () => (): void => {};

function fn() {
  return function (): void {};
}

在試運場開啟

allowDirectConstAssertionInArrowFunctions

這個規則對帶有 { allowDirectConstAssertionInArrowFunctions: true } 的程式碼範例

❌ 錯誤

const func = (value: number) => ({ type: 'X', value }) as any;
const func = (value: number) => ({ type: 'X', value }) as Action;

在試運場開啟

✅ 正確

const func = (value: number) => ({ foo: 'bar', value }) as const;
const func = () => x as const;

在試運場開啟

allowConciseArrowFunctionExpressionsStartingWithVoid

這個規則對帶有 { allowConciseArrowFunctionExpressionsStartingWithVoid: true } 的程式碼範例

❌ 錯誤

var join = (a: string, b: string) => `${a}${b}`;

const log = (message: string) => {
  console.log(message);
};

在試運場開啟

✅ 正確

var log = (message: string) => void console.log(message);

在試運場開啟

allowFunctionsWithoutTypeParameters

這個規則對帶有 { allowFunctionsWithoutTypeParameters: true } 的程式碼範例

❌ 錯誤

function foo<T>(t: T) {
  return t;
}

const bar = <T>(t: T) => t;

在試運場開啟

✅ 正確

function foo<T>(t: T): T {
  return t;
}

const bar = <T>(t: T): T => t;

function allowedFunction(x: string) {
  return x;
}

const allowedArrow = (x: string) => x;

在試運場開啟

allowedNames

您可以傳遞您希望此規則忽略的函式/方法名稱，如下方

{
  "@typescript-eslint/explicit-function-return-type": [
    "error",
    {
      "allowedNames": ["ignoredFunctionName", "ignoredMethodName"]
    }
  ]
}

allowIIFEs

這個規則對帶有 { allowIIFEs: true } 的程式碼範例

❌ 錯誤

var func = () => 'foo';

在試運場開啟

✅ 正確

var foo = (() => 'foo')();

var bar = (function () {
  return 'bar';
})();

在試運場開啟

不使用的情境

如果您發現明確撰寫函數回傳型別並沒有增加視覺化清晰度，或是專案規模不大並不會影響型別檢查效能，表示您不需要這條規則。

延伸閱讀

• TypeScript 函數

資源

• 規則來源
• 測試來源