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.
npm install ts-nameof-proxy
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']"
The example below is not feasible:
nameOf(student); // "student"
nameOf(student, (student) => student); // "student"
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>;