如何在对象字面量中定义嵌套对象类型？Tailwind配置类型扩展咨询

一、对象字面量中嵌套对象的类型定义 #

你可以通过先定义嵌套对象的独立类型，再组合成外层对象类型的方式，给嵌套对象添加类型约束，具体步骤如下：

1. 定义嵌套对象的独立类型

// 定义内层对象类型
type Address = {
  street: string;
  city: string;
  zipCode: string;
};

type UserProfile = {
  nickname: string;
  age: number;
};

2. 定义外层对象类型，整合嵌套类型

// 外层对象类型，关联嵌套类型
type User = {
  id: string;
  profile: UserProfile;
  address: Address;
};

3. 用外层类型约束对象字面量

// 此时嵌套对象的结构和类型都会被TypeScript校验
const user: User = {
  id: "u123",
  profile: {
    nickname: "Jack",
    age: 28
  },
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

如果是临时场景，也可以直接用类型断言快速约束，但上面的方式可读性和可维护性更强：

const user = {
  profile: { nickname: "Jack", age: 28 }
} as { profile: { nickname: string; age: number } };

二、Tailwind配置中添加自定义字体类型 #

针对你的tailwind.config.ts，需要调整为TypeScript格式导出，并通过类型约束确保fontFamily.primary符合ValidFont类型，具体实现如下：

1. 导入Tailwind官方配置类型（需先安装@types/tailwindcss）
2. 定义ValidFont字面量类型
3. 扩展Tailwind配置类型，约束字体值

完整代码：

import type { Config } from 'tailwindcss';

// 定义允许的字体类型
type ValidFont = "DMSans-Regular";

// 扩展Tailwind配置类型，确保fontFamily.primary符合ValidFont
type CustomTailwindConfig = Config & {
  theme: {
    extend: {
      fontFamily: {
        primary: ValidFont;
      };
    };
  };
};

// 配置对象并应用自定义类型约束
const config: CustomTailwindConfig = {
  theme: {
    extend: {
      fontSize: {
        md: "32px",
      },
      fontFamily: {
        primary: "DMSans-Regular" // 此处值不符合ValidFont时，TS会直接报错
      }
    },
  },
};

export default config;

如果不需要严格扩展配置类型，也可以直接在字体值上用类型断言快速约束：

import type { Config } from 'tailwindcss';

type ValidFont = "DMSans-Regular";

const config: Config = {
  theme: {
    extend: {
      fontSize: {
        md: "32px",
      },
      fontFamily: {
        primary: "DMSans-Regular" as ValidFont
      }
    },
  },
};

export default config;

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