Typescript any check type

Type Checking In Typescript

By Wade Wade is a full-stack developer that loves writing and explaining complex topics. He is an expert in Angular JS and was the owner of tutorialsforangular.com which was acquired by Upmostly in July 2022. Published: 4 August 2021

Coming from a C# background, I don’t tend to use Discriminated Unions a whole awful lot. By Discriminated Unions, I mean having a method that may take multiple different types, or may return multiple different types. If you’ve come from a C# world, it’s basically like method overloads when passing parameters into a method. And the other way, it allows you to make a method that could return one of many different types, that don’t necessarily have to have an inheritance relationship between them. Let’s see how this might work :

class Plane < >class Car < >getVehicle() : Plane | Car < //Either of these are valid. return new Plane(); //return new Car(); >

It’s somewhat strange at first to get used to this ability if you’ve never used a language that uses unions. Most developers would instead make a “base” class of “Vehicle” and make both Plane and Car inherit from Vehicle, and then you don’t need a union. Which.. In my view is probably valid. But lets say you can’t do that, and you are dealing with code that either returns a Plane or Car, *or* code that accepts a Plane or Car. You’re going to need to know at some point, which one you have. Because if the objects were identical, you probably wouldn’t need this union at all. Type checking in Typescript on the surface seemed easy, but I went down a bit of a rabbit hole through documentation and guides that weren’t always clear. So I want to try and simplify it down all right here, right now.

Using The TypeOf Operator

Javascript actually has a typeof operator itself that can tell you which type a variable is. As an example, we can do things like :

let variable1 = 'abc'; let variable2 = 123; console.log(typeof variable1);//Prints "string" console.log(typeof variable2);//Prints "number"

But.. This isn’t as helpful as you might think. Other than the fact that it returns the “type” as a string, which is rather unhelpful in of itself, it doesn’t work with complex types. For example :

let myCar = new Car(); console.log(typeof myCar);//Prints "object"

For all custom classes (Which, in modern JavaScript you will have many), the return type is only ever object. That’s because the typeof operator can only tell you which primitive type your variable is, but nothing beyond that. For this reason, while it may be helpful for telling strings from numbers, anything more, typeof is out!

Using The InstanceOf Operator

That brings us to the instanceof operator. It’s actually rather simple! We can just change our code to work like so :

let myCar = new Car(); console.log(myCar instanceof Car);//Prints true

Works well and we can now tell if our variable is an instance of a car. But there is a caveat, and it’s around inheritance. Consider the following code :

class Car < >class Honda extends Car < >let myCar = new Honda(); console.log(myCar instanceof Car);//Prints true

Notice that even though our variable holds a “Honda”, it still returns true as a car. For the most part, this is how all programming languages work so we shouldn’t read too much into this “limitation” as it’s really just polymorphism at play, but it’s still something to keep in mind. Alas, we have an issue! A really smart developer has come along and said that interfaces are the new hip thing, and we should switch all classes to interfaces in our front end code. So we have this :

interface Car < >let myCar = <> as Car; console.log(myCar instanceof Car);//Error 'Car' only refers to a type, but is being used as a value here.

'Car' only refers to a type, but is being used as a value here.

What’s going on here? Well.. the instanceof operator works with classes only, not interfaces. Gah! OK but actually there is a way to check this further!

Using The As Cast Operator

Consider the following code (And yes I know it’s a fairly verbose example, but should hopefully make sense!)

interface Car < carMake : string; >let myCar = ; let processCar = (car : object) => < //Some other code. if(car as Car)< console.log((car as Car).carMake); >> processCar(myCar);

Notice how we can cast our variable to a Car, and check if it has a value (by using a truthy statement, it will be undefined otherwise). Casting is actually a great way to determine whether variables are instances of an interface.

Using Typescript Type Guards

One thing I want to point out about the above code is that we have had to actually cast the car twice. Notice that inside the console log, we had to cast again for intellisense to pick up we were using a Car.

console.log((car as Car).carMake);

Typescript has a way to deal with this however. It’s called “Type Guards”, and it allows you to write code that will not only check an object is a given type, but that Typescript from that point on can treat the variable as the type. For example, we can create a custom type guard like so :

