CODEWITHSUNDEEP
reactjstypescripttypescript-typings
BDmon
BDmon

Reputation: 3

How to restrict the props' value of child elements by type of parent element's props in React with typescript

I'm looking for any ways to restrict the props' value of child elements by the type of parent element's props in React with typescript.

type User = { name: string; age: number; };
const Parent = (props: User) => {
  return (
    <div>
      <Child field="name" /> // ok
      <Child field="age" /> // ok
      <Child field="firstName" /> // not ok
    </div>
  );
};

I am look for something like above

Upvotes: 0

Views: 114

Answers (2)

Steve
Steve

Reputation: 602

You will need to provide an explicit generic in that case. Is that what you are looking for?

type User = { name: string; age: number };
const Parent = (props: User) => {
  return (
    <div>
      <Child<User> field="name" /> // ok
      <Child<User> field="age" /> // ok
      <Child<User> field="firstName" /> // not ok
    </div>
  );
};

type ChildProps<T> = {
  field: keyof T;
};

const Child = <T extends unknown>(props: ChildProps<T>) => {
  return null;
};

Playground example

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074118

I like Steve's approach, but here's an alternative (see inline comments):

// The props for `Child`
type ChildProps<FieldNames> = {
    field: FieldNames;
};

// Define a generic type for the Child component.
type ChildType<FieldNames extends string> = (props: ChildProps<FieldNames>) => React.ReactElement;

// Define the component in terms of `string`
const Child: ChildType<string> = (props: ChildProps<string>) => {
    return /*...*/;
};

// Define a refined child that can only use `User` names for `field`
type User = { name: string; age: number };
const ThisChild: ChildType<keyof User & string> = Child;

// Use it
const Parent = (props: User) => {
    return (
        <div>
            <ThisChild field="name" /> // ok
            <ThisChild field="age" /> // ok
            <ThisChild field="firstName" /> // not ok
        </div>
    );
};

Playground example

Upvotes: 1

Related Questions