looking to restrict the interface to only specific types

Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am interested in knowing if there exists a method that aligns with this requirement during developmental stages. Could you provide a concise example illustrating my question?

interface Props {
 aType: number;
 bType: string;
 certainType : 'a' | 'b' | 'c';
}

interface PooProps {
  cType: boolean;
  wantType: any Method // Props certainType
}

function foo(value: PooProps){}

const result = foo({cType: true, wantType: 'a'}) //Type Ok

Do you think this is achievable?

javascripttypescript

Answer №1

To reference the type, use Props['certainType'].

interface PooProps {
  cType: boolean;
  wantType: Props['certainType']
}

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

Utilizing Pagination in Elasticsearch with MongoDB and ExpressJS

Despite my efforts to find a solution online, I have not yet come across anything that helps me achieve what I need. This is my first time working with ElasticSearch, and I am relatively new to Node.js and MongoDB as well. Following a tutorial, I impleme ...

javascriptnode.jsmongodbexpresselasticsearch

Issue with Typescript - Node.js + Ionic mobile app's Angular AoT build has encountered an error

Currently, I am in the process of developing an Android application using Node.js and Ionic framework. The app is designed to display random text and images stored in separate arrays. While testing the app on Chrome, everything works perfectly fine. Upon ...

angulartypescriptionic-frameworkionic2ionic3

Error: ...[i] has not been defined

What seems to be the issue with this part of the script: function refreshLabels() { // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i=0, max=allnodes.leng ...

javascriptjquery

The for loop unexpectedly interrupts a different array

Hey there, I've been working with puppeteer and came across an issue with the following code snippet: console.log(dealsId[i]); for (var i = 0; i < sizes.length; i++) { var refIdClasses = await sizes[i].$eval('input', a => a.getAtt ...

javascriptnode.jspuppeteer

Using requestAnimationFrame to animate several independent objects

I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...

javascriptjqueryhtmlcssrequestanimationframe

Unable to allocate a second item to an existing one

Encountering an unusual issue while trying to assign an item a second time. Initial scenario: I am working with a jqxTree containing various items as shown below: - apple - oracle - microsoft When I drag and drop one item into another, the structure loo ...

javascriptjqueryjqxwidgets

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...

javascriptangulartypescript

Is the data fetched by getStaticProps consistently the same each time I revisit the page?

When utilizing routes to access a specific page like page/[id].js, the concern arises whether data will be refetched each time the page is visited. For instance, if you navigate to another page through a link and then return to this original page by pres ...

javascriptreactjsnext.jsserver-side-rendering

What are the conditions for Jasmine's .toHaveBeenCalledWith to match the parameters?

I'm working on an Angular service along with its Jasmine test. The test is calling f1() and spying on f2(). The function f2 takes a variable v2 and updates it by setting field 'a' to 3. I expected the function f2 to be called with v2 (as def ...

angulartypescriptjasminekarma-jasmineangular-test

Click to alter the style of an <li> element

I'm currently using Angular CLI and I have a menu list that I want to customize. Specifically, I want to change the background color of the <li> element when it is clicked. I am passing an id to the changeColor() function, but unfortunately, I a ...

htmlcssangulartypescript

"NgFor can only bind to Array objects - troubleshoot and resolve this error

Recently, I've encountered a perplexing error that has left me stumped. Can anyone offer guidance on how to resolve this issue? ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supp ...

javascriptangulartypescript

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

I have implemented a strict version of TypeScript and ESLint in my project. The code for this portal was originally sourced from the documentation available here: After making some modifications, the code now looks like this: import React, { useEffect, u ...

javascriptreactjstypescript

Tips for adjusting HighCharts layout with highcharts-vue integrations

I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...

javascripttypescriptvue.jshighchartsvuejs2

Even in report-only mode, Content Security Policy effectively blocks the execution of inline scripts

Currently, I have implemented a Content Security Policy (CSP) in 'Content-Security-Policy-Report-Only' mode with a specified report-uri. There is an inline JavaScript code running on the page that the CSP restricts. My initial expectation was tha ...

javascriptinline

Developing a trivia game using HTML and JavaScript

I'm in need of some serious assistance with creating a quiz using HTML. My goal is to have a web page where users can visit, take a quiz, and have their responses stored. Unfortunately, I don't have the knowledge or skills required to do this on ...

javascriptjqueryhtml

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

javascriptreactjstypescriptreact-typescript

Function not currently in operation

There seems to be an issue with the script not running or returning any answers. The console is blank. I am attempting to retrieve an answer from the Yandex Translate site (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) Code: http: ...

javascriptangularjsapiyandexyandex-api

Angular interceptors in sequence

I'm looking to implement a queue system in Angular. My goal is to store requests in an array and process them sequentially, moving on to the next request once the current one is successful. Below is the code I tried, but unfortunately it didn't ...

angulartypescriptrxjsqueueinterceptor

What is the best way to display a JavaScript loop on a webpage instead of just in the console?

As a beginner in programming, I have taken on the challenge of creating my own FizzBuzz program. The goal is to write a program that displays numbers from 1 to 100. However, for multiples of three, it should output "Fizz" instead of the number; for multipl ...

javascriptjqueryhtml

Corrupted Excel file after downloading using the axios library in Vue.js

I'm having trouble downloading an Excel file using axios. Below is the code I have tried: axios.post(backendURL + 'api/client?file_name='+file_name,params, { file_name: file_name }, { responseType: 'blob' ...

javascriptexcelvue.jsaxiosblob