如何在TypeScript的.tsx文件中导入JSON颜色配置文件？

Hey there! Since you’ve already got your type definitions ready, let’s get that JSON color palette imported and working in your .tsx file smoothly. Here’s a step-by-step breakdown:

1. Double-Check Your tsconfig.json Settings #

First, make sure TypeScript is configured to handle JSON imports. Open your tsconfig.json and verify these two compiler options are set (they might already be there, but it’s worth confirming):

{
  "compilerOptions": {
    // ...your existing config
    "resolveJsonModule": true, // Enables importing JSON files
    "esModuleInterop": true // Fixes common import/export compatibility issues
  }
}

2. Import the JSON File & Apply Your Type #

Assuming your JSON file is named colors.json (with the exact content you shared) and your type is defined as something like ColorPalette, here’s how to bring it into your .tsx component:

Example Type Definition (for reference, since you already have this) #

If your type is in a separate file (e.g., src/types/colors.ts), it might look like this:

export type ColorPalette = {
  primaryBright: string;
  primaryMain: string;
  primaryDarker: string;
  primaryDarkest: string;
  secondaryBright: string;
  secondaryMain: string;
  secondaryDarker: string;
  secondaryDarkest: string;
  tertiaryMain: string;
  tertiaryDarker: string;
  tertiaryDarkest: string;
  darkGrey: string;
  lightGrey: string;
};

Import in Your .tsx File #

Now import the JSON and tie it to your type for type safety:

// src/components/YourComponent.tsx
// Adjust the paths to match your project structure
import rawColors from '../colors.json';
import type { ColorPalette } from '../types/colors';

// Assign the imported JSON to a variable with your type (enforces type checks)
const colors: ColorPalette = rawColors;

// Use the colors anywhere in your component!
function YourComponent() {
  return (
    <div style={{ backgroundColor: colors.primaryMain, color: colors.lightGrey }}>
      This uses your primary main color!
    </div>
  );
}

export default YourComponent;

Alternatively, you can assert the type directly during import for brevity:

import colors from '../colors.json' assert { type: 'json' };
import type { ColorPalette } from '../types/colors';

const typedColors = colors as ColorPalette;

3. Verify It Works #

Once you’ve set this up, you’ll get full TypeScript intellisense for your color keys (no typos!) and can use the colors in styles, components, or anywhere else you need them.

If you run into errors, double-check:

• The path to your JSON file is correct relative to your .tsx file
• resolveJsonModule is enabled in tsconfig.json
• Your type definition matches all the keys in the JSON exactly (no missing or extra properties)

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