TypeScript issues

15 hours ago 1
ARTICLE AD BOX

I'm building a Next.js 16 project, using Neon db.

Say I have this type definition:

export type MyProps = { brand: string; category: string; id: string; // many more properties };

And this query to fetch data (which works fine):

try { const data: Record<string, MyProps>[] = await sql` SELECT brand, category, id, // more props FROM table `; return data; } catch (err) { // error msg }

Then in my component:

const { brand, category, id, // more } = data;

Then I do something like

const whatEver = brand.toLowerCase();

I get a type error:

Property 'toLowerCase' does not exist on type 'MyProps'.ts(2339)

I know I can go String(brand).toLowerCase();, but I have to do this in heaps of places which seems verbose and makes the code ugly.

I can do this (create a new object from the data) which works, but seems a bit dodgy:

export const nativeType = (arr: Record<string, MyProps>) => Object.entries(arr).reduce( (acc, [key, value]) => ({ ...acc, [key]: value }), {} as MyProps, );

Is there a better way?

Read Entire Article