TypeScript空对象类型{}的作用及泛型默认类型使用原因

Great question—let’s unpack this clearly, since the {} type is often misunderstood, and its role as a default generic makes a lot of sense once you get the context.

First: What does the {} empty object type actually do? #

You mentioned it’s described as a type for objects with no own properties, but that’s only part of the story. Here’s a more precise breakdown:

• {} represents a type that does not require any properties to exist, but it also doesn’t prevent extra properties from being present (though TypeScript will complain if you try to access those un-declared properties). For example:

  let emptyObj: {} = { username: "redpanda" }; // Totally valid—{} accepts any non-null/non-undefined value
  emptyObj.username; // Type error! {} doesn't declare a `username` property, even though the value has it
  

• It’s a "bottom-line" object type: any value that isn’t null or undefined can be assigned to a variable of type {}. This includes primitives like strings or numbers (since JavaScript wraps them in object wrappers under the hood, and TypeScript allows this assignment).
• Use cases for {}:
  • When you need a type that accepts any object-like value without enforcing specific properties.
  • As a placeholder when you don’t care about an object’s structure, just that it’s a non-null/undefined value.

Why is {} used as a default generic type (like in React’s FunctionComponent)? #

Looking at the FunctionComponent interface you shared:

interface FunctionComponent<P = {}> { 
  (props: PropsWithChildren<P>, context?: any): ReactElement | null; 
  propTypes?: WeakValidationMap<P>; 
  contextTypes?: ValidationMap<any>; 
  defaultProps?: Partial<P>; 
  displayName?: string; 
}

Here’s why {} is the perfect default for the P (props) generic:

1. Zero boilerplate for simple components
   Most basic React components don’t need custom props—they might only accept children. By setting P = {} as the default, you can write components like this without extra type declarations:

   const Greeting: FunctionComponent = () => <h1>Hello!</h1>;
   

   Thanks to PropsWithChildren<P>, the component automatically accepts a children prop without you having to define it explicitly.

2. Strictness by default
   When P is {}, TypeScript will throw an error if you try to pass un-declared props to the component. This prevents accidental typos or invalid props from slipping through, which is a core benefit of using TypeScript with React. For example:

   // Error: Property `username` does not exist on type `PropsWithChildren<{}>`
   <Greeting username="redpanda" />
   

3. Flexibility when you need it
   As soon as your component needs custom props, you can override the default {} by passing a specific type to the generic:

   const UserGreeting: FunctionComponent<{ username: string }> = ({ username }) => (
     <h1>Hello, {username}!</h1>
   );
   

   This seamlessly switches from a "no props needed" default to a strictly typed props definition.

4. Alignment with React’s component patterns
   React encourages writing small, reusable components that often start with no props (or just children). Using {} as the default generic aligns with this pattern, making the type system feel intuitive rather than cumbersome.

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