Difference Between boolean and Boolean in TypeScript

You must have used the boolean data type in any programming language, which displays a true or false value. But we also have primitive and object types of boolean available.

In this tutorial, I will explain the difference between boolean and Boolean in TypeScript. This distinction is crucial for developers working with TypeScript, as using the wrong type can lead to unexpected behavior and bugs in your code.

We’ll dive deep into the specifics, provide detailed examples, and discuss best practices to ensure your code is both efficient and error-free.

Understanding boolean and Boolean in TypeScript

TypeScript, a superset of JavaScript, introduces static types to help developers catch errors early in the development process. Among these types, boolean and Boolean often cause confusion. Here’s a brief overview:

• boolean (lowercase) is a primitive type representing true/false values.
• Boolean (uppercase) is an object type that wraps the primitive boolean value.

The Primitive boolean

The boolean type in TypeScript is straightforward. It can hold one of two values: true or false. This is the same as in JavaScript, where a boolean is a fundamental data type used for logical operations and control flow.

let isCompleted: boolean = true;
let isPending: boolean = false;

The Object Boolean

The Boolean type, on the other hand, is an object wrapper for the primitive boolean value. This is similar to other object wrappers in JavaScript, such as Number and String.

let isCompleted: Boolean = new Boolean(true);
let isPending: Boolean = new Boolean(false);

While this may seem like a minor distinction, it has significant implications for how these types behave in your code.

Key Differences Between boolean and Boolean

Type Checking

One of the most important differences is how TypeScript handles type checking for these two types. The boolean type is a primitive, so it’s more efficient and should be used whenever possible. The Boolean type is an object, which can introduce unnecessary complexity and performance overhead.

Truthiness

In JavaScript, objects are always truthy, even if they represent a false value. This can lead to unexpected behavior when using Boolean instead of boolean.

let falseObject: Boolean = new Boolean(false);

if (falseObject) {
  console.log("This will print, even though the value is false.");
}

let falsePrimitive: boolean = false;

if (falsePrimitive) {
  console.log("This will not print, as expected.");
}

In the example above, the falseObject is truthy because it is an object, even though it represents a false value.

Performance

Using boolean is generally more performant than using Boolean. The primitive type is simpler and faster for the JavaScript engine to handle. When performance is critical, such as in large-scale applications or performance-sensitive code, always prefer boolean.

Best Practices for Using boolean and Boolean

Always Prefer boolean

Whenever you need a true/false value, use the boolean type. It’s simpler, more efficient, and less prone to errors.

let isLoggedIn: boolean = true;
let hasAccess: boolean = false;

Avoid Boolean Unless Necessary

There are very few cases where you would need to use the Boolean object type. One possible scenario is when dealing with APIs or libraries that require a Boolean object. Even then, it’s often better to convert the value to a boolean as soon as possible.

function checkStatus(status: Boolean): boolean {
  return status.valueOf();
}

let status: Boolean = new Boolean(true);
let isStatusTrue: boolean = checkStatus(status);

Type Assertions

If you find yourself needing to convert between types, TypeScript provides type assertions to help with this. Use type assertions to convert a Boolean to a boolean.

let status: Boolean = new Boolean(true);
let isStatusTrue: boolean = <boolean>status.valueOf();

Real-World Example: User Authentication

Let’s consider a real-world example involving user authentication, a common scenario in web applications. Suppose we have a function that checks if a user is authenticated.

function isAuthenticated(userToken: string): boolean {
  // Simulate token validation
  return userToken === "validToken";
}

let userToken: string = "validToken";
let authenticated: boolean = isAuthenticated(userToken);

if (authenticated) {
  console.log("User is authenticated.");
} else {
  console.log("User is not authenticated.");
}

In this example, we use the boolean type to represent the authentication status. This ensures our code is efficient and behaves as expected.

Advanced Example: Feature Toggles

Feature toggles are another common use case where boolean values are essential. Let’s say we have a feature toggle system that enables or disables features for users.

interface FeatureToggles {
  darkMode: boolean;
  betaAccess: boolean;
}

let userFeatures: FeatureToggles = {
  darkMode: true,
  betaAccess: false,
};

function isFeatureEnabled(feature: keyof FeatureToggles, features: FeatureToggles): boolean {
  return features[feature];
}

if (isFeatureEnabled("darkMode", userFeatures)) {
  console.log("Dark mode is enabled.");
} else {
  console.log("Dark mode is disabled.");
}

if (isFeatureEnabled("betaAccess", userFeatures)) {
  console.log("Beta access is enabled.");
} else {
  console.log("Beta access is disabled.");
}

In this scenario, using the boolean type ensures that our feature toggles are simple and efficient. The isFeatureEnabled function checks the status of a feature and returns a boolean value, making it easy to control feature availability.

Conclusion

Understanding the difference between boolean and Boolean in TypeScript is crucial for writing efficient and bug-free code. Always prefer the primitive boolean type for its simplicity and performance benefits. Avoid using the Boolean object type unless absolutely necessary, and be mindful of the potential pitfalls when doing so.

By following these best practices and using the examples provided, you can ensure that your TypeScript code is both robust and maintainable. Whether you’re working on user authentication, feature toggles, or any other logic that involves true/false values, the boolean type is your go-to solution.

You may like to read:

• How to Set Default Values for TypeScript Types?
• Define and Use TypeScript Interface Array of Objects
• How to Use TypeScript Interface Function Properties?

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/