ts-nameof-proxy

nameof in TypeScript, no compiler required. Implemented using proxy with some limitations.

Type safely generate property name or path of variable, referenced properties can be renamed in bulk by the editor.

Install

npm install ts-nameof-proxy

Usage

nameOf(student, (s) => s.age); // "age"
nameOf(student, (s) => s.name.length); // "length"
nameOf<Student>((s) => s.name.length); // "length"

separatedPathOf(student, (s) => s.age); // ["age"]
separatedPathOf(student, (s) => s.name.length); // ["name", "length"]
separatedPathOf<Student>((s) => s.name.length); // ["name", "length"]

pathOf(student, (s) => s.name.firstName[0]); // "['name']['firstName']['0']"
pathOf<Student>((s) => s.name.firstName[0]); // "['name']['firstName']['0']"

Limitations

The example below is not feasible:

nameOf(student); // "student"
nameOf(student, (student) => student); // "student"

Example

const people = [
  { name: { firstName: "John", lastName: "Doe" } },
  { name: { firstName: "Jane", lastName: "Smith" } },
];

<Formik initialValues={people} onSubmit={() => {}}>
  <Form>
    {({ values }) =>
      values.map((person, index) => (
        <div key={person.name.firstName}>
          <Field
            name={pathOf(values, (values) => values[index].name.firstName)}
          />
          <Field
            name={pathOf(values, (values) => values[index].name.lastName)}
          />
        </div>
      ))
    }
    {/* 
      <Field name="['0']['name']['firstName']" />
      <Field name="['0']['name']['lastName']" />
      <Field name="['1']['name']['firstName']" />
      <Field name="['1']['name']['lastName']" /> 
    */}
  </Form>
</Formik>;