Typescript Quirks - String or string? Which one should I use?

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.

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.

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

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.

const str1 = "Hi"; 
const str2 = "Hi";

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

Now, consider the following snippet,

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 or check out my website to know more about me..✨

Comments

[Calin Baenen]

Also, I believe with String, you can have a null value, and with string, you can't (at least in any typed-language that doesn't support type-reassignment (i.e. Typescript(?)), though, I could be wrong, since I'm basing this off of my knowledge with C# and Java objects).

[Dinesh Balaji]

Since Typescript is a superset of JS (which does not have types), you can assign null to string as well. But if you want to opt out of this behaviour, in your tsconfig you can set, strictNullChecks to true. Now you won't be able to assign null to a string variable.

[Calin Baenen]

Yeah. Cool.
Though, I only wish there was a way to use TS in the browser natively, I know it has to be "converted" to JS, but like, why can't we just have it interpreted like JS, and have that as another option? It'd save a hassle.

[Dinesh Balaji]

I would love that as well.. :D

[Calin Baenen]

I mean, the script tag NEEDS another use, bc outside if js, it's useless.
If I knew how to make, or modify a browser, I wold make such a thing.

#NativeTSSupport