function isCar(car : any): car is Car

The magic sauce here is the return type. It’s actually “car is Car”. That tells Typescript that should this return true, the input variable can be treated as a Car from this point onwards. This allows us to change our code to instead be :

let myCar = ; let processCar = (car : object) => < //Some other code. if(isCar(car))< console.log(car.carMake); >> processCar(myCar);

Notice how inside our console log, we didn’t have to cast again to have it act as a car. This is a really important concept when talking about type guards. It’s not just a way to create a nice fancy method that can be used to check types, it actually allows Typescript to start treating what could be an unknown object type, as a very specific one within that code block.

Related Posts:

👋 Hey, I’m Wade

Wade is a full-stack developer that loves writing and explaining complex topics. He is an expert in Angular JS and was the owner of tutorialsforangular.com which was acquired by Upmostly in July 2022.

Источник

How To Check The Type In TypeScript?

When developing TypeScript projects, developers often need to check the type of an entity. Luckily, this is easy to do.

This article shows how to check the type of:

How to check the type of a variable?

To check the type of a variable in TypeScript, you can use the typeof operator.

This operator returns the data type of a variable.

Here are a few examples of the typeof operator in action:

typescript// Outputs: 'string' console.log(typeof 'dog'); // Outputs: 'boolean' console.log(typeof false); // Outputs: 'number' console.log(typeof 123); // Outputs: 'object' console.log(typeof 'asd'>); // Outputs: 'function' console.log(typeof function ( ) <>); // Outputs: 'function' console.log(typeof class A <>); // Outputs: 'object' console.log(typeof null); // Outputs: 'undefined' console.log(typeof undefined); 

This method is reliable for checking primitive types, but you need to use other methods to check the type of a class or an object.

Note: Here, we are using the JavaScript typeof operator, which is different from the TypeScript typeof operator.

How to check the type of an object?

To check the type of an object, you can use the in keyword to verify if a specific property or method exists inside the object.

typescriptconst cow = < giveMilk: () => < console.log('give milk.') > >; const dog = < bark: () => < console.log('bark.') > >; // Outputs: true console.log('giveMilk' in cow); // Outputs: false console.log('bark' in cow); 

In this example, we verify that the object is a cow by checking for the existence of the giveMilk function.

You can also use a tagged or discriminated union to check an object’s type.

The best Web Development course in 2023! 👉 Learn Web Development

How to check the type of an interface?

To check the type of a TypeScript interface, you can:

You can read more about checking the type of an interface in this article.

How to check a class type?

To check the type of a class in TypeScript, you can use the instanceof operator.

This operator returns a boolean (true or false) and tests if an object is of the specified object type.

typescriptclass Dog < public constructor( private name: string ) < >> const dog = new Dog('doggy'); // Outputs: true console.log(dog instanceof Dog); 

Unfortunately, this method isn’t bulletproof and can return false positives.

A safer option to check the class type is to create a class constant with the class name inside the class.

typescriptclass Dog < public readonly NAME = 'dog'; public constructor( private name: string ) < >> const dog = new Dog('doggy'); // Outputs: true console.log(dog.NAME === 'dog'); 

You can also create a type guard to check for specific methods to test the class type.

How to check the type of an array?

To check the type of an array, you need to verify each array’s item type individually and look for inconsistent types.

typescriptconst isArrayOfStrings = (value: unknown): value is string[] => < return Array.isArray(value) && value.every(item => typeof item === "string"); > // Outputs: true console.log(isArrayOfStrings(['a','b'])); // Outputs: false console.log(isArrayOfStrings(['a',2])); 

In this example, we verify that each array item is of type string.

Final thoughts

As you can see, checking the type of an entity is easy in TypeScript.

You can choose from multiple options, depending on your situation.

Here are some other TypeScript tutorials for you to enjoy:

The best Web Development course in 2023! 👉 Learn Web Development

Hello! I am Tim Mouskhelichvili, a Freelance Developer & Consultant from Montreal, Canada. I specialize in React, Node.js & TypeScript application development. If you need help on a project, please reach out, and let’s work together.

Источник