JS
TS

JavaScript to TypeScript

10 lessons

Progress0%
1Introduction to TypeScript2Basic Types3Arrays and Tuples4Function Types5Object Types6Interfaces7Union Types8Generics9Type Guards10Utility Types
All Mirror Courses
JS
TS
Basic Types
MirrorLesson 2 of 10
Lesson 2

Basic Types

Primitive types in TypeScript

Introduction

In this lesson, you'll learn about basic types in TypeScript. Coming from JavaScript, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
JS
From JavaScript:

In JavaScript, you're familiar with primitive types in typescript.

TS
In TypeScript:

TypeScript has its own approach to primitive types in typescript, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TS
TypeScript Example
// TypeScript primitives
let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = false;
let nothing: null = null;
let notDefined: undefined = undefined;
let bigNumber: bigint = 9007199254740991n;
let uniqueId: symbol = Symbol("id");

Comparing to JavaScript

Here's how you might have written similar code in JavaScript:

JS
JavaScript (What you know)
// JavaScript primitives
let name = "Alice";
let age = 30;
let isStudent = false;
let nothing = null;
let notDefined = undefined;
let bigNumber = 9007199254740991n;
let uniqueId = Symbol("id");
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

TypeScript has the same primitives as JavaScript

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

number type covers both integers and floats

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

bigint and symbol types exist in TypeScript

Step-by-Step Breakdown

1. String Type

The string type represents text data. Template literals also return strings.

JS
JavaScript
let greeting = "Hello";
let template = `Hi ${name}`;
TS
TypeScript
let greeting: string = "Hello";
let template: string = `Hi ${name}`;

2. Number Type

Unlike some languages, TypeScript has only one number type for both integers and floating-point numbers.

JS
JavaScript
let int = 42;
let float = 3.14;
TS
TypeScript
let int: number = 42;
let float: number = 3.14;
Common Pitfall
There's no separate 'int' or 'float' type in TypeScript. Use number for all numeric values.

3. Boolean Type

Boolean represents true/false values.

JS
JavaScript
let isActive = true;
TS
TypeScript
let isActive: boolean = true;

4. Type Inference

TypeScript can often infer types from initial values, so explicit annotations aren't always necessary.

JS
JavaScript
let count = 10; // JS: no type info
TS
TypeScript
let count = 10; // TS infers: number
Rule of Thumb
Let TypeScript infer simple types. Add explicit types for function parameters, return values, and complex objects.

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • TypeScript has the same primitives as JavaScript
  • number type covers both integers and floats
  • bigint and symbol types exist in TypeScript
Common Pitfall
Don't assume TypeScript works exactly like JavaScript. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • TypeScript has 7 primitive types: string, number, boolean, null, undefined, bigint, symbol
  • number handles both integers and decimals
  • Type inference reduces the need for explicit annotations
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your JavaScript code in TypeScript to practice these concepts.
PreviousNext