Getting this openai typescript error (Type 'MessageInterface' is not assignable to type 'ChatCompletionMessageParam')

I am getting this error on create method for typescript but could not able to resolve it.

No overload matches this call. Type 'MessageInterface' is not assignable to type 'ChatCompletionMessageParam'.ts(2769)

  interface MessageInterface {
    role: string;
    content: string;
  }


  const [messages, setMessages] = useState<MessageInterface[]>([
    {
      role: "system",
      content: "You are a helpful assistant designed to output JSON.",
    },
  ]);

  const prompt: MessageInterface = { role: "user", content: input };

  setMessages([...messages, prompt]);
  const completion = await openai.chat.completions.create({
    messages: [...messages, prompt],
    model: "gpt-3.5-turbo-1106",
    response_format: { type: "json_object" },
  });

I assumed that messages are an array of objects. I also looked into the completion.ts but still no luck

Solution

If we look at the ChatCompletionMessageParam type in the source code, we’ll see that it is a union of a few interfaces:

type ChatCompletionMessageParam =
  | ChatCompletionSystemMessageParam
  | ChatCompletionUserMessageParam
  | ChatCompletionAssistantMessageParam
  | ChatCompletionToolMessageParam
  | ChatCompletionFunctionMessageParam;

The important part is that each of those interfaces doesn’t have property role with type string as you have defined in your MessageInterface interface. The role in each of them is a more precise type rather than just a generic string:

role: 'system' | 'user' | 'assistant' | 'tool' | 'function'

And string will never be assignable to any of those values above.

I suggest to change the type of the role in the MessageInterface to the one defined by the library:

type ChatCompletionRole = 'system' | 'user' | 'assistant' | 'tool' | 'function’;

If you absolutely need to keep your own MessageInterface you can do:

interface MessageInterface {
  role: ChatCompletionRole;
  content: string;
}

// OR

interface MessageInterface {
  role: 'system' | 'user' | 'assistant' | 'tool' | 'function';
  content: string;
}

But it’ll be easier to just import existing ChatCompletionMessageParam type from the library and use it instead of MessageInterface.