TypeScript函数构造签名的正确用法及实际开发示例咨询

Nice catch! Let’s unpack this TypeScript interface and its real-world uses clearly.

First, let’s break down exactly what this interface is declaring:

• new (s: string): Date is a constructor signature: it means when you call the value with the new keyword and pass a string argument, it will return a Date instance.
• (n?: number): number is a call signature: it means when you call the value directly (without new), you can optionally pass a number, and it will return a number.

In plain terms, this interface describes a value that acts as both a constructor function and a regular function—something that’s actually pretty common in vanilla JavaScript (think Date: new Date('2024-01-01') gives a Date object, while Date() gives a string timestamp, for example).

1. Implementing a Dual-Purpose Function #

Let’s build a concrete function that matches this interface. It’ll create a Date when used with new, and double a number (or return 0) when called directly:

interface CallOrConstruct {
  new (s: string): Date;
  (n?: number): number;
}

// Implement the interface
const dualFunc: CallOrConstruct = function (arg?: string | number) {
  // Check if we're being called with `new`
  if (new.target) {
    // Constructor path: return a Date instance
    return new Date(arg as string);
  }
  // Regular call path: handle number input
  return typeof arg === 'number' ? arg * 2 : 0;
};

// Usage examples
const myBirthday = new dualFunc('1990-05-15');
console.log(myBirthday instanceof Date); // true

const doubled = dualFunc(25);
console.log(doubled); // 50

const defaultNum = dualFunc();
console.log(defaultNum); // 0

2. Type-Safe Utilities for Dual-Purpose Functions #

You can also use this interface to type utility functions that accept these dual-purpose values, ensuring both usage patterns are correctly enforced:

function processDualFunction(fn: CallOrConstruct) {
  // Use the constructor signature to create a Date
  const eventDate = new fn('2024-12-31');
  // Use the call signature to calculate a value
  const calculatedValue = fn(100);

  console.log(`Event date: ${eventDate.toLocaleDateString()}`);
  console.log(`Calculated value: ${calculatedValue}`);
}

// Pass our dualFunc to the utility
processDualFunction(dualFunc);
// Output:
// Event date: 12/31/2024
// Calculated value: 200

Why This Matters #

This TypeScript feature lets you accurately model JavaScript’s flexible function behavior. Without combining constructor and call signatures, you couldn’t properly type values that work both ways—leading to avoidable type errors or loose type checking when using these dual-purpose functions.

内容的提问来源于stack exchange，提问作者OnlyWick