Theo's Typesafe Cult•17mo ago

How can I make sure two arrays contain the same keys (in seperate files)

I'd like typescript to spit an error if I update one array, but not the other. I'm using T3 stack. So far all I have is:

// pages/generate.tsx
import { type Style } from "~/shared/types";
const styles: Style[] = [
  { id: "outline", label: "Outline", description: "Outline" },
  { id: "solid", label: "Solid", description: "Solid" },
  { id: "duotone", label: "Duotone", description: "Duotone" },
];

// pages/generate.tsx
import { type Style } from "~/shared/types";
const styles: Style[] = [
  { id: "outline", label: "Outline", description: "Outline" },
  { id: "solid", label: "Solid", description: "Solid" },
  { id: "duotone", label: "Duotone", description: "Duotone" },
];

// server/api/generate.ts
import { type StylePrompt } from '~/shared/types';
const styles: StylePrompt[] = [
    { id: "outline", prompt: "outline, vector art, minimalist" }
]

// server/api/generate.ts
import { type StylePrompt } from '~/shared/types';
const styles: StylePrompt[] = [
    { id: "outline", prompt: "outline, vector art, minimalist" }
]

// shared/types.ts
export interface Style {
    id: string;
    label: string;
    description: string;
}

export interface StylePrompt {
    id: string;
    prompt: string;
}

// shared/types.ts
export interface Style {
    id: string;
    label: string;
    description: string;
}

export interface StylePrompt {
    id: string;
    prompt: string;
}

This should throw an error because const styles: StylePrompt[] is missing solid and duotone

Solution:

```js // config/styles.ts interface Style { id: string; label: string;...

Jump to solution

3 Replies

jdsl•17mo ago

I would create a shared file that exports the styles array and import it into any file that needs them if they are also related that closely, I would combine them and include the prompt key in the original style array. They already share the same id, etc.

Solution

jdsl•17mo ago

// config/styles.ts
interface Style {
    id: string;
    label: string;
    description: string;
    prompt: string;
}

export const styles: Style[] = [
  { id: "outline", label: "Outline", description: "Outline", prompt: "outline, vector art, minimalist" },
  { id: "solid", label: "Solid", description: "Solid", prompt: "solid, etc" },
  { id: "duotone", label: "Duotone", description: "Duotone", prompt: "duotone, etc" },
];

// config/styles.ts
interface Style {
    id: string;
    label: string;
    description: string;
    prompt: string;
}

export const styles: Style[] = [
  { id: "outline", label: "Outline", description: "Outline", prompt: "outline, vector art, minimalist" },
  { id: "solid", label: "Solid", description: "Solid", prompt: "solid, etc" },
  { id: "duotone", label: "Duotone", description: "Duotone", prompt: "duotone, etc" },
];

// pages/generate.tsx
// server/api/generate.ts
import { styles } from '~/config/styles';

// pages/generate.tsx
// server/api/generate.ts
import { styles } from '~/config/styles';

Keef•17mo ago

You could also consume these objects using a zod schema to do the parsing If it’s third party data it wouldn’t be a bad idea to set this up

Gaming

Programming

How can I make sure two arrays contain the same keys (in seperate files)