Discover the data type of a class attribute's accessor methods in TypeScript

Since TypeScript 4.3 introduced the ability for class properties to have getters and setters of different types since 4.3, I am unsure how to correctly retrieve the types of a property's getter and setter.

===

Since a class property is treated as a variable, it is challenging to determine if the property has a getter, a setter, or both, and their respective types (as Parameters<I> and ReturnType<I> are only applicable to functions/methods).

Here are some expected results:

class Foo {
    get bar(): number { /** ... */ }
    set bar(baz: string) { /** ... */ }
}

type GetterOfFooBar = GetterOf<typeof Foo.prototype.bar>; // number
type SetterOfFooBar = SetterOf<typeof Foo.prototype.bar>; // string
class Foo {
    get bar(): number { /** ... */ }
}

type GetterOfFooBar = GetterOf<typeof Foo.prototype.bar>; // number
type SetterOfFooBar = SetterOf<typeof Foo.prototype.bar>; // never

Answer №1

Utilizing the type system to examine the property type of a variant accessor will yield the type that is being read, rather than the type that is being written. This results in GetterOf<T> being feasible, while SetterOf<T> remains unattainable.

Interestingly, this concept is not extensively documented. It is briefly mentioned in the discussion of microsoft/TypeScript#53417 and microsoft/TypeScript#53594:

We always opt for the read types.

This is further elaborated in the implementation notes found at microsoft/TypeScript#42425:

Although the type system maintains complete covariance in other operations, types with variant getters/setters end up being simplified to their get side when processed through mapped types. The type T[K] still indicates the read type of K in T.

There exists a request at microsoft/TypeScript#43729 to enable querying of the setter type. It is also speculated that if the request at microsoft/Typescript#43826 for supporting variant accessors in mapped types and index signatures is fulfilled, it may facilitate isolating the setter type for querying. However, as of now, this functionality is not integrated into the language.

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

Issue encountered when attempting to assign `fontWeight` within `makeStyles` using `theme` in Typescript: Error message states that the property is not

Currently, within my NextJS project and utilizing MUI, I am attempting to define a fontWeight property using the theme settings in the makeStyles function. Oddly enough, this issue only arises when building inside a docker container, as building locally po ...

In what manner can I retrieve this particular type?

Can you provide me with an example of how to use this type? interface MyCode{ (): Function; title: string; } I've been thinking about various possibilities but haven't been able to figure it out. One approach is: let testCode: MyCode = ...

"Error message: TypeORM DataSource encounters a password issue with the client

Here is the content of my data-source.ts file: import {DataSource} from "typeorm"; import path from "path"; import {User} from "./entity/User"; import { config } from "dotenv"; config(); export const AppDataSource ...

Effortlessly converting JSON data into TypeScript objects with the help of React-Query and Axios

My server is sending JSON data that looks like this: {"id" : 1, "text_data": "example data"} I am attempting to convert this JSON data into a TypeScript object as shown below: export interface IncomingData { id: number; t ...

The error message "Type 'string | number' is not assignable to type 'number'" indicates a type mismatch in the code, where a value can be either

I encountered an error code while working with AngularJS to create a countdown timer. Can someone please assist me? //Rounding the remainders obtained above to the nearest whole number intervalinsecond = (intervalinsecond < 10) ? "0" + intervalinseco ...

Is there a way to include the present date and time within a mat-form-field component in Angular?

I'm working on a mat-form-field to display the current time inside an input field. I've managed to insert it, but I'm struggling with the styling. Here's the snippet of code I'm using: <mat-label>Filing Time:</mat-label> ...

Incorporating HTML code within a .ts file: a basic guide

I'm relatively new to Angular, but I've been given a project that's built with Angular. As I examine the .ts file containing the list of property types, I need to wrap a span around the label text. Is this doable? Here is the current list ...

Tips for transitioning from div + useStyles to styled components with @emotion/styled?

I'm struggling to translate material-ui makeStyles with theme applied to a div into my custom div created with styled from emotion. Here is the code I'm trying to convert: const useStyles = makeStyles((theme: Theme) => createStyles({ ro ...

Steps for incorporating a type declaration for an array of objects in a React application with TypeScript

How can I specify the type for an array of objects in React using TypeScript? Here is the code snippet: const SomeComponent = (item: string, children: any) => { //some logic } In this code, you can see that I am currently using 'any' as ...

What is the best way to activate an input field in react-select?

Currently, I am working on a dropdown feature using react-select and have encountered some issues that need to be addressed: 1) The input field should be focused in just one click (currently it requires 2 clicks). 2) When the dropdown is opened and a cha ...

In <R>, what does R represent when it is wrapped around an observer of type Observer<R>? Would it result in a Subscription, Function, or void?

The Angularfire2 project is in the process of adding a storage feature through a work-in-progress branch. This implementation includes two new files - an Observable class and a Factory function. Observable class export class FirebaseUploadTaskObservable& ...

Can you identify the specific function type passed through props?

interface IProps { handleCloseModal: React.MouseEventHandler<HTMLButtonElement> returnFunction: () => void; } export default function Modal({ children, returnFunction, handleCloseModal, }: React.PropsWithChildren<IProps>) { cons ...

Create a NfcV Write Lock Block instruction

Seeking to make data on a NXP ICODE SLIX SL2S2002 tag type 5 (ISO 15693) read-only by utilizing the WRITE SINGLE BLOCKS command through the NfcV object in an app based on Ionic: private readonly cmdISO15693 = { READ_SINGLE_BLOCK: 0x20, WRITE_SI ...

Solving TypeScript Error in React for State Destructuring

Recently, I've been working on creating a React component for AutoComplete based on a tutorial. In my development process, I am using Typescript. However, I encountered an issue while trying to destructure the state within the render suggestions metho ...

Achieving Jest integration with Angular 9 in a Storybook setup

We are currently utilizing Storybook 5 alongside Angular 9, with Jest 26 for some of the testing procedures. The issue we're facing arises when using Typescript version below 3.8.0 - a requirement for Angular 9's ng build --prod. This results in ...

Exploring the possibilities with Rollbar and TypeScript

Struggling with Rollbar and TypeScript, their documentation is about as clear as AWS's. I'm in the process of creating a reusable package based on Rollbar, utilizing the latest TS version (currently 4.2.4). Let's delve into some code snipp ...

Unable to redirect to another page in React after 3 seconds, the function is not functioning as intended

const homeFunction = () => { const [redirect, setRedirect] = useState<boolean>(false); const [redirecting, setRedirecting] = useState<boolean>(false); const userContext = useContext(UserContext); useEffect(() => { const valu ...

Enhancing TypeScript - Managing Variables within Namespace/Scope

Why is the console.log inside the function correctly logging the object, but after the function returns it logs undefined, failing to update the variable? In addition, when using this within testNameSpace, it returns window. Why is that? namespace testNa ...

Creating new Angular2 Observables - Subscribing to undefined developments

Is it a scoping issue or a problem with how my observables are set up? Can you assist me in figuring it out? To explain my logic: My goal is to first check if the data is available locally before making an http.get request for it. I want to return the loc ...

Step-by-step guide to rapidly resolve all issues in VS Code using TypeScript

After extensive searching in VS code, I have not been able to find a quick fix all solution in the documentation or plugins. Is this feature actually non-existent, or is it possible that I am overlooking a keybinding? (I am currently utilizing typescript s ...