Can we Use Generic Variable to Make an import with TypeScript-CodePudding

I searched a lot,for a solution to create a basic generic component. For this i need to pass throught props an Array of Objects to a functionnal Component.

On this functionnal component i want to use dynamic values coming from Props like import MyDynamicName from "DynamicPath"

Example

import myComponentName from myPathVar

I want to use variables on an import line , this variables coming from _props . And i don't know how to solve this problem and if its possible

i tried this but didn't worked

const path = '../../examples/tagsProjectsa.json';
const abc = import(`${path}`).then(data => {
  console.log(data);
});

but module can't be found

UPDATE : TO Answer the question : No We can't do generic import atm so i trie to pass interfaces through props and this didn't worked too --> Is there a way to pass down an Interface through props?

So i use type on my props to pass my generic objects. And it worked , i wasn't able to define generic types because can't pass interfaces to get types

CodePudding user response：

Static import statements cannot be used to resolve a dynamic specifier. From the linked documentation:

Only single quoted and double quoted Strings are allowed.

However, you can resolve a dynamic specifier (e.g. a string held in a variable) using dynamic import. This even works using object URLs as seen in the code snippet below:

You appear to be attempting to import JSON data. Note that importing JSON data is not yet part of the spec, and that doing so requires using an import assertion which is currently only a stage 3 proposal.

<script type="module">

const initialData = {message: 'hello world'};

const json = JSON.stringify(initialData);
const blob = new Blob([json], {type: 'application/json'});
const oUrl = URL.createObjectURL(blob);

const {default: importedData} = await import(oUrl, {assert: {type: 'json'}});

const result = importedData.message === initialData.message ? 'Success' : 'Fail';
console.log(result, {initialData, importedData});

// Cleanup object URL data after use
URL.revokeObjectURL(oUrl);

</script>