In search of a way to showcase the properties and data types of a personalized component within a structured table

Currently, I am in the process of developing a documentation website dedicated to a unique design system. My main challenge lies in creating a table that effectively showcases the props for each component. The idea is to have a functional component table that can take any component as input and generate a detailed table displaying the props and their corresponding types. I aim to achieve results similar to storybook args, albeit without utilizing storybook itself.

For instance:

Example Output

Prop Type
variant buttonvariant
onclick function

Do you believe this goal is attainable?

typescripttypes

Answer №1

During compile time, types are present but they are stripped off when the code is executing.

For instance:

interface MyComponentProps { abc: number }
function MyComponent(props: MyComponentProps) {
  return <div>test</div>
}

After compilation:

"use strict";
function MyComponent(props) {
    return React.createElement("div", null, "test");
}

In this output, the props names and types are not included.

However, this answer provides information on generating React PropTypes from TypeScript types during code compilation to JavaScript. This process creates runtime prop types that can be used in a react component for visualization purposes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Webpack does not support d3-tip in its current configuration

I'm having some trouble getting d3-tip to work with webpack while using TypeScript. Whenever I try to trigger mouseover events, I get an error saying "Uncaught TypeError: Cannot read property 'target' of null". This issue arises because th ...

javascriptd3.jstypescriptwebpack

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

While working in JavaScript, I had no issues with this code snippet. However, when I attempted to implement it in a TypeScript Project, an error surfaced. The problem seems to revolve around the fetch(...args) function call. const fetcher = (...args) =&g ...

javascriptreactjstypescript

Factory function with type constraints and default parameter causing TS2322 error

I have a base class that requires some parameters to be passed... class BaseClass<ItemType> { // Some irrelevant parameters omitted for simplicity... constructor(__items: Iterable<ItemType>) {} } Now, I want to create a factory func ...

typescript

When Typecasted in Typescript, the result is consistently returned as "object"

Consider a scenario where there are two interfaces with identical members 'id' and 'name': export interface InterfaceA { id: number; name: string; //some other members } export interface InterfaceB { id: number; nam ...

angulartypescriptcastingtype-conversiontype-assertion

What are the steps to troubleshoot server-side TypeScript code in NextJS with WebStorm?

I am struggling to debug the NextJS API in WebStorm while using TypeScript and navigating through the app route. It is proving to be quite challenging to efficiently debug the API without relying heavily on console.log(). ...

typescriptdebuggingnext.jswebstormapp-route

What is the reasoning behind ethers.js choosing to have the return value of a function be an array that contains the value, rather than just the value itself

An issue arose with the test case below: it('should access MAX_COUNT', async () => { const maxCount = await myContract.functions.MAX_COUNT(); expect(maxCount).to.equal(64); }); The test failed with this error message: ...

typescriptsolidityethers.jshardhatrootstock

Guide to creating a constants file in Node.js

Currently working on creating a constants file in nodejs, but encountering an issue: ERROR in src/app/esri-map/sti/sti-layers-urls.ts(1,1): error TS2304: Cannot find name 'module'. Here is the content of the constants file (sti-layers-urls.ts): ...

javascriptnode.jsangulartypescript

Having trouble changing the title with Switch/Case in Angular?

I am facing an issue where the title is not displayed as expected based on the environment value in appConfig.json. appConfig.json "env": "stage", app.component.ts env: string; constructor( private configService: ConfigService ) ...

javascriptangulartypescript

The 'replace' property is not found in the 'IData' type. What is the missing piece?

I am trying to implement a cast function that can handle strings containing numbers as input. Unfortunately, I am encountering an issue with the "replace()" method when using regex. Does anyone know how I can define the use of "replace()" within the IData ...

javascriptreactjsregextypescriptreplace

Ava tests hitting a snag with TypeScript ("Oops! Unexpected identifier found")

Currently delving into the realms of TypeScript, I decided to venture into creating a TypeScript React application using create-react-app. This application involves a separate TypeScript file called logic.ts, which in turn imports a JSON file. import past ...

javascriptreactjstypescriptcreate-react-appava

What is the process of adding an m4v video to a create-next-app using typescript?

I encountered an issue with the following error: ./components/Hero.tsx:2:0 Module not found: Can't resolve '../media/HeroVideo1-Red-Compressed.m4v' 1 | import React, { useState } from 'react'; > 2 | import Video from '../ ...

typescriptvideonext.js

a numeric value ranging between 0 and 1 designated as a data type in Typescript

Is it possible to define a type in TypeScript that is between 0 and 1, or any other integer values? For example: interface Config { opacity: 0.5 // example value } ...

typescript

The data type 'boolean' cannot be assigned to the type 'CaseReducer<ReportedCasesState, { payload: any; type: string; }>'

I recently developed a deletion reducer using reduxjs/toolkit: import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { AppThunk } from "../store"; import { ReportedCase, deleteReportCase } from "../../api/reportedCasesApi"; import history ...

javascripttypescriptreduxredux-toolkit

Implementing custom error handling in GraphQL using TypeORM and Apollo

Hey there, I'm currently working on implementing a custom error handling feature in my application. An example scenario is when a user tries to create an account with an email that already exists: { "errors": [ { "message": "The email exi ...

typescriptgraphqltypeorm

The function is expected to output Promise<string>, but it seems to be outputting Promise<unknown> instead, although it still compiles successfully

Recently, I encountered some strange code that was compiling fine even though it had some issues. After fixing it, I still couldn't figure out why it was originally working: const stringOrNull: () => Promise<string | null> = () => Promi ...

typescript

Updating array values within the httpClient method in an Angular 14 application

Having trouble updating an array value using the httpClient method. I need to figure out how to access the updated array value outside of the httpclient method. Any assistance in finding a solution would be greatly appreciated. app.component.ts: public ...

angulartypescriptangular14

What is the best way to implement a generic parameter with constraints in an abstract method?

Take a look at this scenario: interface BaseArgs { service: string } abstract class BaseClass { constructor(name: string, args: BaseArgs) { this.setFields(args) } abstract setFields<T extends BaseArgs>(args: T): void } interface ChildA ...

typescriptgenericsabstract-class

Is it possible to dynamically name keys in objects using template literals in Typescript?

Can the scenario below be achieved? type test = <T extends string>(key: T, object: { [`${T}`]: number }) => void ^^^^^^^^ I am aware that we can assign type literal values using that syntax, but af ...

typescript

Load a separate Angular application within an existing Angular application in a dynamic way

I am currently seeking a solution in Angular on how to integrate multiple applications into one, such as: applicationA - main.js - vendor.js - 1.js (chunk) applicationB - main.js - vendor.js - 1.js - 2.js applicationA will load applicationB on route ...

angulartypescriptangular-bootstrapmicro-frontendangular-builder

Error with Angular2 and TypeScript occurs while using rxjs/Subject for filtering when a user finishes typing

I am currently working with Angular 2.0.0-beta.0 and TypeScript 1.7.5 and I encountered an issue while attempting to modify the clever filter on this page: https://angular.io/docs/ts/latest/guide/server-communication.html#!#more-observables The "clever" ...

typescriptangularrxjs