Typescript Quirks - String or string? Which one should I use?
Tags: webdev, typescript, nuggets, frontend
Published: 2020-12-17 14:36:38

---
description: If you've been using Typescript, you would have definitely come across `string` and `String`. Have you ever wondered which one you should be using?
---

If you've been using Typescript, you would have definitely come across `string` and `String`. Have you ever wondered which one you should be using? You might have used them interchangeably and they do work. In fact, there are other types like this, `Number` and `Boolean`. So what are the differences between the two string types and which one should you be using in your projects? Let's find out.

Let's have a look at a simple example of how you create strings using `string` and `String` in Typescript.

```typescript
const str = "This is my string";
const strUsingString = new String("This is my string");
```

The first and most basic difference between the two is that `string` is a primitive type whereas `String` is an `Object` type. Okay, so what are the implications of this tiny difference?

## Your `typeof` checks will fail

Let's look at an example.

```typescript
const str = "This is my string";
const strUsingString = new String("This is my string");

console.log(typeof str); // Prints "string".
console.log(typeof strUsingString); // Prints "object"!
```

As you can see, the `typeof` operator when used on a string created using `String` returns `object`! This means that you no longer will be able to rely on `typeof` checks to differentiate between objects and strings. If you have checks based on this assumption, they will now fail!

## Your equality checks will fail

```typescript
const str = "Hi";
const strUsingString = new String("Hi");

console.log(str == "Hi"); // Prints true. Good.
console.log(str === "Hi"); // Prints true. Good.

console.log(strUsingString == "Hi"); // Prints true. Good.
console.log(strUsingString === "Hi"); // Prints false. Wait, what?

console.log(str == strUsingString); // Prints true.
console.log(str === strUsingString); // Prints false. Are you kidding!!!
```

Here, the equality checks using the `===` operators fail because `===` not only checks for equality in value but also for equality in type as well. Therefore, even though `str` and `strUsingString` have the same value "Hi", `str` is of type `string` whereas `strUsingString` is of type `object` and hence the check fails. This will lead to bugs which are very hard to debug.

## Value vs Reference

When you create a string as a literal, no matter how many of them you create, they will all point to the same literal in storage. However, when you create a string using `String`, each one creates a brand new object. 

Let's look at how the following code is represented in memory. 

```typescript
const str1 = "Hi"; 
const str2 = "Hi";

const strO1 = new String("Hi");
const strO2 = new String("Hi");
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0fhlypn816u90fptejzl.png)

Now, consider the following snippet,

```typescript
console.log(str1 == str2); // Prints true. Good.
console.log(str1 === str2); // Prints true. Good.

console.log(strO1 == strO2); // false. Worse!
console.log(strO1 === strO2); // false. Even Worse!!
```
This time both the `==` and `===` checks fail. This is because what is being actually compared is the address of the memory locations and not the actual value themselves.

This is a pretty big source of bugs! Just imagine trying to compare two strings and you get `false` in spite of them having the same value.

# Conclusion

Always use the lowercase versions, `string`, `number` and `boolean`. This will ensure that you do not run into the bugs mentioned above and since the bugs happen at run time, they are very hard to debug. 

Hope you learnt something new. Happy coding and see you in the next one.. :)

Follow me on [Twitter](https://twitter.com/sidthesloth92) or check out my [website](https://dineshbalaji.in) to know more about me..✨