Start learning free

LESSON 10 OF 348 · VARIABLES

Data Types in TypeScript: number, string, boolean and null

Lesson Read the full explanation

TL ; DR:

In TypeScript, not all data is treated the same. There are different data types, such as:

  • number - represents numbers like 3 and 3.14

  • string - represents a string (sequence of characters) like "John Doe"

  • boolean - represents data that can have one of two values: true or false

  • null - represents a null value, or no value at all


Full lesson:

We've talked about data and variables, which are containers to store that data. But not all data is treated the same.

For example, JavaScript distinguishes between numbers, such as 12, and strings, such as "12" or "dog", which are collections of characters.

The most basic and used data types in JavaScript are:

  • number - represents integer numbers like 3 and -7 and floating point numbers like 3.14
  • string - represents a string (sequence of characters) like "John Doe" or 'dog'
  • boolean - represents a Boolean, data that can have one of two values: True or False
  • None - represents a null value, or no value at all

typeof operator

JavaScript knows what type everything is. We can ask JavaScript what type something is by using the typeof operator:

let x = 1;
console.log(typeof x); // Output: number

let y = 3.14;
console.log(typeof y); // Output: number

console.log(typeof "butter"); // Output: string

let z = true;
console.log(typeof z); // Output: boolean

Choosing what operation to perform:

One instruction can have several distinct meanings depending on the data types it's working with.

For example, suppose you see this line of code somewhere in a program:

console.log(a + b);

Can you tell for sure what it does without knowing anything about the variables a and b?

It might add two numbers, if a and b are both numbers:

let a = 10, b = -5;

console.log(a + b); // Output: 5

But it also might concatenate two strings, if a and b are both strings:

let a = "Hello ", b = "world!";

console.log(a + b); // Output: Hello world!

Of course, addition and string concatenation are two completely different operations and TypeScript needs to figure out which one to do.

And this is exactly why TypeScript assesses the data type of every value you use in your program. In order to be able to make these decisions when needed.

In our example, when it reads a + b, TypeScript checks the data type of a and b. If both are string, it performs string concatenation. If both are numbers, it performs addition.

Invalid operations:

Asessing data types is also helpful for TypeScript to make sure that what you do with the data actually makes sense.

For example, computers can perform mathematical operations on numbers, but not on strings. Of course, nobody can stop you from writing a program like this:

let a = "peanut";
let b = "butter";

console.log(a * b); // Output: NaN

But when you try to run this program, it will output NaN.

This is the way of TypeScript telling you: "Hey, I'm a little confused. How do you multiply two strings? I've never heard of that."

Some languages like Python wouldn't even let this code run, but throw a TypeError: can't multiply sequence by non-int of type 'str'. JavaScript is more permissive, which is not necessary a good thing.

As a programmer, I'd rather be told when I made a mistake early on so I can fix it, instead of running into problems later on and not knowing what the root of those problems is.

Assignment
Follow the Coding Tutorial and let's practice with data types!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 4
    Ctrl + Enter to check

    TYPESCRIPT · VARIABLES

    Data Types in TypeScript, explained

    Why data has types

    Not all data is treated the same. The number 12 and the text "12" look alike, but you can multiply the first and not the second. A data type is the kind of value a piece of data is, and it decides what you can do with it. TypeScript adds a layer on top of JavaScript for exactly this: you can state each variable's type, and the compiler checks your code against it before anything runs.

    The basic types

    • number holds every kind of number, whole or decimal: 3, -7, 3.14.
    • string holds text, a sequence of characters, written in single quotes, double quotes or backticks: "John Doe", 'dog'.
    • boolean holds one of two values: true or false, both in lower case.
    • null stands for "no value" and is written null.

    There is no separate integer type. 5 and 3.14 are both number values, so myInt and myFloat in this lesson use the same annotation. Related to null is undefined, the value of a variable that has been declared but never given a value. The word None belongs to other languages and means nothing in TypeScript.

    Declaring a variable with a type

    Write the type after the name, separated by a colon:

    let myInt: number = 5;
let myFloat: number = 3.14;
let myString: string = "Hello";
let myBool: boolean = true;

    If you leave the annotation out, TypeScript works out the type from the starting value, so let x = 1 is a number too. Writing it out states your intent, and it keeps the compiler from guessing wrong when the starting value is vague.

    Asking for a value's type with typeof

    The typeof operator reports the type of a value at run time:

    console.log(typeof myInt, typeof myFloat, typeof myString, typeof myBool);

    number number string boolean

    One result surprises people. typeof null gives "object", not "null". This is an old quirk of JavaScript that cannot be fixed without breaking existing programs. To test for null, compare with === instead of using typeof.

    One operator, several meanings

    The same symbol can do different jobs depending on the types around it. Take a + b. If both are numbers, it adds them. If both are strings, it joins them:

    let a = 10, b = -5;
console.log(a + b);

let c = "Hello ", d = "world!";
console.log(c + d);

    5
Hello world!

    You cannot tell what a line does without knowing the types of its variables, and that is a good reason to have types.

    Invalid operations are caught early

    Types also stop operations that make no sense. Multiplying two strings is one of them:

    let a = "peanut";
let b = "butter";
console.log(a * b);

    The compiler reports an error on this line, saying saying that the left-hand side of an arithmetic operation must be of type any, number, bigint or an enum type. Plain JavaScript has no such check. The JavaScript that tsc still writes runs, though, and prints NaN, short for "not a number". An error pointing at the exact line is far easier to deal with than a NaN that shows up later in the program.

    It helps to remember how this works: TypeScript checks types while compiling, and then removes them. The JavaScript that runs has no annotations, so an annotation does not convert anything or check anything at run time.

    The lesson's exercise

    The exercise builds four variables, one per step, each on its own line and each keeping the lines above it.

    1. An integer. Declare myInt with the type number and a whole number such as 5.
    2. A decimal. Declare myFloat with the same number type and a value with a decimal point, such as 3.14.
    3. Text. Declare myString with the type string and a value in quotes, such as "Hello".
    4. A boolean. Declare myBool with the type boolean and either true or false.
    let myInt: number = 5;
let myFloat: number = 3.14;
let myString: string = "Hello";
let myBool: boolean = true;

    Common mistakes

    • Putting quotes on a number or boolean. "true" is a string, not a boolean.
    • Capitalizing booleans. True is a different name, and the compiler will not find it.
    • Using the wrong annotation. A value that does not match the declared type, like let n: number = "5", is rejected.
    • Expecting a separate integer type. Whole numbers and decimals are both number.

    Key takeaways

    • The four basic types are number, string, boolean and null.
    • The annotation goes after the name: let myBool: boolean = true;.
    • typeof reports a value's type at run time, and typeof null is "object".
    • The type of the operands decides what + does.
    • The compiler reports invalid operations at the exact line.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free