在TypeScript中声明返回箭头函数及编写ReactMeteorData声明文件

Great questions! Let's tackle each one step by step:

TypeScript makes it straightforward to type functions that return arrow functions—you just need to explicitly define the return type as a function type, or use type aliases for better readability. Here are a few common scenarios:

Basic example (no outer parameters) #

If your outer function doesn't take arguments, you can directly specify the return type as the arrow function's signature:

// Returns an arrow function that takes a number and returns a formatted string
function createNumberFormatter(): (num: number) => string {
  return (num) => `$${num.toFixed(2)}`;
}

// Usage
const formatPrice = createNumberFormatter();
console.log(formatPrice(19.99)); // "$19.99"

Outer function with parameters #

If the outer function accepts arguments that configure the returned arrow function, type those parameters and tie them to the return function's behavior:

// Returns an arrow function that multiplies a value by the given multiplier
function createMultiplier(multiplier: number): (value: number) => number {
  return (value) => value * multiplier;
}

// Usage
const double = createMultiplier(2);
console.log(double(5)); // 10

Using type aliases for readability #

For more complex function signatures, use type aliases to make your code cleaner:

// Define a type for the returned arrow function
type ValueTransformer = (input: string) => number;

// Outer function that returns this type
function createStringToNumberParser(): ValueTransformer {
  return (str) => parseInt(str, 10);
}

Looking at the original connect function logic, withTracker is a higher-order component (HOC) that accepts two forms of input: either a standalone getMeteorData function, or an options object containing getMeteorData and an optional pure flag. It then returns a function that wraps your React component and injects the data from getMeteorData.

Here's a robust declaration file (react-meteor-data.d.ts) that properly types this behavior:

import * as React from 'react';

// Type for the getMeteorData function: takes component props, returns injected data
type GetMeteorData<TProps, TData> = (props: TProps) => TData;

// Options object type for withTracker
interface WithTrackerOptions<TProps, TData> {
  getMeteorData: GetMeteorData<TProps, TData>;
  pure?: boolean; // Defaults to true if not provided
}

// Type for the HOC returned by withTracker: wraps a component and injects data
type WithTrackerHOC<TProps, TData> = <C extends React.ComponentType<TProps & TData>>(
  WrappedComponent: C
) => React.ComponentType<Omit<React.ComponentProps<C>, keyof TData>>;

// Function overloads to support both input types
declare function withTracker<TProps, TData>(
  options: WithTrackerOptions<TProps, TData>
): WithTrackerHOC<TProps, TData>;

declare function withTracker<TProps, TData>(
  getMeteorData: GetMeteorData<TProps, TData>
): WithTrackerHOC<TProps, TData>;

export default withTracker;

Key details about this declaration: #

• Generic types: TProps represents the props your wrapped component expects, and TData represents the data injected by getMeteorData. This ensures type safety across the entire flow.
• Function overloads: Handles both calling withTracker with an options object or directly with the getMeteorData function, matching the original JavaScript logic.
• Omit utility: The returned HOC's component type uses Omit to remove the injected TData keys from the required props. This means consumers of your wrapped component don't need to pass the injected data—only the original props.

Example usage #

import withTracker from 'react-meteor-data';
import * as React from 'react';

// Props your component expects from parent components
interface UserProfileProps {
  userId: string;
}

// Data injected by withTracker
interface UserProfileData {
  user: Meteor.User | null;
}

const UserProfile = ({ userId, user }: UserProfileProps & UserProfileData) => {
  if (!user) return <div>Loading...</div>;
  return <div>Username: {user.username}</div>;
};

// Option 1: Call with just getMeteorData
export default withTracker<UserProfileProps, UserProfileData>(({ userId }) => ({
  user: Meteor.users.findOne(userId),
}))(UserProfile);

// Option 2: Call with options object
export default withTracker<UserProfileProps, UserProfileData>({
  getMeteorData: ({ userId }) => ({
    user: Meteor.users.findOne(userId),
  }),
  pure: false, // Disable pure component optimization if needed
})(UserProfile);

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