为什么 TypeScript 在将 object 文字分配给扩展 object 文字的泛型类型时会抱怨？

Question

I don't understand why the TypeScript compiler is complaining about this code:

import { useState, useEffect } from 'react';

function useSomething<T extends { [key: string]: any }>(): T {
  const [state, setState] = useState<T>({});  // Argument of type '{}' is not assignable to parameter of type 'T | (() => T)'.

  useEffect(() => {
    setState({ hello: 'world' });
  });

  return state;
}

Since basically, this code works: const t: { [key: string]: any } = { hello: 'world' } .

Example playground: https://www.typescriptlang.org/play/?ssl=14&ssc=36&pln=14&pc=52#code/JYWwDg9gTgLgBAbzgVwM4FMDKMCGN0A0KGAogGZnoDG8AvnGVBCHAORTo42sDcAUHzLIAdjWARhxLM3QwAFsGEBzADwAVOOgAe+YQBNUiOAG0A1ugCeALjioYURUoC6NnMItxaAPgAUAShsNBD44OCoJOxM7PEJbWWwYpzgAXikE-HVfBFo-fhCpckoaH38Ur0R80IwYdPQfJDl0ABsmiBtWAHdoJr1WT1z8nLzQjhhkKElo-H5aAT5w4UiYGyQzSxs7B2UXODcPelTs-gWlgCYVk3NrW3tHHb3PFKNGlra2LqgevtoeIA

EDIT : A better example, the question is basically, is it possible to type this in TypeScript?

import { useState } from 'react';

function useComplexState<T extends Record<string, any>>() {
  const [state, setState] = useState<T>({});

  const setter = (key: keyof T, value: any) => {
    setState((state) => ({ ...state, [key]: value }));
    return state;
  };

  const getter = (key: keyof T) => {
    return state[key];
  }

  return { set: setter, get: getter };
}

interface Person {
  firstName: string;
  lastName: string;
}

const personState = useComplexState<Person>();

personState.get('firstName');
personState.set('lastName', 'Smith');

A few comments about the code:

• I want T to always be an object {} so no one should be able to do useComplexState<boolean>
• Ideally, T shouldn't be required, so if I use useComplexState() I should just have a generic object Record<string, any> inside.
• I'd like to have a default value of {} for the state .

Answer 1

Adding as T in useState<T>({} as T) fixed every issue.