TypeScript from Zero: Strings

Episode 4 of TypeScript from Zero: strings, the type for text. We look at quotes, string helpers, template literals, the classic "5" + 3 trap, and how tsc catches it. All code below is the final code from the video.

• Previous: Numbers and Math. All episodes: playlist.

cd hello-ts
touch strings.ts
code .

1. Quotes

A string is text between quotes: double quotes, single quotes, or backticks. We mostly use double quotes.

const language = "TypeScript";
console.log(language);

TypeScript

2. String helpers

We call helpers with a dot. length counts the characters, toUpperCase() makes capitals, slice(0, 4) cuts from position 0 up to (not including) 4, and includes() asks if some text is inside:

console.log(language.length);
console.log(language.toUpperCase());
console.log(language.slice(0, 4));
console.log(language.includes("Script"));

10
TYPESCRIPT
Type
true

3. Template literals

Backticks make a template literal. Inside it, ${...} puts any value into the text:

const version = 7;
console.log(`I am learning ${language} ${version}`);

I am learning TypeScript 7

4. The plus trap

+ also joins strings. When one side is text, plus joins instead of adds:

console.log("5" + 3);

53

5. A silent bug

We say total is a number, with : number, and put "5" + 3 into it:

const total: number = "5" + 3;
console.log(total + 1);

Node runs it and prints a silent wrong answer, 531. But tsc catches it before it can run:

npx tsc --noEmit strings.ts

strings.ts:10:7 - error TS2322: Type 'string' is not assignable to type 'number'.

6. The fix

Turn the text into a number first with Number():

const total: number = Number("5") + 3;
console.log(total + 1);

tsc prints nothing, and Node prints the right answer, 9.

Final code

const language = "TypeScript";
console.log(language);
console.log(language.length);
console.log(language.toUpperCase());
console.log(language.slice(0, 4));
console.log(language.includes("Script"));
const version = 7;
console.log(`I am learning ${language} ${version}`);
console.log("5" + 3);
const total: number = Number("5") + 3;
console.log(total + 1);

TypeScript
10
TYPESCRIPT
Type
true
I am learning TypeScript 7
53
9

Recap

• Quotes, helpers like length and slice, template literals with ${}.
• The "5" + 3 trap, caught by tsc (TS2322).

Next episode: booleans and comparisons.