typescript 映射类型 多种类型

Question

I have 2 types:

type UserForm = 'student' | 'teacher';
type FormFields = 'name' | 'age' | 'email';

what I want to achieve:

interface Form {
  form: {
    studentName: string;
    studentAge: string;
    studentEmail: string;
    teacherName: string;
    teacherAge: string;
    teacherEmail: string;
  }
}

I know it can be done "manually", like this, but it's not necessary linked to the UserForm type

interface {
  form: {
    [K in FormFields as `student${Capitalize<K>}`]: string
  } & {
    [K in FormFields as `teacher${Capitalize<K>}`]: string
  }
}

Answer 1

A shorter way to achieve this behavior would look like this:

interface Form {
  form: {
    [K in `${UserForm}${Capitalize<FormFields>}`]: string
  }
}

Key remapping does not seem to be necessary here. We can simply use both UserForm and FormFields in the template literal type and the mapped type will use it to construct a union of all permutations.

---

Playground