Tips for creating a dynamic interface in TypeScript to eliminate repetitive code

Currently, I am utilizing typescript alongside the react-navigation library within my react-native project. Following the guidelines provided in the official documentation, I have been annotating my screens.

One issue I have encountered is the repetitive nature of the types I have created. Is there a method to make these types more dynamic, allowing me to simply input the screen name rather than redefining all types repeatedly?

Below is the code snippet used for annotating my screen. I am looking for a way to make the "landing" string adaptable based on each screen. I hope this explanation makes sense.

type LandingProps = CompositeScreenProps<
  NativeStackScreenProps<HomeStackParamList, "landing">,
  DrawerScreenProps<AppDrawerParamList>
>;
typescriptreact-nativereact-navigation

Answer №1

You have the option to...

declare CPProps<T extends string> as CompositeScreenProps<
  NativeStackScreenProps<HomeStackParamList, T>,
  DrawerScreenProps<AppDrawerParamList>
>;

subsequently

create a type called LandingProps using CPProps<"landing">;

If it happens that the second type parameter of NativeStackScreenProps is further restricted, update

T extends string

to match the new constraint.

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

Creating the upcoming application without @react-google-maps/api is simply not possible

After incorporating a map from the documentation into my component, everything seemed to be functioning correctly in the development version. However, when attempting to build the project, an error arose: Type error: 'GoogleMap' cannot be used as ...

reactjstypescriptgoogle-mapsnext.js

Utilize a generic data type for a property that can accept values of type 'number', 'string', or 'undefined'

This query involves React code but pertains to typescript rather than react. To simplify, I have a component called MyList which accepts a single generic type argument passed to the props type. The generic type represents an object that will be used to c ...

javascriptreactjstypescript

Limit the outcomes of the Ionic timepicker

Currently, I am utilizing the ionic datetime feature. However, instead of receiving just the hours, minutes, and seconds, the result I am getting looks like this 2020-10-05T00:00:27.634+07:00. What I actually require from this output is only 00:00:27. Is ...

javascriptangulartypescriptionic-framework

Preserving quotation marks when utilizing JSON parsing

Whenever I try to search for an answer to this question, I am unable to find any relevant results. So please excuse me if this has been asked before in a different way. I want to preserve all quotation marks in my JSON when converting from a string. In m ...

javascriptjsontypescript

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

htmlangulartypescript

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

javascripthtmlcssnode.jstypescript

Leverage SQLite database in React-Native for Android development on Windows platform

I have been experimenting with a demo app in React-Native that includes the usage of SQLite Database. Following the instructions from this link, I tried running the command npm install --save react-native-sqlite-storage in my project's main repository ...

androidnode.jswindowssqlitereact-native

The type does not meet the requirements set by the class it is inheriting from

Currently, I am in the process of working on a WebSocket Secure (WSS) server utilizing the Node ws library which can be found here. More specifically, I am following the approach outlined in this particular question, although its relevance is yet to be det ...

node.jstypescriptwebsocketws

Encountering the below error message when running the command to initialize expo project:

Dependency installation in progress... Warning: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accfc3dec981c6dfec9d829e829b">[email protected]</a> is deprecated, consider upgrading to core-js@3 or a ne ...

javascriptnode.jsreact-nativenpmexpo

What could be the reason for the crash caused by ngModel?

The usage of [(ngModel)] within a *ngFor-Loop is causing an endless loop and crashing the browser. This is how my HTML looks: <div class="container"> <div class="row" *ngFor="let item of controlSystemTargetViewModel.values; let index = i ...

angulartypescriptngforngmodel

Is a loading screen necessary when setting up the Stripe API for the checkout session?

While working on my web app and implementing the Stripe API for creating a checkout session, I encountered an issue where there is a white screen displayed awkwardly when navigating to the Stripe page for payments. The technology stack I am using is NextJ ...

reactjstypescriptnext.jsstripe-payments

Discovering an entry that lacks a specific value within an array in the records

Currently, I am utilizing sequelize along with typescript in a node environment (with a postgresql database). Here is the model that I have defined: id: number, someField: string, arr1: number[], arr2: number[] My objective is to retrieve all records wher ...

sqlnode.jstypescriptpostgresqlsequelize.js

Whenever I update the values in my input using the ngModel attribute, all of my arrays stored in an object also get updated

I am currently working with a table on the frontend. <table class="table table-hover"> <thead> <tr> <th> Account Entry Number </th> <th> ...

angulartypescript

What is the reason behind permitting void functions in the left part of an assignment in Typescript?

Take a look at this Typescript snippet: let action = function (): void { //perform actions }; let result = action(); What makes it suitable for the TypeScript compiler? ...

typescript

Arranging JavaScript object by object properties (name)

Can anyone assist me with my training? I am currently learning JavaScript (Js) and TypeScript (Ts) by working with an external public API. After successfully fetching and displaying my data, I now want to implement sorting functionality. My goal is to sor ...

javascriptreactjstypescriptnext.js

Having trouble implementing catchError in a unit test for an HttpInterceptor in Angular 11

I am facing challenges in completing a unit test for my HttpInterceptor. The interceptor serves as a global error handler and is set to trigger on catchError(httpResponseError). While the interceptor functions perfectly fine on my website, I am struggling ...

angulartypescriptunit-testingkarma-jasmine

How can I effectively filter the data returned by consuming an API in JSON through an Angular service?

My Angular 6 project includes a UsersService that is injected into the UsersComponent. Originally, the component displayed mock data in the form of a string array. However, it now consumes JSON data from an API provided by JSONPlaceholder via the UsersSer ...

angulartypescriptangular-cliangular6

The custom declaration file for the 'react-dates' module could not be located

I've been struggling to create a custom declaration file for the 'react-dates' npm package, but I'm facing issues with the compiler not recognizing my declaration file. Whenever I try to import DateRangePicker from 'react-dates&ap ...

typescripttypescript-typings

How to implement angular 2 ngIf with observables?

My service is simple - it fetches either a 200 or 401 status code from the api/authenticate URL. auth.service.ts @Injectable() export class AuthService { constructor(private http: Http) { } authenticateUser(): Observable<any> { ...

angularasynchronoustypescriptobservable

Module 'csstype' not found

I am diving into the world of React with TypeScript. After setting up react and react-dom, I also installed @types/react and @types/react-dom which all went smoothly. However, a pesky error message keeps popping up: ERROR in [at-loader] ./node_modules/@t ...

reactjstypescript