The type of a reference variable in a type definition of another variable

Question

The type of a reference variable in a type definition of another variable

Can we reference the type of one variable (let's call it someVar) in TypeScript when declaring the type of another variable (anotherVar)?

For example, instead of creating a separate type declaration for { complex: 'type' }, can we directly use it as the type for someVar? And then, later in the code, is it possible to conditionally assign the value of someVar to anotherVar or leave it undefined without resorting to using any?

const someVar?: { complex: 'type' } // = ...

// ...

// Desired behavior in pseudocode:
let anotherVar/*: (typeof someVar) */ = undefined

if (condition) {
  anotherVar = someVar
}

Update: TypeScript does have a typeof operator that can achieve this (the above pseudocode is valid TypeScript code), but there are limitations, especially when working with this.

Here's a slightly different scenario:

class Test {
  private someVar?: { complex: 'type' } // = ...

  private someMethod() {
    let anotherVar: typeof this.someVar = undefined // Error: Cannot find name 'this'.

    if (condition) {
      anotherVar = someVar
    }
  }
}

In the case above, how can we address the issue?

typescript

Answer 1

Answer №1

Your current code is functioning correctly:

interface Person {
    name: string;
}

const john: Person = {
    name: 'John',
};

let mary: typeof john;
// Now mary is also defined as type Person

Answer 2

Your current code is functioning correctly:

interface Person {
    name: string;
}

const john: Person = {
    name: 'John',
};

let mary: typeof john;
// Now mary is also defined as type Person

Answer 3

Answer №2

Regrettably, the keyof operator does not function with this. There was a discussion regarding this issue on Github which has since been closed and is unlikely to be implemented. A potential workaround could involve referencing the type of the member from the class directly:

class Test {
  private someVar?: { complex: 'type' } // = ...

  private someMethod() {
    let anotherVar: Test["someVar"] = undefined

    if (condition) {
      anotherVar = someVar
    }
  }
}

Playground

Alternatively, as suggested by @Skovy, you could define a type for someVar and utilize it in both instances. In my opinion, this approach is more recommended unless there are specific reasons not to do so.

type ComplexType = { complex: 'type' } | undefined;

class Test {
  private someVar?: ComplexType;

  private someMethod() {
    let anotherVar: ComplexType = undefined

    if (condition) {
      anotherVar = this.someVar
    }
  }
}

Answer 4

Regrettably, the keyof operator does not function with this. There was a discussion regarding this issue on Github which has since been closed and is unlikely to be implemented. A potential workaround could involve referencing the type of the member from the class directly:

class Test {
  private someVar?: { complex: 'type' } // = ...

  private someMethod() {
    let anotherVar: Test["someVar"] = undefined

    if (condition) {
      anotherVar = someVar
    }
  }
}

Playground

Alternatively, as suggested by @Skovy, you could define a type for someVar and utilize it in both instances. In my opinion, this approach is more recommended unless there are specific reasons not to do so.

type ComplexType = { complex: 'type' } | undefined;

class Test {
  private someVar?: ComplexType;

  private someMethod() {
    let anotherVar: ComplexType = undefined

    if (condition) {
      anotherVar = this.someVar
    }
  }
}

Answer 5

Answer №3

To handle both scenarios, you have the option to create a new `type` or `interface` that can be reused.

type A = undefined | { complex: 'type' }

const someVar: A = { complex: 'type'};

let anotherVar: A = undefined

let condition = true;
if (condition) {
  anotherVar = someVar
}

Another way is to utilize the `typeof` operator as suggested:

let someVar: { complex: 'type' } | undefined;

let anotherVar: typeof someVar = undefined

let condition = true;
if (condition) {
  anotherVar = someVar
}

If dealing with a more complex class example, consider using a `type` or `interface`:

type A = { complex: 'type' } | undefined;

class Test {
  private someVar?: A;

  private someMethod() {
    let anotherVar: A = undefined

    let condition = true;
    if (condition) {
      anotherVar = this.someVar
    }
  }
}

An alternate approach that seemed to work involves:

class Test {
  private someVar?: { complex: 'type' }

  private someMethod() {
    let anotherVar: typeof Test.prototype.someVar = undefined

    let condition = true;
    if (condition) {
      anotherVar = this.someVar
    }
  }
}

Answer 6

To handle both scenarios, you have the option to create a new `type` or `interface` that can be reused.

type A = undefined | { complex: 'type' }

const someVar: A = { complex: 'type'};

let anotherVar: A = undefined

let condition = true;
if (condition) {
  anotherVar = someVar
}

Another way is to utilize the `typeof` operator as suggested:

let someVar: { complex: 'type' } | undefined;

let anotherVar: typeof someVar = undefined

let condition = true;
if (condition) {
  anotherVar = someVar
}

If dealing with a more complex class example, consider using a `type` or `interface`:

type A = { complex: 'type' } | undefined;

class Test {
  private someVar?: A;

  private someMethod() {
    let anotherVar: A = undefined

    let condition = true;
    if (condition) {
      anotherVar = this.someVar
    }
  }
}

An alternate approach that seemed to work involves:

class Test {
  private someVar?: { complex: 'type' }

  private someMethod() {
    let anotherVar: typeof Test.prototype.someVar = undefined

    let condition = true;
    if (condition) {
      anotherVar = this.someVar
    }
  }
}

The type of a reference variable in a type definition of another variable

Answer №1

Answer №2

Answer №3

Similar questions

Best Method for Confirming Deletion in Data Table with Shadow and UI

Utilizing an AwsCustomResource in AWS CDK to access JSON values from a parameter store

Testing React components with React Testing Library and Effector (state manager) made easy

Transferring information from child to parent class in TypeScript

Ways to capture targeted requests

Using absolute imports to resolve modules in TypeScript and Next.js

Unable to retrieve headers from extended Express.Request type

Error in AngularFire2 typings: The property 'take' is not present in the type 'FirebaseObjectObservable<any>'

Difficulty establishing a connection between Typescript and Postgres results in a prolonged

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

The element is not defined in the Document Object Model

How to Retrieve the Current Item in *ngFor Loop Using TypeScript in Angular 4

Customize the color of a specific day in the MUI DatePicker

I'm having trouble linking MikroORM migration to Postgresql - the npx command keeps failing. Can anyone offer some guidance on what

Show data based on the chosen destination

There was a serious issue: The mark-compacts were not working effectively near the heap limit, resulting in allocation failure - the JavaScript heap ran out of memory during the

Having trouble receiving accurate intellisense suggestions for MongoDB operations

Is there a way to automatically close the previous accordion when scrolling to a new one on the page?

Is there a way for TS-Node to utilize type definitions from the `vite-env.d.ts` file?

Angular's DecimalPipe will truncate any strings that exceed 10 digits