Quotes decide the type
In TypeScript, the same digits can be two different kinds of value. Written with quotes, "15" is a string: text made of the characters 1 and 5. Written without quotes, 15 is a number: a quantity you can calculate with. The two look alike when printed, but the language treats them differently.
The typeof operator shows the difference:
let a = 15;
let b = "15";
console.log(typeof a, typeof b);
number string
Why the difference matters
An operator can mean different things depending on the types it works with. The + operator adds two numbers, but it joins a string with whatever follows it:
let a = 15;
let b = "15";
console.log(a + 1);
console.log(b + 1);
16
151
The number 15 plus 1 is 16. The string "15" followed by 1 becomes the text "151", because the number is turned into text and attached to the end.
Other arithmetic is blocked altogether. TypeScript's compiler rejects b * 2 when b is a string, with an error saying that the left-hand side of an arithmetic operation must be of type any, number, bigint or an enum type. JavaScript itself would not complain. It would try to convert the text at run time, which works for "15" but gives NaN (not a number) for text like "peanut". TypeScript's compiler flags the problem at compile time instead.
Declared types must match the values
When you annotate a variable with number or string, TypeScript checks the value you store against it. This is the mistake the exercise starts with:
let age: number = "29";
let phone: string = 2025550153;
The compiler reports Type 'string' is not assignable to type 'number' for the first line, and the matching message the other way round for the second. The annotation stays as it is. What needs to change is the value, because the annotation states what each variable is meant to hold.
Which type fits which data
A useful question is: will I ever calculate with this value?
- An age is a quantity. You may add to it, compare it, or find an average. It is a
number. - A phone number is an identifier. You never add two phone numbers together. It is a
string.
Strings also protect information that numbers would lose. A number cannot keep a leading zero. Converting the string "007" with Number gives 7, and the zeros are gone for good. A string keeps every character exactly as written, and its length tells you how many characters there are. Writing a number such as 0123456789 directly in code is not even allowed: the compiler reports that decimals with leading zeros are not allowed.
Converting between the two
Sometimes you start with one type and need the other. Two built-in functions do the conversion explicitly:
let text = "15";
let asNumber = Number(text);
console.log(asNumber + 1);
let count = 42;
let asText = String(count);
console.log(asText + 1);
console.log(Number("peanut"));
16
421
NaN
Number turns text into a number, and gives NaN when the text is not a valid number. String turns a number into text, after which + joins instead of adding. Writing the conversion yourself makes the intent clear, which is better than letting + convert a value by accident. Later lessons cover conversion in more detail.
The solution
Remove the quotes around the age so it is a number, and add quotes around the phone number so it is a string:
let age: number = 29;
let phone: string = "2025550153";
Now each value matches its annotation. Adding 1 to age gives 30, and phone.length is 10.
Key takeaways
- Quotes make a value a
string. No quotes make a digit sequence anumber. - Use
typeofto check which one you have. +adds numbers but joins strings, so"15" + 1is"151".- Use a number for quantities you calculate with, and a string for identifiers such as phone numbers.
- When the compiler rejects a value, fix the value so it matches the annotation.