Svelte with Typescript: Uncovering the Types of Props

Issue: I am trying to create a function that can take a component as the first argument and its props as the second argument in a generic manner

   import Modal from "./Modal.svelte";

  function openModal(component: typeof Modal, componentProps: ConstructorParameters<typeof Modal>['0']['props']) {
    /** Do some actions*/
  }

  openModal(Modal, { showModal: true })

The current implementation works, but it lacks generality. I am struggling to determine the correct generic types to use

I have experimented with 

T extends SvelteComponent, T extends Svelte2TsxComponent
as possible solutions

typescriptsveltesvelte-component

Answer №1

I managed to figure it out

I'm a bit unsure about what to replace the "any, any" with, but it seems to be working fine. Any additional explanation would be greatly appreciated, thanks :D

function openModal<T extends SvelteComponentConstructor<any, any>>(component: T, componentProps: ConstructorParameters<T>['0']['props']) {
    /** Do stuff*/
  }

PS: I'm holding off on providing the "correct answer" in case someone comes up with a better solution, as I'm not entirely satisfied with this one

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

Angular 4 animation issue: duration of transitions not being properly implemented

Why isn't the transition working as expected? Even though the animate function is set with a time of 2 seconds, the transition happens instantly. trigger('showMenu', [ state('active', style({ marginLeft: '0px' }) ...

animationtypescriptweb-deploymentangular

Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

I need help with waiting for data to be retrieved before returning it. The code below fetches data from indexedDB and sends it back to a component. I understand that observables or promises can accomplish this, but I am struggling with how to implement t ...

angulartypescriptasync-await

Retrieve the variable only once a response has been received from the POST request

Is there a way to update a variable in my component only after receiving a response from a POST request? Here is the code in component.ts: formSubmit() { this.sent = this.submitProvider.sendByPost(this.form); this.formSent = this.submitProvider.f ...

javascriptangulartypescriptionic-framework

Problem with execution of TypeScript function from HTML

I have been facing an issue where I am attempting to click a button on an HTML page to trigger a TypeScript function called `getToken()`. Strangely, the function does not seem to get executed when the button is clicked. Surprisingly, I have tested the `get ...

angulartypescript

rxjs - monitoring several observables and triggering a response upon any alteration

Is there a way to watch multiple observables and execute a function whenever any of them change? I am looking for a solution similar to the functionality of zip, but without requiring every observable to update its value. Also, forkJoin isn't suitable ...

typescriptrxjs

To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve th ...

cssreactjstypescriptmaterial-ui

Implementing a string replacement within an array of objects using TypeScript

I have a collection of array objects displayed below [ { "subjectID": 1 "Chosen" : "{subjectsChosen:Python,java,Angular}" "password": "{studentpw:123456abcd}" }, { "subjectID": 2 ...

arraysjsonangulartypescriptjavascript-objects

Using Javascript to parse SOAP responses

Currently, I am working on a Meteor application that requires data consumption from both REST and SOAP APIs. The SOAP service is accessed using the soap package, which functions properly. However, I am facing challenges with the format of the returned data ...

javascriptnode.jstypescriptsoap

Material UI Error TS1128: Expected declaration or statement for ButtonUnstyledProps

While working on my application that utilizes Material UI, I encountered an issue. I keep receiving a Typescript error and haven't been able to find a solution for it. TypeScript error in C:/.../node_modules/@mui/base/ButtonUnstyled/index.d.ts(3,1): D ...

reactjstypescriptmaterial-ui

Get the @types definition installed from a forked repository

Background Information I recently made a workaround for a single type definition in my fork of DefinitelyTyped. This fix is located on a specific branch within my fork. It's important to note that this fix is temporary and should not be merged back ...

typescriptnpmyarnpkgdefinitelytyped

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

javascriptjqueryangularhtmltypescript

Ways to avoid Next.js from creating a singleton class/object multiple times

I developed a unique analytics tool that looks like this: class Analytics { data: Record<string, IData>; constructor() { this.data = {}; } setPaths(identifier: string) { if (!this.data[identifier]) this.da ...

javascriptreactjstypescriptnext.js

Create an interactive Angular form that dynamically generates groups of form elements based on data pulled from

I am currently developing an Angular application and working on creating a dynamic form using Angular. In this project, I am attempting to divide the form into two sections: Person Name and Personal Details. While I have successfully grouped fields for P ...

javascriptjsonangulartypescriptangular-reactive-forms

Obtaining data objects with Angular 2 from JSON

Recently, I received a URL that includes data arrays in JSON format. My goal is to retrieve and utilize all elements within it: However, when attempting this, I end up with everything but nothing specific. For instance: How can I access data.name or data. ...

javascriptangulartypescriptangular-httpclient

The Angular Material Table is not showing any data on the screen

My challenge is to consolidate data from 4 different endpoints in order to generate a ListElement that will populate an angular material table. Despite receiving the correct data in my logs, the table remains empty. Interestingly, when I include a conditio ...

angulartypescriptangular-materialangular-material-table

Failed to import due to an error from the downloaded dependency

I'm encountering an import error in the @react-three module of my downloaded package. ./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js Attempted import error: 'webgl-sdf-generator' does not cont ...

reactjstypescriptreact-three-fiberreact-three-drei

Creating a Higher Order Component with TypeScript using React's useContext API

Looking to convert this .js code snippet into Typescript. import React from 'react'; const FirebaseContext = React.createContext(null) export const withFirebase = Component => props => ( <FirebaseContext.Consumer> {fire ...

reactjstypescriptfirebasereact-context

Shifting the use of @Inject(MAT_DIALOG_DATA) away from class constructors

Our team is making a transition in the Dependency Injection pattern we utilize to minimize the dependency on TypeScript constructors. This shift will help us address recurring issues caused by team members adding logic that shouldn't be included in co ...

angulartypescriptangular-material

Encountering the error message "Received interpolation ({{}}) when an expression was expected" is a common issue when trying to interpolate tag attribute values within an ngFor loop

I've been working with a Devextreme's Datatable and my goal is to dynamically configure the table using a columns configuration array. The plan is to loop through this array using an ngFor and set column tags properties dynamically. Now, the bi ...

angulartypescriptdevextreme

Experiencing difficulties while trying to showcase a PDF within the Expo Go app

I am currently developing a React Native application that requires the display of PDF files. I have tried two different methods, one using react-native-webview and the other with react-native-pdf, but both approaches are presenting challenges. This is how ...

reactjstypescriptreact-nativenpmexpo