Exploring Child Types in Typescript and JSX minus the React framework

Question

Exploring Child Types in Typescript and JSX minus the React framework

It seems like there's a missing piece of the puzzle that I can't quite figure out. Despite going through the documentation on JSX in non-React settings, I'm still unable to spot my mistake. Let's examine the following code:

/** @jsx pragma */

function pragma(node: any, props: any, ...children: any[]) {
  return node;
}

declare namespace JSX {
  type Element = string;
  interface ElementChildrenAttribute {
    children: {}; // specify children name to use
  }
}

interface PropsType {
  children: string;
  name: string;
}

export const Prop = (props: PropsType) => {};

const foo = <Prop name="foo">hello</Prop>;

The error message I encounter (on the last line) is:

Property 'children' is missing in type '{ name: string; }' but required in type 'PropsType'.

I could "fix" this by doing:

const foo = <Prop name="foo" children="bye">hello</Prop>;

However, I expected that the hello would automatically be treated as the children. Isn't it unnecessary to explicitly specify a children property? What am I overlooking here? Wasn't the original code supposed to work without generating an error since the children should be filled with the string value "hello" automatically (without needing me to add a children prop)?

What is the missing element here? Do I need to complete some other field or type in the JSX namespace to make this function?

Clarification: My concern lies in TypeScript not assigning the string "hello" to children. If it did, everything would fall into place. It appears as if it's not an issue with my prop types but rather a gap in how I redefine the JSX namespace for handling my "custom" JSX.

Additionally, although having children in my props is not obligatory, it is permissible and desired because it helps refine the type. This practice is indeed allowed (refer to the second paragraph here) for exactly this reason. Adding it here does not introduce a new prop; rather, it simply specifies what was outlined in JSX.ElementChildrenAttribute.

typescript jsx

Answer 1

Answer №1

In the world of React, there is a handy type called PropsWithChildren<T>. While React relies on it, you have the freedom to craft your own version and substitute the React-specifics with JSX.

This versatile type should cover all scenarios for what Children may consist of.

type Children = JSX.Element[] | JSX.Element | string | number | boolean | null | undefined;

type PropsWithChildren<P> = P & {
    children?: Children;
}

type PropsType = {
    name: string;
}

export const Bar = ({ name, children }: PropsWithChildren<PropsType>) => (
    <div>
        <p>{name}</p>
        <div>{children}</div>
    </div>
);

I've thoroughly tested these snippets, and they are free from any type errors.

export const ElementArray = () => (
    <Bar name="Foo">
        <div>Hello</div>
        <div>World</div>
    </Bar>
)

export const Element = () => (
    <Bar name="Foo">
        <div>Hello World</div>
    </Bar>
)

export const String = () => (
    <Bar name="Foo">Hello World</Bar>
)

export const Number = () => (
    <Bar name="Foo">{43110}</Bar>
)

export const Boolean = () => (
    <Bar name="Foo">{true}</Bar>
)

export const Null = () => (
    <Bar name="Foo">{null}</Bar>
)

export const Undefined = () => (
    <Bar name="Foo" />
)

You also have the ability to define your own FC (Functional Component) type by utilizing PropsWithChildren, allowing you to use it similarly to how it's employed in React.

type FC<P = {}> = {
    (props: PropsWithChildren<P>): JSX.Element;
}

// example
export const FooBar: FC<PropsType> = ({ name, children }) => (
    <div>
        <p>{name}</p>
        <p>{children}</p>
    </div>
);

Answer 2

In the world of React, there is a handy type called PropsWithChildren<T>. While React relies on it, you have the freedom to craft your own version and substitute the React-specifics with JSX.

This versatile type should cover all scenarios for what Children may consist of.

type Children = JSX.Element[] | JSX.Element | string | number | boolean | null | undefined;

type PropsWithChildren<P> = P & {
    children?: Children;
}

type PropsType = {
    name: string;
}

export const Bar = ({ name, children }: PropsWithChildren<PropsType>) => (
    <div>
        <p>{name}</p>
        <div>{children}</div>
    </div>
);

I've thoroughly tested these snippets, and they are free from any type errors.

export const ElementArray = () => (
    <Bar name="Foo">
        <div>Hello</div>
        <div>World</div>
    </Bar>
)

export const Element = () => (
    <Bar name="Foo">
        <div>Hello World</div>
    </Bar>
)

export const String = () => (
    <Bar name="Foo">Hello World</Bar>
)

export const Number = () => (
    <Bar name="Foo">{43110}</Bar>
)

export const Boolean = () => (
    <Bar name="Foo">{true}</Bar>
)

export const Null = () => (
    <Bar name="Foo">{null}</Bar>
)

export const Undefined = () => (
    <Bar name="Foo" />
)

You also have the ability to define your own FC (Functional Component) type by utilizing PropsWithChildren, allowing you to use it similarly to how it's employed in React.

type FC<P = {}> = {
    (props: PropsWithChildren<P>): JSX.Element;
}

// example
export const FooBar: FC<PropsType> = ({ name, children }) => (
    <div>
        <p>{name}</p>
        <p>{children}</p>
    </div>
);

Answer 3

Answer №2

Your original code lacks a minor detail, the inclusion of declare global. By adding it in, everything functions smoothly without any errors:

/** @jsx pragma */

function pragma(node: any, props: any, ...children: any[]) {
  return node;
}

declare global {
  namespace JSX {
    type Element = string;
    interface ElementChildrenAttribute {
      children: {}; // defining children name
    }
  }
}

