迹忆客 专注技术分享

要为函数分配属性，需要声明该函数并使用点符号为其分配属性，例如 myFunction.myProperty = myValue。 TypeScript 允许我们简单地通过在同一范围内分配属性来定义函数的属性。

function doMath(a: number, b: number) {
  return a + b;
}

// ✅ Add method on function
doMath.multiply = (a: number, b: number) => {
  return a * b;
};

console.log(doMath.multiply(10, 5)); // 👉️ 50

// ✅ Add property to function
doMath.defaultProps = {
  num1: 5,
  num2: 701,
};

console.log(doMath.defaultProps); // 👉️ {num1: 5, num2: 701}

TypeScript 允许我们在默认情况下将属性和方法分配给函数，只要我们在同一范围内进行即可。

在上面的代码片段中，我们在 doMath 函数上分配了一个 multiply 方法，而无需显式输入任何内容。

但是 ，请注意赋值必须在函数声明的范围内。

第二个示例显示如何将属性分配给函数。

命名函数和箭头函数都支持此语法。 这是使用箭头函数的相同示例。

/**
 * 👇️ const doMath: {
    (a: number, b: number): number;
    multiply(a: number, b: number): number;
    defaultProps: {
        num1: number;
        num2: number;
    };
}
 */
const doMath = (a: number, b: number) => {
  return a + b;
};

// ✅ Add method on function
doMath.multiply = (a: number, b: number) => {
  return a * b;
};

console.log(doMath.multiply(10, 5)); // 👉️ 50

// ✅ Add property to function
doMath.defaultProps = {
  num1: 5,
  num2: 701,
};

console.log(doMath.defaultProps); // 👉️ {num1: 5, num2: 701}

我们可以将鼠标悬停在 IDE 中的 doMath 函数上以查看其类型。

TypeScript 3.1 中引入了默认为函数分配属性和方法的功能，以便更轻松地将 JavaScript 转换为 TypeScript 代码。

这也使我们能够在 React.js 中使用常见的模式，如 defaultProps。

const MyComponent = ({ num }) => <h1>Number is {num}</h1>;

MyComponent.defaultProps = {
  num: 701,
};