Exploring the following code snippet that showcases a React component being defined with a type argument named TRow:
function DataTable<TRow> ({ rows: TRow[] }) {
return (
)
}
Prior to this implementation, ES6 was utilized and components were created as stateless functions:
const DataTable = ({ rows }) => ( ... )
Is it possible to define a function like this with a generic type argument TRow? Furthermore, does Typescript support this functionality?
Absolutely, it is indeed feasible, however only applicable to Functions and not just any random variable. The key lies in defining generics within the type itself, allowing for the creation of variables that adhere to the generic parameters.
Here are some equivalent examples:
interface Person { age: number }
function Function1<T>({ data }: { data: T[] }): void { return void 0 }
const Function2: <T>({ data }: { data: T[] }) => void = ({data}) => void 0
type FunctionType = <T>({ data }: { data: T[] }) => void
const Function3: FunctionType = ({data}) => void 0
const b1 = Function1<Person>({data: [{age: 25}]})
const b2 = Function2<Person>({data: [{age: 30}]})
const b3 = Function3<Person>({data: [{age: 35}]})
Absolutely, TypeScript allows you to customize your code as desired.
For instance, you can encapsulate your prop types within a generic interface named DataProps with the parameter placeholder Datum (which can represent any type of data).
interface DataProps<Datum> {
items: Array<Datum>
}
Next, if you want to incorporate this property type into a stateless React component class, you can utilize the React.SFC type for referencing such components without states.
function getDataComponent<Datum>() : React.SFC<DataProps<Datum>>{
return props => <div>
<p>{props.items.toString()}</p>
</div>
}
This function generates a specific category of stateless React component. To use it,
const MyStringDataComponent = getDataComponent<string>();
Now, you have a designated data component type, specifically designed for string data. Then, create an instance by
ReactDOM.render(<MyStringDataComponent items={['a', 'b']} />, document.getElementById('root'))
You should see a,b displayed on your page.
If you want to modify the function definition, you have the option to do so by replacing the function definition with an interface function definition.
For example, consider the following code snippet:
// Instead of this
function DataTable<TRow> ({ rows: TRow[] }) {
return (
)
}
// Use this
interface DataTable<TRow> {
(elements: { rows: TRow[] }): any
}
// Now you can define the function like this:
// (Remember to add <T extends any> to handle .tsx files without syntax errors. For .ts files, <T> is sufficient)
const myFn: <T>(...args: Parameters<DataTable<T>>) => ReturnType<DataTable<T>> = <T extends any>({ rows: T }) => {
return 123;
};
// Call the function as follows:
myFn<string>({ rows: ['asd,asd'] });
This response addresses a query related to solving the issue discussed in this thread: Typescript ReturnType of generic function
Welcome to the world of AngularFire2 and Firestore! My objective is clear: Query data from Firestore where startTime matches currentDateRange. I am facing some challenges with creating a dynamic query in Firestore. After going through the official docume ...
I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...
Creating d3.axis() or any other d3 object in typescript for a Power BI custom visual and ensuring it displays on the screen - how can this be achieved? ...
The current state value const [settings, setSettings] = useContext(SettingsContext) Utilizing the .map method on the settings state {settings[categoryIndex]?.config?.map((item: ConfigItem, index: number) => ...
NodeJS interprets float values with a zero after the decimal point as integers, but this behavior occurs at the language level. For example: 5.0 is considered as 5 by NodeJS. In my work with APIs, it's crucial for me to be able to send float values w ...
My website has 2 points of user login: one is through my app and the other is via a link on a third-party site. If a user comes from the third-party site, they should be redirected back to it. The only method I can come up with to distinguish if a user is ...
Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...
https://i.stack.imgur.com/zHLON.png I've been using @emotion/react for theming and successfully injected the theme into it. I can access the theme using useTheme within components, but I'm facing some difficulties in accessing the theme within s ...
Can anyone assist me? I am trying to figure out why my code is not working or if I have implemented it incorrectly. I used npm i mathlive to obtain input. However, following the instructions for implementing nuxt plugins in the documentation has not yield ...
Hi there, I've encountered an issue with my getData() function in accountService.ts. I'm attempting to fetch user data and user account data simultaneously using a zip promise. Although the resolve works correctly and I receive the accurate data, ...
Following the execution of relevant yarn add commands, the following lines were added to the packages.json: "@types/classnames": "^2.2.7", "classnames": "^2.2.6", Subsequently, I incorporated these lines into my typescript files: import * as classnames ...
After creating a simple Angular library using CLI with the command ng g library <library-name>, I encountered an issue while trying to import a component from its module. In my app module, I added components.module to the imports array and attempted ...
Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token: ... if (!refreshTokenInProgress) { refreshTokenInProgress = AuthService.refreshToken(); } $q.when(refreshTokenInProgress, function () { refreshTokenInProgre ...
Having a problem with starting a timer in my utility typescript class. The static function initTimer() uses setTimeout but when called from a react component, the timer doesn't start. StyleWrapper.tsx const StyleWrapper: FC = (props) => { cons ...
When working on my project using nest.js in MacOS Sonoma, I encountered a problem where the image folder src/products/images gets deleted after every project rerun (npm start). The images are saved like this: for (const image of images) { const fileName ...
Currently, I am developing an angular project and have encountered an object with the following structure: const obj = { fruits: ['apple', 'orange', 'None'], nation: ['usa'], city: ['New York', ' ...
I am attempting to generate an array of strings with a length greater than zero. let sampleArray2:string[] = ["hello","world","angular","typescript"]; let subArray:string[] = sampleArray2 .map(() => sampleArray2 .find(val => val.length & ...
I have a table displaying records using ngFor, and I am looking to enable editing of a column upon clicking it. <tr *ngFor="let cd of descriptionCodes; let i = index"> <td><input type="checkbox"></td> <td> {{cd.code}} ...
Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation( ...
When using a theme in styled components, I am attempting to enable IntelliSense. In my code snippet below (index.tsx), I utilize ThemeProvider: import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } ...