Learn TypeScript in Construct, part 3: operators

UpvoteUpvote 3 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

197 visits, 247 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 23 Jun, 2025. Last updated 24 Jun, 2025

String operators

So far we've mostly covered operators that work on numbers. There are some special uses of operators for strings too.

Strings can be concatenated, i.e. joined together, with +. In this case so long as either the left or right side of the + is a string, it will join strings together. Only when both the left and right side of + are numbers will it do mathematical addition.

// Try entering in to the console:
"Hello " + "world!"  // Hello world!

You can also insert numbers, including variables, this way - so long as one side of the + is a string.

let score = 100;
console.log("Your score is " + score + "!");
// Your score is 100!

Strings using the backtick character ` also have a special feature where you can easily insert other values in to text with ${value}:

let score = 100;
console.log(`Your score is ${score}!`);
// Your score is 100!

These strings are sometimes referred to as template literals or template strings, as it's like a text template being filled in with values at certain points.

These features are useful ways to display values as text, both for logging to the console and displaying information to the user. This guide will also make use of template literals to make it easy to display messages including numbers.

Mixing types

In TypeScript, operators generally return the same type of the values they are used with (also called the operands). For example a + b returns a number if both a and b are numbers. Similarly if both are strings, the result is also a string.

However you can also mix types. With the + operator, if either side is a string, it does string concatenation, which includes converting numbers to a string to join them. Sometimes you can have a string that contains a series of digit characters, so it looks like a number, e.g. "5". However that's still a string, which is a different type to a number! Then if you add something to it, you'll get string concatenation.

// Try entering in to the console:
"5" + "5"	// "55" (string)
"5" + 5		// "55" (string)
5 + "5"		// "55" (string)
5 + 5		// 10 (number)

This can happen in less obvious circumstances, such as if you store a string entered by the user in to a variable, and then add a number to the variable.

TypeScript will check that you've used the correct type on most operators. For example a * b is only allowed to be used with numbers, and if either side is a string it will be marked as an error, as it doesn't make sense to try to multiply strings. However + is an exception and is allowed to be used with both strings and numbers for string concatenation, as that is a common feature of programming languages (and also used widely in JavaScript).

It's usually preferable to use template literals instead of + for producing strings, and stick to only using + for mathematical addition with numbers, to avoid any confusion around what types you're working with.

Converting between strings and numbers

TypeScript sometimes automatically converts values, such as how string + number will automatically convert number in to a string, and then append it to the first string. Sometimes you want to deliberately convert between types though. For example the user may type a number in to a text input field, which will return a string, but you want to use it as a number instead. It's also often regarded as better programming style to explicitly convert values, rather than relying on implicit language features that convert for you.

There are actually lots of ways to explicitly convert values in TypeScript, but we'll focus on just one for now: using Number() and String() functions. Using Number(string) will convert a string to a number.

// Try entering in to the console:
Number("5")		// 5 (number)
Number("-6.5")	// -6.5 (number)
Number(5)		// 5 (still a number)
Number("Hello")	// NaN

Notice in the last number we got the special Not A Number (NaN) result again. This is because the string "Hello" does not represent a valid number, so we get a special result to indicate this.

Similarly, String() can convert a number to a string.

String(5)		// "5" (string)
String(-6.5)	// "-6.5" (string)
String("Hello")	// "Hello" (still a string)
String(NaN)		// "NaN" (string)

Note that numbers can always be converted to a string. If you convert the special NaN value to a string, you get a string which says "NaN". (This conversion is successful; it's correctly turned a number value in to a corresponding string.)

Also note that in both cases, if you convert a type to the same type, like String("Hello"), it just returns the same value unaltered.

Next Tutorial In Course

Learn TypeScript in Construct, part 4: Control flow 18:48

Learn about 'if' statements, loops, and other basics of control flow in TypeScript.

  • 0 Comments

Want to leave a comment? Login or Register an account!