how to check type of variable in typescript +angular?

Question

could you please tell me how to check typeof of variable in typescript + angular ?

import { Component } from '@angular/core';

interface Abc {
  name : string
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  a:Abc= {
  name:"sss"
  }

  constructor(){
    console.log(typeof this.a)
   // console.log(this.a instanceof Abc) 
  }
}

It should give true and false

https://stackblitz.com/edit/angular-jfargi?file=src/app/app.component.ts

Possible duplicate of Why does 'instanceof' in TypeScript give me the error "'Foo' only refers to a type, but is being used as a value here."? — David
– David, Commented Jul 5, 2018 at 11:43
for true / false you have to check it against some value — Mohd Tabish Baig
– Mohd Tabish Baig, Commented Jul 5, 2018 at 11:43

Bobby · Accepted Answer · 2019-04-25 20:47:59Z

38

Interfaces are erased at runtime so there will be no trace of the interface in any runtime call. You can either use a class instead of an interface (classes exist at runtime and obey instanceof

class Abc {
    private noLiterals: undefined;
    constructor(public name: string) { }
}
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    name = 'Angular 6';
    a: Abc = new Abc( "sss")

    constructor() {
        console.log(this.a instanceof Abc) // Will be true 
    }
}

Or you can do structural checking to see if the properties of Abc are present at runtime in the object:

export class AppComponent {
    name = 'Angular 6';
    a: Abc = { name: "sss" }

    constructor() {
        console.log('name' in this.a) // Will be true 
    }
}

edited Apr 25, 2019 at 20:47

Bobby

334 bronze badges

answered Jul 5, 2018 at 11:42

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jose Alban Over a year ago

Instead of testing 'name' in this.a, given this.a follows an interface, one could: const myInterface = this.a as MyInterface; console.log(myInterface.name)

Neophyte Over a year ago

structural check works, however instanceof for class-es is a bit tricky. They only work if you initialize the variable with the new keyword. If initialized as an object, it won't fly. See: stackblitz.com/edit/…

rantlr Over a year ago

I create a class which implements the interface. Then I initialize properties in the constructor of that class. This way I can new up an object at runtime and pass it around as the interface type, if need be.

Florian Ludewig · Accepted Answer · 2019-07-25 12:21:00Z

36

just use typeof(variable); so in your case:

console.log(typeof(this.a));

edited Jul 25, 2019 at 12:21

answered Jul 5, 2018 at 11:42

Florian Ludewig

6,18616 gold badges85 silver badges159 bronze badges

Comments

zerocewl · Accepted Answer · 2018-07-05 11:43:14Z

9

Try 'instanceof' or 'is':

a instanceof Abc;

See also: Class type check with typescript

answered Jul 5, 2018 at 11:43

zerocewl

12.9k8 gold badges34 silver badges58 bronze badges

Comments

octavian09 · Accepted Answer · 2019-11-08 10:20:05Z

6

For basic types (string, number, etc) you can check like this:

if( typeof(your_variable) === 'string' ) { ... }

answered Nov 8, 2019 at 10:20

octavian09

1691 silver badge4 bronze badges

Comments

Pardeep Jain · Accepted Answer · 2018-07-05 11:54:34Z

3

Interfaces only exist at compile-time and are removed after compilation, so that code makes no sense at run-time. If you try so it will always return false.

Have a look here -

constructor(){
    console.log(typeof(this.a), '---');
    console.log(this.instanceOfA(this.a)); 
  }

  instanceOfA(object: any): object is ABc {
    return 'member' in object;
  }

Working Example

For more in details refer here -

https://stackoverflow.com/a/46703380/5043867

edited Jul 5, 2018 at 11:54

answered Jul 5, 2018 at 11:42

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Comments

Trilok Singh · Accepted Answer · 2020-03-30 08:01:02Z

1

try this

  console.log(typeof (this.specialProviderSelected));

we can check type of variable like as string, number, object etc

  if((typeof (this.specialProviderSelected)) === 'string') {
     action here...
    }
   if((typeof (this.specialProviderSelected))  === 'number') {
     action here...
    }
    if((typeof (this.specialProviderSelected))  === 'object') {
     action here...
    }

edited Mar 30, 2020 at 8:01

answered Mar 28, 2020 at 11:41

Trilok Singh

1,37114 silver badges11 bronze badges

3 Comments

Jason Aller Over a year ago

Code only answers can almost always be improved by the addition of some explanation of how and why they work.

Trilok Singh Over a year ago

next time , i will try to give answers with explanations. thank u

double-beep Over a year ago

For now, you can just edit your post to add some explanation.

Collectives™ on Stack Overflow

how to check type of variable in typescript +angular?

6 Answers 6

3 Comments

Comments

Comments

Comments

Working Example

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related