interface PropsType {
  children: string;
  name: string;
}

export const Prop = (props: PropsType) => { return null };

const foo = <Prop name="foo">hello</Prop>; // assuming children

Answer 4

Your original code lacks a minor detail, the inclusion of declare global. By adding it in, everything functions smoothly without any errors:

/** @jsx pragma */

function pragma(node: any, props: any, ...children: any[]) {
  return node;
}

declare global {
  namespace JSX {
    type Element = string;
    interface ElementChildrenAttribute {
      children: {}; // defining children name
    }
  }
}

interface PropsType {
  children: string;
  name: string;
}

export const Prop = (props: PropsType) => { return null };

const foo = <Prop name="foo">hello</Prop>; // assuming children

Answer 5

Answer №3

Modify

interface PropsType {
  children: string;
  name: string;
}

turn it into

interface PropsType {
  name: string;
}

as children is already defined in the ElementChildrenAttribute. You're essentially replacing children as a property rather than as a special attribute

Answer 6

Modify

interface PropsType {
  children: string;
  name: string;
}

turn it into

interface PropsType {
  name: string;
}

as children is already defined in the ElementChildrenAttribute. You're essentially replacing children as a property rather than as a special attribute

Answer 7

Answer №4

After some investigation, I finally managed to resolve the issue at hand. Surprisingly, the documentation failed to shed light on why my initial code was ineffective and why the revised approach proved successful.

Upon examining my code closely, I identified a minor error. The Prop component was not returning a value of type

JSX.Element</code as it should have been. Although rectifying this mistake was straightforward, it did not address the primary concern:</p>
<pre><code>export const Prop = (props: PropsType) => "world";
export const Buz = (props: { id: string }) => "test2";

Furthermore, I made a crucial realization during this process. Visual Studio Code issued a warning indicating that the JSX value in my code was unused. Initially, I assumed this declaration existed solely for the compiler's benefit and disregarded it. However, upon relocating it to a separate file named jsx.d.ts, I noticed a significant improvement. Here is the contents of my jsx.d.ts file:

declare namespace JSX {
  type Element = string;
  interface ElementChildrenAttribute {
    children: {}; // specify children name to use (type seems irrelevant)
  }
}

The updated code within a .tsx file now appears as follows:

/** @jsx pragma */

function pragma(node: any, props: any, ...children: any[]) {
  return node;
}

export interface PropsType {
  name: string;
  children: string;
}

export const Prop = (props: PropsType) => "test";
export const Buz = (props: { id: string }) => "test2";

Subsequent to this modification, all lines of code started behaving according to my expectations:

const ok1 = <Prop name="foo">hello</Prop>; // Compiles!
const err1 = <Prop name="bar" />; // Error children missing
// more examples here

Answer 8

After some investigation, I finally managed to resolve the issue at hand. Surprisingly, the documentation failed to shed light on why my initial code was ineffective and why the revised approach proved successful.

Upon examining my code closely, I identified a minor error. The Prop component was not returning a value of type

JSX.Element</code as it should have been. Although rectifying this mistake was straightforward, it did not address the primary concern:</p>
<pre><code>export const Prop = (props: PropsType) => "world";
export const Buz = (props: { id: string }) => "test2";

Furthermore, I made a crucial realization during this process. Visual Studio Code issued a warning indicating that the JSX value in my code was unused. Initially, I assumed this declaration existed solely for the compiler's benefit and disregarded it. However, upon relocating it to a separate file named jsx.d.ts, I noticed a significant improvement. Here is the contents of my jsx.d.ts file:

declare namespace JSX {
  type Element = string;
  interface ElementChildrenAttribute {
    children: {}; // specify children name to use (type seems irrelevant)
  }
}

The updated code within a .tsx file now appears as follows:

/** @jsx pragma */

function pragma(node: any, props: any, ...children: any[]) {
  return node;
}

export interface PropsType {
  name: string;
  children: string;
}

export const Prop = (props: PropsType) => "test";
export const Buz = (props: { id: string }) => "test2";

Subsequent to this modification, all lines of code started behaving according to my expectations:

const ok1 = <Prop name="foo">hello</Prop>; // Compiles!
const err1 = <Prop name="bar" />; // Error children missing
// more examples here

Exploring Child Types in Typescript and JSX minus the React framework

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring Local Gems with Google Places API in Ionic 2

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Using immer JS to update a nested value has been successfully completed

unable to retrieve information from the redis cache

Utilize Pipe for every instance of a variable in the Controller

Tips for extracting key values from an array of objects in Typescript

PhpStorm is unable to resolve the @ionic/angular module

Guide on setting a default value for a variable within a Typescript class

Create a function in JavaScript that is able to accept a variable number of objects as arguments

In TypeScript, the error "Property does not exist on type 'any[]'" indicates that a specific property is not recognized on

Service function in Angular 2 is returning an undefined value

Can we verify if this API response is accurate?

How can I display JSON values without revealing the parent in Angular 5 and Ionic 3?

Creating a backup link for a video player component in NextJs

When you call Subscribe(), you will receive the output "complete: () => void; 'complete' is defined in this context. What exactly does this signify?

Instructions for utilizing ObjectId with a string _id on the client side

Reasons why a functional component may not trigger a rerender after a state change using useReducer()

Guide on incorporating text input areas into specific positions within a string

What is the best way to pass a variable from a class and function to another component in an Angular application?

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?